微信H5跳转第三方小程序（亲测可用！）

场景：公司需要做一个微信H5页面跳转到联通小程序实名，这里采用的框架是vue2脚手架，

weixin-js-jdk我用的是1.4.0-test版本，网上推荐的是1.6.0版本，1.4.0的也可以正常跳转

在mani.js下加入这行代码忽略报错

Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

在页面中：

这里的username是微信小程序原始ID，appid和username这两个参数可以直接在你想要跳转的第三方小程序查看到，查看过程如下

下面的引入选其中一个即可，我这里采用的是npm安装

在mounted中调用函数获取微信JS-SDK成功后才会正常显示上面 “去认证” 按钮，而且只能在手机微信端看到该按钮，浏览器上看不到

这里的getJsSdkConfig是后端获取微信签名的接口，需要找后端拿

需要注意的是 这里的url最好截取一下去除  #  号后面的参数，不然会出现按钮不显示的问题

下面放几行关键代码供大家复制

<!-- 跳转联通小程序实名 -->
              <wx-open-launch-weapp
                id="launch-btn"
                username="gh_5eac63f4d504"
                appid="wxa5b3db0cd2c5a1ed"
                path="pages/login/index.html"
              >
                <script type="text/wxtag-template">
                  <style>
                    .btnn {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 68px;
                      height: 28px;
                      color: #ffffff;
                      background: #3981f2;
                      border-radius: 4px;
                      font-size: 11px;
                      box-sizing: border-box;
                    }
                  </style>
                  <div class="btnn">去认证</div>
                </script>
              </wx-open-launch-weapp>

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