微信H5链接唤起三方App总结

官方文档：

开放标签说明：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

配置说明：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html

app获取开放标签中的extinfo数据：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/APP_GET_EXTINF.html--此次没用到

一、需求背景

期望分享链接自动唤起app(若应用安装应用的用户)

二、准备工作

1、环境要求

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上

2、微信后台配置

a、将MP_verify_f4VWFoFpHgzmqFbo.txt文件下载并放到项目的根目录下（域名的根目录下）

b、公众号管理平台：配置该公众号下js的安全域名

 

 c、在微信开放平台将js安全域名与app进行关联

 

3、跳转app的H5页面接入微信JS-SDK

方式一：sdk--http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

方式二：npm install weixin-js-sdk --save（目前使用的方式）

三、业务功能实现

1、关键代码

<template>
   <div>
      <wx-open-launch-app
       @launch="launch"

       @error="launchError"

       id="launch-btn"
       appid="移动应用APP的 APPid"
       extinfo="H5传给APP的参数（可用于跳转指定页面）"

      >
         <script type="text/wxtag-template">   
            <style>.btn {height: 96px}</style>
            <div class="btn">打开app</div>
        </script>
    </wx-open-launch-app>
  </div>
</template>

</script>

import wx from "weixin-js-sdk";
export default {
   methods: {

launch() {
       window.location.href =app提供的 scheme url；
       setTimeout(() => {
            window.location.href = appDownUrl;
       }, 1000);
},
launchError(e) {
     if (e.detail.errMsg === "launch:fail") {
        window.location.href = appDownUrl;

     }
}

   },

   created() {

        wx.config({

     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
     appId: '', // 必填，公众号的唯一标识
     timestamp: , // 必填，生成签名的时间戳
     nonceStr: '', // 必填，生成签名的随机串
     signature: '',// 必填，签名
     jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
     openTagList: ["wx-open-launch-app"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
 });

    }
};
</script>

config配置成功会展示：{"errMsg":"config:ok"}

注：

1、对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替

2、wx.ready()方法在config信息验证后不论成功或失败都会调用。失败的情况下，先调用error方法，然后再调用ready方法。

3、在开放标签中，<template>或者<script>里面的写样式，千万不要使用定位position，如果非要用就在最外层的div里面写

4、vue编译过程中无法识别标签wx-open-launch-app，可以在main.js中设置：

      Vue.config.ignoredElements = ["wx-open-launch-app"];

5、extinfo 内填的是传递给唤起 app 的数据；

遇到的问题：

1、在ios分享到微信的页面跳转后调用微信js-sdk时报错："invalid signature"，重新刷新页面，显示config：ok。

分析(借用)：从A页面跳转到B页面时，由于是使用vue-router切换，都是操作浏览器历史记录，所以ios端微信浏览器锁定的url的还是A页面的url。这样就会导致请求的url签名地址和浏览器执行weixin-js-sdk时锁定的地址不一致。

你当前请求的可能是url1或url2，而此时微信锁定的地址仍然是进入A页面时的url（因为在进入A页面是加载并执行了jweixin-1.x.x.js, 而路由变化A到B时，并没有再次执行jxinwei-1.x.x.js）。所以问题就发生了，但是你再刷新一下，

jweixin-1.x.x.js重新执行，此时微信浏览器锁定的url就是你当前刷新的url地址了，所以签名又成功了。

主要是因为：

【IOS】：ios微信端，路由变化时，微信认为SPA的url是不变的。
【Android】：android微信端，路由变化时，SPA的url是会变的（官方在安卓6.2版本，才对SPA变化作了支持）

所以，发起签名的url必须是微信锁定的url。

解决方案：

IOS端，在可能发生跳转的所有页面，把请求签名的url，保存到全局变量中。路由切换后，在调用分享接口时，使用全局变量里保存的url来请求签名

附上代码：

mounted() {
     if (isIOS && (typeof window.entryUrl === "undefined" || window.entryUrl === "")) {
          window.entryUrl = location.href.split("#")[0];
     }

}

2、安卓手机中使用微信开放标签唤醒APP，在APP已打开在后台运行的时候能唤醒APP，杀掉进程之后无法唤醒App

官方回答：对于拉起应用还没适配Android10限制后台拉起Activity的问题（亲测不止Android10，Android8也不行）

解决方式：

App杀掉的情况下在小程序中唤醒App时可以打印出日志，说明在App中微信的回调是正常的，只是没有打开App而已，目前是在app的微信回调onReq()中手动唤起app

四、其他工具

微信 JS 接口签名校验工具：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign