注：只有在微信內(nèi)置瀏覽器才會生效奇昙，開放標(biāo)簽是基于jssdk開發(fā)的钓葫，在其他的瀏覽器就不好使了。
注：在index.html頁面head標(biāo)簽里引入 （必須是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的必須一樣------必填渣玲，公眾號的唯一標(biāo)識
timestamp: timestamp, // 必填器贩，生成簽名的時間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
signature: signature, // 必填蔬胯，簽名
//需要微信權(quán)限列表
jsApiList: [
"onMenuShareAppMessage", // 分享給朋友
"onMenuShareTimeline", // 分享到朋友圈
"onMenuShareQQ", // 分享到QQ
"onMenuShareQZone", // 分享到QQ空間
"checkJsApi" //判斷當(dāng)前客戶端版本是否支持指定JS接口
],
openTagList:['wx-open-launch-weapp'] // 微信開放標(biāo)簽 小程序跳轉(zhuǎn)按鈕：<wx-open-launch-weapp>
});
}
// 動態(tài)生成標(biāo)簽
// info參數(shù)
/*
let params={
eleId:"", // 元素ID
appid:"", // 小程序id號 gh_****
url:"", // 跳轉(zhuǎn)小程序的頁面路徑地址 例: pages/home/home.html - (后面必須帶上.html后綴 否則IOS跳轉(zhuǎn)時出現(xiàn)小程序頁面未配置)
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");// 創(chuàng)建script內(nèi)容插槽 避免template標(biāo)簽沖突
script.type = "text/wxtag-template"; // 使用script插槽 必須定義這個type
script.text = info.content // 自定義的html字符串內(nèi)容
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字符串賦值
// 點擊按鈕 正常跳轉(zhuǎn)觸發(fā)
btn.addEventListener("launch", function (e) {
console.log("success");
});
// 點擊跳轉(zhuǎn) 拋出異常
btn.addEventListener("error", function (e) {
console.log("fail", e.detail);
alert(`跳轉(zhuǎn)異常 - ${e.detail}`)
});
}else{
alert("您的版本號不支持")
}
}
// 判斷是否微信環(huán)境
function is_weixn() {
let ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true
} else {
return false
};
};
// 判斷當(dāng)前微信版本號是否支持
function is_version(){
let client = false; // 當(dāng)前版本號是否支持 (默認(rèn)不支持)
let wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信瀏覽器信息
// 微信版本號 wxInfo[1] = "7.0.18.1740" (示例)
//進(jìn)行split轉(zhuǎn)成數(shù)組進(jìn)行判斷 [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; // 當(dāng)前版本支持
}
}
}
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內(nèi)容
let content = `
<button class="test-btn">點我跳轉(zhuǎn)小程序</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", // 跳轉(zhuǎn)小程序的頁面路徑
content:content // 自定義的html內(nèi)容
};
wx_launch(launchParams);
}
};
</script>
