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

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[j].text }
`
          this.datas.list[j].html = `${script.outerHTML}`;
        }

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

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

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