H5页面微信wx-open-launch-app组件跳转APP

 最近遇到一个跳转手机app的功能，我这边用的是微信H5页面跳转第三方APP，底层逻辑即H5页面引入微信sdk-- 跳转公众号 --微信公众号跳转到app，以下是详细介绍：
 

一、前提

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。需要注意的是，微信开放标签有最低的微信版本要求、最低的系统版本要求，以及最低的JS接口文件版本要求。

• 微信版本要求为：7.0.12及以上
• 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
• JS接口文件：1.6.0以上 （例如：http://res.wx.qq.com/open/js/jweixin-1.6.0.js）

二、公众号配置 

微信公众号必须为服务号、并且接入了微信的第三方开发平台、在微信公众号管理平台还有三个位置需要进行配置，“业务域名、JS安全接口域名、网页授权域名”，这三个域名均需要填写使用跳转页面的那个子域名（比如：拥有H5跳转按钮的页面url为https://h5-tset.xxx.com/index.html，那么需要填写的域名则为"h5-tset.xxx.com"）
再者，我们是需要开发者可以被授权使用本公众号的所有功能，那么就需要配置白名单ip，此IP则为你的安全域名ip即可。

三、微信开放平台配置

公众号配置完成之后，将「 JS 接口安全域名绑定的服务号」绑定在「移动应用的微信开放平台账号」下，并确保服务号与此开放平台账号同主体且均已认证。

第一个需要的就是申请移动应用，找APP开发人员即可瞬间拿到。
第二个需要配置之前上面提到的公众号，将其绑定到本开放平台。在绑定完成公众号之后，需要在微信开放平台-管理中心-公众号详情-接口信息-关联设置将移动应用的APPID与之前配置的JS安全域名进行绑定。
这里需要注意一点：一个APPID只能绑定一个安全域名，但是一个安全域名可以绑定多个APPID，这种情况需要的是多个移动应用和服务号。并且可跳转到APP的页面必须为JS安全域名打开，也就是说，我的页面在https://h5-test.xxx.com/index.html，JS安全域名填写的是h5-test.xxx.com就可以成功跳转，但是JS安全域名填写xxx.com，那么这个页面是无法进行微信跳转APP的。

获得此设置入口的权限，需同时满足如下条件：

1. 服务号已认证
2. 开放平台账号已认证
3. 服务号与开放平台账号同主体

绑定域名和移动应用

1. 绑定域名的要求：

• 域名须为当前服务号的 JS 安全域名
• 域名只能同时绑定一个移动应用，因此须确保域名未被其他移动应用绑定

1. 绑定移动应用的要求

• 只能绑定同一微信开放平台账号下审核通过的移动应用

1. 绑定次数

• 每月可修改绑定3次

四、 JS安全域名下的H5页面引入JS文件

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

备注：支持使用 AMD/CMD 标准模块加载方法加载。

五、 通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
wx.ready(() => {
          console.log("ready===", res);
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
           });
          wx.error(function (res) {
              console.error("错误===", res);
          });
}

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

 六、注意事项

（1）wx-open-launch-app这个组件只能在微信内置浏览器里面使用
前期可以用微信开发者工具进行调试（公众号网页模式），后面一定要在真机上运行 模拟器会提示。

（2）公众号以及开放平台配置信息错误可能会导致跳转按钮不显示

（3）使用过程出现问题以及invalid signature签名错误排查，参考：invalid signature签名错误排查-CSDN博客