之前微信瀏覽器內想要直接喚醒 app 要麼接微信的應用寶要麼你是騰訊的乾兒子。
而在微信在2020年5月分推出了「微信開放標籤」功能
wx-open-launch-app 用於微信瀏覽器內直接喚醒 app ，也可經過攜帶參數直接進入app相應的內頁。
如今不是乾兒子，只要按照規定接入微信SDK就直接能夠使用此功能。
1、適用環境
微信版本要求爲：7.0.12及以上。 系統版本要求爲：iOS 10.3及以上、Android 5.0及以上
2、接入微信JS-SDK
按微信JS-SDK要求綁定安全域，並經過config接口注入權限驗證配置
wx.config({ appId: '', debug: true, timestamp: '', nonceStr: '', signature: '', jsApiList: [ 'onMenuShareTimeline', // 分享給好友 'onMenuShareAppMessage', // 分享到朋友圈 ], openTagList: ['wx-open-launch-app’] // 獲取開放標籤權限 });
須要注意的點：
三、wx.config 內列出使用到的 openTagList
在微信開發者工具內打開你的網頁測試若是顯示
{errMsg: "config:ok」}
說明你已經接入JS-SDK成功了css
遺憾的是截至2020年7月13號爲止，微信開發者工具仍是沒法支持微信開放標籤的調試功能，只能在手機上調試而且是在加了微信安全域名的服務器環境下調試，着實麻煩html
3、在 VUE 項目內使用 wx-open-launch-app
因爲 wx-open-launch-app 這個標籤在VUE項目編譯時識別不了會報錯，得在main.js文件內加上忽略報錯的代碼
// 忽略自定義元素標籤拋出的報錯 Vue.config.ignoredElements = [ 'wx-open-launch-app', ]; new Vue({ el: '#app', template: '<app/>', components: { app } })
wx-open-launch-app 標籤組件ios
<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>
注意
一、標籤內的本來的 <template> slot 須要替換成 <
script type="text/wxtag-template」>
二、通過測試發現標籤內定義的樣式真的很尷尬，且不受控制，因此咱們直接將標籤用 CSS 絕對定位並設透明度爲 opacity: 0, 蓋在了咱們本來的設計圖上
三、透明度爲 opacity: 0 的標籤 <script type="text/wxtag-template">
不能爲空，不然寬高會被解析爲0，也就是按鈕根本點擊不到
四、標籤內 appid 填寫的是
微信公衆號內填寫的大家 app 的 appid
五、extinfo 內填的是傳遞給喚起 app 的數據，而咱們發現微信7.0.15版本在ios上，有機率會接收數據失敗，不知道是微信的問題仍是咱們IOS的寫法問題
六、在 VUE 的 mounted 生命週期回調函數內偵聽開放標籤的回調事件
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.0.12 開放標籤是沒法使用的，因此最好在開放標籤外套一層 DIV 用於點擊事件，在事件中斷段微信版本號若是低於，則降級到應用寶之類的方案git
<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){ // 不支持標籤降級處理 } }
4、最後固然是封裝成項目中的一個組件github
<template> <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>
5、參考微信官方連接
接入指南
微信內網頁跳轉 app 功能
JS-SDK使用步驟
開放標籤說明文檔
注：轉載請註明出處博客園：sheldon(willian12345@126.com)瀏覽器
https://github.com/willian12345安全