vue项目-h5跳转小程序

根据微信的开放标签wx-open-launch-weapp可以实现从h5页面跳转小程序的需求
微信文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
一、安装weixin-js-sdk
版本要求1.6.0

npm install weixin-js-sdk

二、config注入

wx.config({
        debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId,         // 必填，公众号的唯一标识，填自己的！
        timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
        nonceStr: nonceStr,   // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: [
          'wx-open-launch-weapp',
        ],
        openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
      })
      let _this = this
      wx.ready(function (res) {
        console.log(res)
      })
      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        console.log(res)
      });

三、页面引入

<wx-open-launch-weapp
            class="openweapp"
            id="launch-btn"
            username="gh_c001fa831731"
            path="pages/index/index.html"
          >
            <script type="text/wxtag-template">
              <style>.btn { padding: 12px;opacity:0 }</style>
    <button class="btn">打开小程序</button>
  </script>
          </wx-open-launch-weapp>

mounted() {
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success");
    });
    btn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      console.log("fail", e.detail);
    });
  },

四、vue报错
vue会显示wx-open-launch-weapp组件未注册
在main.js中加入

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

五、效果展示

9005739c46c226971939fefbb388b45.jpg