vue中H5跳转微信小程序 wx-open-launch-weapp

    getShopWxConfig() {
      let that = this;
      let url = window.location.href;
      console.log('urlaaaaaaaaaaaaaa', url);
      //getWechatConfig为请求后台接口
      getWechatConfig(url).then(res => {
        console.log('res1111111111', res);
        wx.config({
          debug: true,
          appId: res[1].appId,
          nonceStr: res[1].nonceStr,
          timestamp: res[1].timestamp,
          // url: res[1].url,
          signature: res[1].signature,
          openTagList: ['wx-open-launch-weapp'],
          jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'checkJsApi',
            'scanQRCode',
          ], // 必填，需要使用的JS接口列表
        });
        wx.ready(function () {
          console.log('res44444444');
        });
        wx.error(function (err) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log('err44444444', err);
        });
      });
    },

配置的方法需要放到created、mounted或者beforeRouteEnter里

  async mounted() {
    // this.appSource()
    await this.getShopWxConfig();
  },

2、在页面中添加wx-open-launch-weapp标签

 data() {
    return {
      username: 'gh_xxxxxxxxxxxx', // gh_ 开头的原始小程序ID
      path: 'pages/index/index.html', // 一定要以 .html 结尾
      btnText: '我的小程序',
    };
  },

    handleLaunchFn(e) {
      console.log('success', e);
    },
    handleErrorFn(e) {
      console.log('fail', e.detail);
    },

3.使用该标签的时候可能会报错，在main.js文件中添加上该行代码即可

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