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标签

   <div class="home">
      <wx-open-launch-weapp
        id="launch-btn"
        :username="username"
        :path="path"
        @launch="handleLaunchFn"
        @error="handleErrorFn"
      >
        <script type="text/wxtag-template">
          <style>
              .ant-btn {
                  line-height: 1.499;
                  position: relative;
                  display: inline-block;
                  font-weight: 400;
                  white-space: nowrap;
                  text-align: center;
                  background-image: none;
                  border: 1px solid #d9d9d9;
                  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
                  box-shadow: 0 2px 0 rgba(0,0,0,0.015);
                  cursor: pointer;
                  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
                  transition: all .3s cubic-bezier(.645, .045, .355, 1);
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                  -ms-touch-action: manipulation;
                  touch-action: manipulation;
                  height: 32px;
                  padding: 0 15px;
                  font-size: 14px;
                  border-radius: 4px;
                  color: rgba(0,0,0,0.65);
                  background-color: #fff;
              }
              .ant-btn-red {
                  color: #fff;
                  background-color: #FF5A44;
                  border-color: #FF5A44;
                  text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
                  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
                  box-shadow: 0 2px 0 rgba(0,0,0,0.045);
              }
          </style>
          <button class="ant-btn ant-btn-red">{{ btnText }}</button>
        </script>
      </wx-open-launch-weapp>
    </div>

 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']