vue 微信h5页面跳转到小程序 wx-open-launch-weapp（多个）

微信官方文档：微信官方文档

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

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

4、多个wx-open-launch-weapp标签采用动态渲染的方式

for(let j=0; j<this.datas.list.length; j++) {
          let script = document.createElement('script')
          script.type = 'text/wxtag-template'
          script.text = `<img style="margin: 0 auto;width: ${this.datas.button_size}px;height: ${this.datas.button_size}px;border-radius: ${this.datas.border_radius}px"  src="${this.datas.list[j].image || emptyImage}" alt="图标"/><p style="font-size: ${this.datas.font_size}px; font-weight: ${this.datas.text_style.includes('1')?'bold':''}; font-style: ${this.datas.text_style.includes('2')?'italic':''}; color: ${this.datas.font_color};text-align: center;margin: 0;text-overflow: ellipsis; white-space: nowrap;word-wrap: break-word;overflow: hidden;">${ this.datas.list[j].text }</p>`
          this.datas.list[j].html = `<wx-open-launch-weapp username="${this.datas.list[j].gh_id}" path="${this.datas.list[j].minApp_link}">${script.outerHTML}</wx-open-launch-weapp>`;
        }

this.datas.list.reverse().reverse(); //改变原始数组从而更新数组

这样就可以控制样式和动态渲染  样式最好全部都写内联样式

调试必须要部署在线上 炒鸡麻烦