一、介紹
微信開放標(biāo)簽地址
微信 JS 接口簽名校驗(yàn)工具
參考網(wǎng)址
1 該標(biāo)簽做什么用的龟梦？
在微信內(nèi)置瀏覽器端打開App法精，簡(jiǎn)單說就是在微信端打開某網(wǎng)頁聪廉，可以在網(wǎng)頁中打開App;
- 注：打開的網(wǎng)頁不能是通過鏈接進(jìn)入萧诫，而是通過分享的卡片等形式扮饶。
2 需求
需求是：通過App分享到微信的卡片夺巩，用戶打開后贞让，可以點(diǎn)擊網(wǎng)頁中的某個(gè)按鈕，如果App存在柳譬，則打開該App喳张，并進(jìn)入指定的頁面。App不存在美澳，則進(jìn)入應(yīng)用市場(chǎng)的下載頁面销部；
3 前期準(zhǔn)備
首先本人通過創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁面，App分享到微信端制跟。
配置相關(guān)：
- 服務(wù)號(hào)需要認(rèn)證舅桩！且服務(wù)號(hào)和移動(dòng)應(yīng)用是同主體，或者有關(guān)聯(lián)關(guān)系雨膨！
- 綁定JS接口安全域名：在微信號(hào)后臺(tái)操作擂涛；綁定的域名是分享到微信端的網(wǎng)頁的域名。
- 在微信開放平臺(tái)的應(yīng)用管理--公眾號(hào)聊记，關(guān)聯(lián)需要跳轉(zhuǎn)的App撒妈。
填寫的信息包含：安全域名恢暖，移動(dòng)應(yīng)用名稱，Appid狰右；具體信息視實(shí)際情況哈杰捂！
以上是開發(fā)前的配置準(zhǔn)備。
- 本人開發(fā)的思路：客戶端頁面在初始化時(shí)請(qǐng)求服務(wù)端中的接口棋蚌，將網(wǎng)頁的url及參數(shù)傳給該接口（之前就因?yàn)榫W(wǎng)址寫死導(dǎo)致一直沒有調(diào)通）嫁佳，服務(wù)端獲取到url進(jìn)行簽名算法，回傳給客戶端簽名附鸽，時(shí)間戳等參數(shù)脱拼，客戶端通過config接口進(jìn)行權(quán)限驗(yàn)證，驗(yàn)證成功后坷备，開放標(biāo)簽便生效熄浓。
二、網(wǎng)頁代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>微信跳轉(zhuǎn)</title>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<div>
<wx-open-launch-app id="launch-btn" appid="wx6d206c87ef5e6785" extinfo="liveOpen">
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">App內(nèi)查看</button>
</script>
</wx-open-launch-app>
</div>
</body>
<script>
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有 api 的返回值會(huì)在客戶端 alert 出來省撑，若要查看傳入的參數(shù)赌蔑，可以在 pc 端打開，參數(shù)信息會(huì)通過 log 打出竟秫，僅在 pc 端時(shí)才會(huì)打印
appId: '', // 必填娃惯，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: '', // 必填，生成簽名的時(shí)間戳image.png
nonceStr: '', // 必填肥败，生成簽名的隨機(jī)串
signature: '', // 必填趾浅，簽名
jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的 JS 接口列表
openTagList: ['wx-open-launch-app'] // 可選馒稍，需要使用的開放標(biāo)簽列表皿哨，例如['wx-open-launch-app']
});
wx.ready(function (sender) {
// alert('成功')
// config信息驗(yàn)證后會(huì)執(zhí)行 ready 方法，所有接口調(diào)用都必須在 config 接口獲得結(jié)果之后纽谒，config是一個(gè)客戶端的異步操作证膨，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在 ready 函數(shù)中調(diào)用來確保正確執(zhí)行鼓黔。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口央勒，則可以直接調(diào)用，不需要放在 ready 函數(shù)中
});
wx.error(function (res) {
// alert('失敗')
// config信息驗(yàn)證失敗會(huì)執(zhí)行 error 函數(shù)澳化，如簽名過期導(dǎo)致驗(yàn)證失敗崔步，具體錯(cuò)誤信息可以打開 config 的debug模式查看，也可以在返回的 res 參數(shù)中查看缎谷，對(duì)于 SPA 可以在這里更新簽名
});
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
// alert(e)
});
btn.addEventListener('error', function (e) {
// alert(e.detail.errMsg)
});
</script>
</html>
- 總結(jié)：在頁面初始化時(shí)刷晋，訪問接口，獲取到的簽名等數(shù)據(jù)。config驗(yàn)證成功后眼虱，開放標(biāo)簽才能展示，如果驗(yàn)證失敗席纽，標(biāo)簽是不會(huì)展示的捏悬。當(dāng)然，如果你去掉了標(biāo)簽中的script腳本润梯，標(biāo)簽都會(huì)顯示的过牙，但這樣做就沒有什么意義了。
三纺铭、注意事項(xiàng)
1 開發(fā)工具調(diào)試：
開發(fā)工具的調(diào)試寇钉，不要在開發(fā)工具中直接操作，這樣即便代碼寫的沒問題也會(huì)報(bào)錯(cuò)舶赔；用手機(jī)掃描該頁面的二維碼進(jìn)行調(diào)試就行扫倡；
2 真機(jī)調(diào)試
在真機(jī)微信端測(cè)試時(shí)，要通過點(diǎn)擊卡片等形式進(jìn)入竟纳，不能直接通過url地址進(jìn)入網(wǎng)頁撵溃，否則也是會(huì)一直報(bào)莫名其妙的錯(cuò)誤的！
3 開放標(biāo)簽的動(dòng)態(tài)隱藏
對(duì)開放標(biāo)簽做v-if或v-show的隱藏要非常注意锥累。因?yàn)殚_放標(biāo)簽和config的驗(yàn)證是同步進(jìn)行的缘挑，不能先config驗(yàn)證是否成功，再判斷是否顯示開放標(biāo)簽桶略，這樣做语淘，即便config驗(yàn)證通過，開放標(biāo)簽頁不能顯示际歼；
4 在vue相關(guān)框架中報(bào)警告
開放標(biāo)簽屬于自定義標(biāo)簽惶翻，Vue會(huì)給予未知標(biāo)簽的警告，可通過配置Vue.config.ignoredElements來忽略Vue對(duì)開放標(biāo)簽的檢查蹬挺。
