uniapp - APP分享至微信，通过微信分享页唤醒APP

项目场景：

uniapp开发的APP需要有个产品详情页，该详情页需要分享到微信，在微信点开该链接打开一个H5页面，然后点击可跳转至对应的APP。

效果展示

解决方案：

第一步： 在uniapp的app项目里写分享事件，我使用的是uniapp 的分享API。

const share = () => {
  let shareParam:any = {
    provider: "weixin",  // 分享服务提供商（weixin|qq|sinaweibo）
    scene: "WXSceneSession",  // WXSceneSession分享到聊天界面 WXSceneTimeline分享到朋友圈 WXSceneFavorite分享到微信收藏
    type: 0,   //0-图文 1-纯文字 2-纯图片 3-音乐 4-视频  5-小程序
    href: netConfig.base_h5URL + "/pages/circle/index?id=" + handleCircle.value.id,  // 你的H5跳转地址
    title: "#推荐#", // 分享的标题
    summary: handleCircle.value.contentText || "这个内容太棒了，快来get吧~",
    imageUrl,
  };
  uni.share({
    ...shareParam,
    success: function (res: any) {
      console.log("success:" + res);
    },
    fail: function (err: any) {
      console.log("fail:" + res);
    }
  });
}

提示：provider需要和manifest.json中的配置匹配，我这里是weixin

第二步：需要配置好在微信里面打开的H5页面

我这里是重新建了一个H5项目，专门存放微信的H5分享页。使用的是微信的wx-open-launch-app标签实现唤醒APP

部分代码片段如下：

<wx-open-launch-app
    class="launch_app"
    id="launch-btn"
    @error="handleError"
    @launch="AppLaunch"
    appid="你的微信开放平台中添加的移动应用appId"
  >
    <component :is="'script'" type="text/wxtag-template">
      <button
      style="
      display: flex;
      justify-content: center;
      color: #fff;
      align-items: center;
      height: 50px;"
      >
        打开APP
      </button>
    </component>
</wx-open-launch-app>

onLoad((options)=>{
  try {
    uni.request({
        url: url,  //后端给的接口用来提供签名等信息，前端好像也可以配置，我这边是后端去弄的...
        data: {url: window.location.href.split("#")[0]},
        method: 'POST',
        success: (res:any) => {
          window.wx.config({
            debug: false,
            appId: res.data.body.appId,  // 必填，公众号的唯一标识
            timestamp: res.data.body.timestamp,  // 必填，生成签名的时间戳
            nonceStr: res.data.body.nonceStr,   // 必填，生成签名的随机串
            signature: res.data.body.signature,  // 必填，签名
            jsApiList: ['wx-open-launch-app'],  // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-app']  // 可选，需要使用的开放标签列表
          })
          window.wx.ready(function () {
            console.log('成功了')
          })
          window.wx.error(function (res:any) {
            console.log(res)
          })
        }
    })
  } catch (error) {
    console.log(error)
  }
})

// 失败则跳转到对应的应用宝下载地址
const handleError = () => {
  //判断手机类型
  if(uni.getSystemInfoSync().platform=="android"){
    window.location.href= 'https://a.app.qq.com/o/simple.jsp?pkgname=com.meilianb.www'  // 安卓跳转到对应的应用宝下载地址
  }else if(uni.getSystemInfoSync().platform=="ios"){
    window.location.href= `https://apps.apple.com/cn/app/id6670162303`  // ios跳转到ios商店
  }
}

// 跳转成功后的事件，可以不写任何成功事件，但是该方法不可缺
const AppLaunch = () => {

}

ps：该H5页面可以在微信开发者工具中的 公众号网页项目 中进行调试，但是点击跳转功能需要在真机测试！