vue项目中微信h5页面跳转到小程序 wx-open-launch-weapp

先放上微信官方文档：微信官方文档

1、先请求接口配置微信需要的一些参数

// 需要先请求后端接口 
let url = window.location.href.split("#")[0];
let shareConfig = await shareViewAPI.getWechatConfig({url});
let _this = this;
// 将接口返回的信息配置 
wx.config({
   debug: false,
   appId: _this.app_id, // 必填，公众号的唯一标识
   timestamp: shareConfig.timestamp, // 必填，生成签名的时间戳
   nonceStr: shareConfig.nonceStr, // 必填，生成签名的随机串
   signature: shareConfig.signature, // 必填，签名
   jsApiList: ["onMenuShareAppMessage"], // 必填，如果只是为了跳转小程序，随便填个值都行
   openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
});

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

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

 <!-- 关于username 与 path的值 参考官方文档  -->
<wx-open-launch-weapp
   id="launch-btn"
   username="gh_***"
   path="/pages/index/index.html"
   @error="handleErrorFn"
   @launch="handleLaunchFn"
>
 <!-- vue中需要使用script标签代替template插槽 html中使用template -->
  <script type="text/wxtag-template">
    <p class="store-tool_tip">点击进入选基工具</p>
  </script>
</wx-open-launch-weapp>

methods: {
    handleLaunchFn(e) {
      console.log("success", e);
    },
    handleErrorFn(e) {
      console.log("fail", e.detail);
    }
}

3、好啦

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

// 忽略打开微信小程序的组件
Vue.config.ignoredElements = ['wx-open-launch-weapp']