vue.js h5跳转app

<wx-open-launch-app id="launch-btn" appid="xxxx" extinfo="要传递的数据" v-if="iosApp">
            <script type="text/wxtag-template">
              <style>.openbtn{ width: 490px; height: 78px; text-align: center; line-height: 78px; background-size: 100% 100%; background-repeat: no-repeat; position: relative; font-size: 30px; font-weight: bold; color: #ffffff; letter-spacing: 1px; margin: 68px auto 0; }.openbtn-img{ position: absolute; top: 0; left: 0; z-index: -1;}</style>
              <div class="openbtn">
                {{ info.status == 3 ? "立即参与" : "更多热门好局" }}
                <img :src="resource.button" alt="" class="openbtn-img" />
              </div>
            </script>
</wx-open-launch-app>

上面是vue2写法

这里是vue3写法

<wx-open-launch-app id="launch-btn" appid="xxx" extinfo="需要传递数据" v-if="iosApp">
            <div v-is="'script'" type="text/wxtag-template" >
              <div v-is="'style'">.openbtn{ width: 490px; height: 78px; text-align: center; line-height: 78px; background-size: 100% 100%; background-repeat: no-repeat; position: relative; font-size: 30px; font-weight: bold; color: #ffffff; letter-spacing: 1px; margin: 68px auto 0; }.openbtn-img{ position: absolute; top: 0; left: 0; z-index: -1;}</div>
              <div class="openbtn">
                {{ info.status == 3 ? "立即参与" : "更多热门好局" }}
                <img :src="resource.button" alt="" class="openbtn-img" />
              </div>
            </div>
</wx-open-launch-app>

引入、下载（npm install weixin-js-sdk -S）

import wx from "weixin-js-sdk";

在js 需要找后端调用接口拿appid和签名

const appidRes = await getAppid({ url: window.location.href });
      if (appidRes.data && appidRes.data.data) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appidRes.data.data.appId, // 必填，公众号的唯一标识
          timestamp: appidRes.data.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: appidRes.data.data.nonceStr, // 必填，生成签名的随机串
          signature: appidRes.data.data.signature, // 必填，签名
          jsApiList: [], // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-launch-app"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
        wx.ready(() => {
          //需在用户可能点击分享按钮前就先调用
          var btn = document.getElementById("launch-btn");
          console.log(btn);
          btn.addEventListener("launch", function (e) {
            console.log("success");
          });
          btn.addEventListener("error", function (e) {
            console.log("fail", e.detail);
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
              window.location.href = "下载路径";
            } else if (navigator.userAgent.match(/android/i)) {
            }
          });
        });
      }

判断是否是微信 

isWeixin() {
      return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
},