微信公众号H5页面跳转微信小程序（微信开放标签wx-open-launch-weapp）

最近接到一个需求，要求实现从微信公众号h5页面跳转到指定的小程序页面。就查到微信开放标签，但是使用起来真的是有点。。。。，分享下我的实现过程；

补充一点：所要跳转的小程序必须要是正式版。

步骤一：绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

步骤二：引入JS文件

在需要调用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 标准模块加载方法加载

（我用框架是Vue，如果是类似的框架在index.html标签 引入即可）

步骤三：获取签名及wx.config参数所需的参数

以Vue框架为例，wx.config所需要的的参数有如下：

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

以上的除了jsApiList，openTagList，其他的内容都是由后端返回，调用接口直接使用就好。

created() {
    http({
      method: 'POST',
      url: "xxxxxxx",// 请求接口的url
     data: {
        url:window.location.href.split('#')[0]
      },
      headers: {
        "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
      }
    }).then(res => {
      console.log(wx)
      wx.config ({
        appId:res.data.appId, 
        timestamp:res.data.timestamp,
        nonceStr: res.data.noncestr,
        signature:res.data.signature ,
        jsApiList: ["onMenuShareTimeline"], 
        openTagList: ['wx-open-launch-weapp']
      });
      // 通过ready接口处理成功验证
      wx.ready(() => {
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
        });
        btn.addEventListener('error', function (e) {
          console.log('fail', e.detail);
        });
      });
      // 通过error接口处理失败验证
      wx.error(function (res) {
        console.log(res)
      });
    }).catch(err =>{
      console.log(err);
    });
  }

想要使用微信开放标签的第一步是config得成功，不然后出现各种错误，

步骤四：使用标签

HTML代码如下：

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_xxxxx"
        path="pages/index/index.html"
      >
        <script type="text/wxtag-template">
          <div>
            <style>
              .btn{
                outline: none;
                width: 300px;
                height: 45px;
                border: 1px solid rgba(240, 131, 0, 1);
              }
            </style>
            <button class="btn">立即跳转</button>
          </div>
        </script>
      </wx-open-launch-weapp>

1.username：是所要跳转的小程序的原始Id，不是appId

2.path：是所要跳转的小程序的页面，页面路径后面必须要加.html后缀。

 

微信开放标签有最低的微信版本要求，以及最低的系统版本要求。

如果开发过程中出现以下情况的，要确认一下，微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。