微信瀏覽器內 h5 直接喚醒 app 之 微信開放標籤 wx-open-launch-app
阿新 • • 發佈：2020-07-13
以前微信瀏覽器內想要直接喚醒 app 要麼接微信的應用寶要麼你是騰訊的乾兒子。
而在微信在2020年5月分推出了“微信開放標籤”功能
wx-open-launch-app 用於微信瀏覽器內直接喚醒 app ，也可通過攜帶引數直接進入app相應的內頁。
現在不是乾兒子，只要按照規定接入微信SDK就直接可以使用此功能。
一、適用環境
微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上
二、接入微信JS-SDK
按微信JS-SDK要求繫結安全域，並通過config介面注入許可權驗證配置
wx.config({
appId: '',
timestamp: '',
nonceStr: '',
signature: '',
jsApiList: [
'onMenuShareTimeline', // 分享給好友
'onMenuShareAppMessage', // 分享到朋友圈
],
openTagList: ['wx-open-launch-app’] // 獲取開放標籤許可權
});
需要注意的點：
1、符合開放平臺列出的要求https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html{errMsg: "config:ok”}
說明你已經接入JS-SDK成功了
遺憾的是截至2020年7月13號為止，微信開發者工具還是無法支援微信開放標籤的除錯功能，只能在手機上除錯並且是在加了微信安全域名的伺服器環境下除錯，著實麻煩
三、在 VUE 專案內使用 wx-open-launch-app// 忽略自定義元素標籤丟擲的報錯
Vue.config.ignoredElements = [
'wx-open-launch-app',
]; new Vue({ el: '#app', template: '<app/>', components: { app }
})
wx-open-launch-app 標籤元件
<wx-open-launch-app注意 1、標籤內的原本的 <template> slot 需要替換成 <script type="text/wxtag-template”> 2、經過測試發現標籤內定義的樣式真的很尷尬，且不受控制，所以我們直接將標籤用 CSS 絕對定位並設透明度為 opacity: 0, 蓋在了我們原本的設計圖上 3、透明度為 opacity: 0 的標籤 <script type="text/wxtag-template">不能為空，否則寬高會被解析為0，也就是按鈕根本點選不到 4、標籤內 appid 填寫的是微信公眾號內填寫的你們 app 的 appid 5、extinfo 內填的是傳遞給喚起 app 的資料，而我們發現微信7.0.15版本在ios上，有概率會接收資料失敗，不知道是微信的問題還是我們IOS的寫法問題 6、在 VUE 的 mounted 生命週期回撥函式內偵聽開放標籤的回撥事件
:id="id"
class="launch-btn"
:appid="appId"
:extinfo="extinfoStr"
>
<script type="text/wxtag-template">
<style>.btn {height: 96px;}</style>
<div class="btn">開啟app</div>
</script>
</wx-open-launch-app>
mounted(){
var btn = document.getElementById(this.id)
btn.addEventListener('launch', e => {
// 在此處可設定貼上板內資料，資料是傳遞給 app 的引數進，
console.log('success');
});
btn.addEventListener('error', e => {
// 在此處可設定貼上板內資料，資料是傳遞給 app 的引數進，
console.log('fail', e.detail);
// 喚醒失敗的情況下，可用於降級處理比如在此處跳轉到應用寶
});
}
7、如果微信版本低於7.0.12 開放標籤是無法使用的，所以最好在開放標籤外套一層 DIV 用於點選事件，在事件中斷段微信版本號如果低於，則降級到應用寶之類的方案
<div @click="launch">
<wx-open-launch-app
:id="id"
class="launch-btn"
:appid="appId"
:extinfo="extinfoStr"
>
<script type="text/wxtag-template">
<style>.btn {height: 96px;}</style>
<div class="btn">開啟app</div>
</script>
</wx-open-launch-app>
</div>
launch(){
// 在此處可設定貼上板內資料，資料是傳遞給 app 的引數進
if(!this.enable){
// 不支援標籤降級處理
}
}
四、最後當然是封裝成專案中的一個元件
<template>五、參考微信官方連結 接入指南 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html 微信內網頁跳轉 app 功能 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html JS-SDK使用步驟 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1 開放標籤說明檔案 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
<div @click="launch">
<wx-open-launch-app
:id="id"
class="launch-btn"
:appid="appId"
:extinfo="extinfoStr"
>
<script type="text/wxtag-template">
<style>.btn {height: 96px;}</style>
<div class="btn">開啟app</div>
</script>
</wx-open-launch-app>
</div>
</template>
<script>
import globalConfig from '@assets/js/config'
import { copyToClipboard } from '@assets/js/utils'
import { getWeixinVersion, onBridgeReady } from '@assets/js/weixin/weixin' let idIndex = 0
export default {
name: 'LaunchButton',
props: {
extinfo: {
type: Object,
default: ''
},
},
watch: {
extinfo: {
handler(n){
this.extinfoStr = JSON.stringify(n)
},
immediate: true
}
},
data() {
idIndex++
return {
id: 'wxopenLanchAppId' + idIndex,
appId: globalConfig.WEIXIN_APP_ID,
enable: false,
extinfoStr: '',
}
},
methods: {
redirectToApp(){
setTimeout(()=>{
window.location.href = globalConfig.YING_YONG_BAO
}, 400)
},
setClipboard(){
console.log('start copy')
let copyObject = {
app: 'yogo'
}
for(var k in this.extinfo){
copyObject[k] = this.extinfo[k]
}
copyObject = JSON.stringify(copyObject) copyToClipboard(copyObject)
console.log('end copy')
},
launch(){
this.setClipboard()
if(!this.enable){
this.redirectToApp()
}
}
},
created(){
// 微信版本號大於 7.0.12 開放標籤才可進行 喚醒 app 跳轉
const wxVersion = getWeixinVersion()
if(wxVersion){
let v = wxVersion.split('.')
if(v[0]>=7){
if(v[1]>=0){
if(v[2]>=12){
this.enable = true
}
}
}
}
},
mounted(){
var btn = document.getElementById(this.id)
btn.addEventListener('launch', e => {
this.setClipboard()
console.log('success');
});
btn.addEventListener('error', e => {
console.log('fail', e.detail);
this.setClipboard()
this.redirectToApp()
});
}
}
</script>
<style lang="scss" scoped>
.launch-btn{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
// background: red;
}
</style>
注：轉載請註明出處部落格園：sheldon([email protected])
https://github.com/willian12345