微信开放标签 - wx-open-launch-weapp (vue动态生成)

注：只有在微信内置浏览器才会生效，开放标签是基于jssdk开发的，在其他的浏览器就不好使了。
注：在index.html页面head标签里引入（必须是1.6版本的哦否则不会生效哒）

<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

封装公共文件 common.js

export function init(){
  if (!is_weixn()) {
    return
  }
  wx.config({
      debug: false,
      appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
      timestamp: timestamp, // 必填，生成签名的时间戳
      nonceStr: nonceStr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名
      //需要微信权限列表
      jsApiList: [
        "onMenuShareAppMessage", // 分享给朋友
        "onMenuShareTimeline", // 分享到朋友圈
        "onMenuShareQQ", // 分享到QQ
        "onMenuShareQZone", // 分享到QQ空间
        "checkJsApi" //判断当前客户端版本是否支持指定JS接口
      ],
      openTagList:['wx-open-launch-weapp'] // 微信开放标签 小程序跳转按钮：<wx-open-launch-weapp>
    });
}

// 动态生成标签
// info参数
/* 
let params={
  eleId:"", // 元素ID
  appid:"", // 小程序id号 gh_****
  url:"", // 跳转小程序的页面路径地址 例: pages/home/home.html - (后面必须带上.html后缀 否则IOS跳转时出现小程序页面未配置)
  content:"" // html字符串 例: "<button>点我</button>"
}
*/
export function wx_launch(info){
  if (!is_weixn()) {
    return
  }
  if(is_launch()){
    var btn = document.getElementById(info.eleId); //获取元素
    let script = document.createElement("script");// 创建script内容插槽 避免template标签冲突
    script.type = "text/wxtag-template"; // 使用script插槽 必须定义这个type
    script.text = info.content // 自定义的html字符串内容
    let html = `<wx-open-launch-weapp style="width:100%;display:block;" username="${info.appid}" path="${info.url}">${script.outerHTML}</wx-open-launch-weapp>`;
    btn.innerHTML = html; // html字符串赋值
    // 点击按钮 正常跳转触发
    btn.addEventListener("launch", function (e) {
      console.log("success");
    });
    // 点击跳转 抛出异常
    btn.addEventListener("error", function (e) {
      console.log("fail", e.detail);
      alert(`跳转异常 - ${e.detail}`)
    });
  }else{
    alert("您的版本号不支持")  
  }
}

// 判断是否微信环境
function is_weixn() {
  let ua = navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true
  } else {
    return false
  };
};

// 判断当前微信版本号是否支持
function is_version(){
  let client = false; // 当前版本号是否支持 (默认不支持)
  let wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信浏览器信息
  // 微信版本号 wxInfo[1] = "7.0.18.1740" (示例)
  //进行split转成数组进行判断 [7,0,18,1740] (示例)
  let version = wxInfo[1].split(".");
  // 判断版本在7.0.12及以上的版本
  if (version[0] >= 7) {
    if (version[1] >= 0) {
      if (version[2] >= 12) {
        client = true; // 当前版本支持
      }
    }
  }
  return client;
}

Vue页面 demo.vue

<template>
  <div>
    <div id="launch-btn"></div>
  </div>
</template>
<script>
import { init,wx_launch } from "./common.js"; // 引入公共js文件
export default {
  data() {
    return { };
  },
  created() {
    init() //实例初始化
  },
  mounted() {
    // 自定义html内容
    let content = `
      <button class="test-btn">点我跳转小程序</button>
      <style>
        .test-btn{
          width:100%;
          background: #f24f45;
          border-radius: 20px;
          padding:0 10px;
          color:#fff;
          font-size:16px;
          border:none;
        }
      </style>
      `;
    
    let launchParams = {
      eleId:"launch-btn", // 元素id
      url: "pages/home/home.html", // 跳转小程序的页面路径
      content:content // 自定义的html内容
    };
    wx_launch(launchParams);
  }
};
</script>