HarmonyOS 鸿蒙Next中app跳转微信公众号文章

基于你的问题描述，鸿蒙App通过WebView内嵌微信公众号，需要实现点击操作跳转到微信原生页面，以下是完整的解决方案：

一、问题核心分析

1. 原生限制：WebView内直接使用window.location.href跳转微信Schema（如weixin://）在鸿蒙系统中会触发白屏或失效（参考搜索结果）。
2. 深层原因：鸿蒙的ArkWeb组件对H5与原生能力桥接有安全限制，需通过显式调用原生接口实现跳转。

二、推荐解决方案（分步实现） 方案1：使用微信官方SDK桥接（推荐）

import web_webview from '@ohos.web.webview';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';

// 步骤1：在WebView中注入JS桥接对象
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({ src: "https://公众号主页URL", controller: this.controller })
        .javaScriptAccess(true)
        .onControllerAttached(() => {
          // 注册JS桥接
          this.controller.registerJavaScriptProxy({
            jumpToWechat: (articleId: string) => {
              this.openWechatArticle(articleId);
            }
          }, "HarmonyBridge", ["jumpToWechat"]);
        })
    }
  }

  // 步骤2：调用微信SDK跳转
  private async openWechatArticle(articleId: string) {
    // 申请权限（需在module.json5声明ohos.permission.START_ABILITIES_FROM_BACKGROUND）
    const atManager = abilityAccessCtrl.createAtManager();
    try {
      await atManager.requestPermissionsFromUser(getContext(this), ["ohos.permission.START_ABILITIES_FROM_BACKGROUND"]);
      // 构造微信DeepLink（参考微信官方文档）
      const want = {
        bundleName: "com.tencent.mm", // 微信包名
        abilityName: "com.tencent.mm.plugin.base.stub.WXEntryActivity",
        uri: `weixin://dl/article?appid=YOUR_APPID&id=${articleId}`
      };
      await getContext(this).startAbility(want);
    } catch (error) {
      console.error("跳转失败: " + JSON.stringify(error));
    }
  }
}

H5侧配合修改：

// 在公众号页面中调用桥接方法
document.getElementById('like-button').addEventListener('click', () => {
  if (window.HarmonyBridge && typeof window.HarmonyBridge.jumpToWechat === 'function') {
    window.HarmonyBridge.jumpToWechat('文章ID'); // 从后端获取文章ID
  } else {
    alert("请在鸿蒙App内操作");
  }
});

方案2：URL拦截 + 系统级跳转（兼容方案）

// 在WebView的onInterceptRequest中拦截
Web({ controller: this.controller })
  .onInterceptRequest((event) => {
    const url = event.request.getRequestUrl();
    // 匹配微信Schema（需与H5约定特殊前缀）
    if (url.startsWith('harmony-weixin://')) {
      const realUrl = url.replace('harmony-weixin://', 'weixin://');
      this.openWithSystem(realUrl); // 调用系统级打开
      return { isRedirect: true }; // 拦截请求
    }
    return { isRedirect: false };
  })

// 系统级打开方法
private openWithSystem(schema: string) {
  const want = {
    uri: schema,
    action: 'ohos.want.action.viewData'
  };
  getContext(this).startAbility(want).catch((err) => {
    console.error("跳转失败，错误码: " + err.code);
  });
}

H5侧修改跳转链接：

<a href="harmony-weixin://dl/article?id=123">点赞</a>

三、关键注意事项

1. 权限配置：

   // module.json5
   "requestPermissions": [
     {
       "name": "ohos.permission.START_ABILITIES_FROM_BACKGROUND"
     }
   ]
   

2. 微信参数获取：
   • 公众号文章ID需通过微信JS-SDK或后端接口获取
   • 微信开放平台申请的AppID必须与包名绑定
3. 多端兼容：
   • 通过@ohos.deviceInfo判断设备类型，手机端用DeepLink，平板/智慧屏用H5备用方案
4. 白屏处理（参考搜索结果）：
   • 在aboutToAppear生命周期开启调试：

   web_webview.WebviewController.setWebDebuggingAccess(true);
   

四、备选方案

若上述方法无效，可采用：

1. 系统浏览器中转：

   const want = {
     uri: 'https://mp.weixin.qq.com/s/文章路径',
     action: 'ohos.want.action.viewData'
   };
   startAbility(want); // 用系统浏览器打开链接
   

2. 微信官方鸿蒙SDK： 从[微信开放平台]下载HarmonyOS版SDK，使用wx.miniProgram.navigateTo等API（需公众号绑定域名）。

建议优先级：方案1 > 方案2 > 备选方案。实际开发时需在module.json5声明ohos.ability.background后台运行权限，并测试微信客户端版本兼容性（微信8.0.20+支持DeepLink）。

webview的onLoadIntercept方法里面进拦截
例如：
.onLoadIntercept((event) => {
  let data = event.data
  let url = data.getRequestUrl();
  if (url.startsWith("weixin") || url.startsWith("alipays")) {
     this.openThirdApp(url)
  }
  return true
})

  //打开三方app
  private openThirdApp(link:string){
    let openLinkOptions: OpenLinkOptions = {
      appLinkingOnly: false
    };
    try {
      let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
      context.openLink(link, openLinkOptions)
        .then(() => {
        }).catch((err: BusinessError) => {
        Logger.debug("openThirdApp Error"+JSON.stringify(err))
      });
    } catch (paramError) {
      Logger.debug("openThirdApp param Error"+JSON.stringify(paramError))
    }
    return true
  }

如图所示，点击公众号文章的赞、分享、推荐等按钮时，会有弹窗提示，点击前往，会触发Webview的onLoadIntercept方法，打印是 weixin://dl/business/?ticket=tbf11cc52464ac645907841eeaf6cd3ee 然后根据前缀打开第三方App的形式就行了