公众号内使用开放标签wx-open-launch-weapp打开小程序 vue版

template:

<div v-html="item.wxHtml" style="width:100%;height:100%;display:flex;"></div> 

methods：

//渲染打开小程序的按钮
async setWxhtml () {
    var wxHtml = await this.setWxhtml(this.item)
    this.$set(this.item, 'wxHtml', wxHtml)
},
setWxhtml(ite) {
    var wxHtml = `<img style="width: 100%;height: 100%;" src="${ite.image}">`
    //使用promise 防止没返回就渲染了
    return new Promise((resolve, reject) => {
      if (global.pathType == 1) {
        wx.miniProgram.getEnv((res) => {
          if (res.miniprogram) {
            resolve(wxHtml)
          } else {
            let script = document.createElement('script')
            script.type = 'text/wxtag-template'
            script.text = `<button style="height: 100%;width: 100%;background:url('${ite.image}') no-repeat;background-size:100%;border:none;display:block;position:absolute;left:0;top:0;"></button>`
            wxHtml =
              `<wx-open-launch-weapp style="height: 100%;width: 100%;display:flex;position:absolute;left:0;top:0;"
                                    id="launch-btn"
                                      appid="${ite.appid}"
                                      username="${ite.username}"
                                      path="${ite.path}"
                                    >${script.outerHTML}
                                  </wx-open-launch-weapp>`
            resolve(wxHtml)
          }

        })
      } else {
        resolve(wxHtml)
      }
    })
  },
getWxConfig() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {    //判断是否是微信环境
      wx.miniProgram.getEnv((res) => {
        //不在小程序里才渲染按钮 否则只渲染图片
        if (!res.miniprogram) {
          var newUrl = encodeURIComponent(window.location.href.split('#')[0])
          var data = {
            url: newUrl
          }
          axios({
            method: 'post',
            url: '',//你的请求微信配置的地址
            headers: {
              "Content-Type": "application/json", //设置请求头请求格式为JSON
            },
            data: data
          }).then(res => {
            if (res.data.code == 'success') {
              var resultInfo = res.data.data
              wx.config({
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                debug: false,
                // 必填，公众号的唯一标识
                appId: resultInfo.appId,
                // 必填，生成签名的时间戳
                timestamp: "" + resultInfo.timestamp,
                // 必填，生成签名的随机串
                nonceStr: resultInfo.nonceStr,
                // 必填，签名
                signature: resultInfo.signature,
                // 必填，需要使用的JS接口列表，所有JS接口列表
                jsApiList: ['chooseImage', 'previewImage'],
                openTagList: ['wx-open-launch-weapp']
              });
              wx.ready(function () {
                //ios刷新页面
                var device_type = navigator.userAgent; //获取userAgent信息
                var md = new MobileDetect(device_type); //初始化mobile-detect
                var os = md.os(); //获取系统
                if (os == "iOS" && sessionStorage.getItem("updatePage") != 1) {
                  window.location.reload();
                  sessionStorage.setItem('updatePage', '1')
                }

              });
            }
          })
        }
      })
    }
  },

data:

item: {
    appid: "123456",
    image: "http://xxxx.com/xxxx.png",
    username: "1111",
    path: "/pages/index/index"
}

mounted:

this.getWxConfig()