引言
H5網(wǎng)頁接入公眾號的 JSSDK 以后終于可以跳轉(zhuǎn)到小程序了，正好項目中有這個需求腊徙，于是就來踩坑了吧秕。
版本要求：
微信版本要求為：7.0.12及以上香璃。 系統(tǒng)版本要求為：iOS 10.3 及以上、Android 5.0 及以上仔燕。
使用步驟
微信開放標簽使用步驟與微信 JS-SDK 類似造垛，也需要引入 JS 文件等步驟。如果是公眾號身份的網(wǎng)頁晰搀，需要綁定安全域名五辽，因我的項目是公眾號，所以需要去綁定域名
一外恕、綁定域名
登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“ JS 接口安全域名”杆逗。
二、引入JS文件
在需要調(diào)用 JS 接口的頁面引入如下 JS 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持 https ）
如需進一步提升服務(wù)穩(wěn)定性鳞疲，當上述資源不可訪問時罪郊，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持 https ）
備注：支持使用 AMD/CMD 標準模塊加載方法加載。
三尚洽、通過 config 接口注入權(quán)限驗證配置并申請所需開放標簽
與使用 JS-SDK 配置方式相同悔橄，所有需要使用開放標簽的頁面必須先注入配置信息，并通過 openTagList 字段申請所需要的開放標簽腺毫，否則將無法使用（同一個 url 僅需調(diào)用一次）癣疟。開放標簽的申請和 JS 接口的申請相互獨立，因此是可以同時申請的潮酒。
這里需要后臺提供一個接口睛挚，返回所需的時間戳，簽名澈灼，隨機串竞川，appId （ appId 可以接口返回店溢，也可以前端根據(jù)分環(huán)境打包去配置）
需要注意的是，signature 此簽名是由 后端通過 jsapi_ticket 委乌、noncestr 床牧、 timestamp 、url ( 當前頁面 location.href ) 來生成的遭贸。 url需要前端傳給后端戈咳。在項目中遇到一個簽名失敗的問題，接口信息返回了簽名等信息壕吹，但是 debug 卻是簽名失敗著蛙，此時要檢查下是不是 token 或者 ticket 過期了。
// 獲取微信配置
getConfig () {
// 這里是接口調(diào)用耳贬，需要傳 url 踏堡，返回所需要的簽名等參數(shù)
const url = window.location.href.split('#')[0]
this.log(url)
const param = {
url: url
}
this.$api.user.getConfigData(param).then(res => {
console.log('config配置', res)
const self = this
if (res.data.code === 200) {
// eslint-disable-next-line no-undef
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)咒劲，可以在pc端打開顷蟆，參數(shù)信息會通過log打出，僅在pc端時才會打印
appId: process.env.appid, // 必填腐魂，公眾號的唯一標識
timestamp: res.data.item.timestamp, // 必填帐偎，生成簽名的時間戳
nonceStr: res.data.item.nonceStr, // 必填，生成簽名的隨機串
signature: res.data.item.signature, // 必填蛔屹，簽名
jsApiList: ['chooseImage'], // 必填削樊，需要使用的JS接口列表，因為是必填項兔毒，這里可以隨意寫一個
openTagList: ['wx-open-launch-weapp'] // 可選漫贞，需要使用的開放標簽列表，這里寫跳轉(zhuǎn)小程序的開放標簽 ['wx-open-launch-weapp']
})
wx.ready(function () {
self.$nextTick(() => {
try {
var btn = document.getElementById('launch-btn')
btn.addEventListener('launch', function (e) {
console.log('success')
console.log(e)
})
btn.addEventListener('error', function (e) {
console.log('fail', e)
})
} catch (error) {
}
})
})
}
})
}
四眼刃、通過 ready 接口處理成功驗證
這個步驟在第三步中已經(jīng)一起寫明了绕辖，可參考第三步
五、通過 error 接口處理失敗驗證
可以通過 error 查看失敗信息
wx.error(function (res) {
// config信息驗證失敗會執(zhí)行error函數(shù)擂红，如簽名過期導致驗證失敗仪际，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看昵骤，對于SPA可以在這里更新簽名
});
六树碱、開放標簽的使用
小程序跳轉(zhuǎn)按鈕：<wx-open-launch-weapp>
用于頁面中提供一個可跳轉(zhuǎn)指定小程序的按鈕。使用此標簽后变秦，用戶需在網(wǎng)頁內(nèi)點擊標簽按鈕方可跳轉(zhuǎn)小程序成榜。
屬性
| 名稱 | 必填 | 備注 |
|---|---|---|
| username | 是 | 所需跳轉(zhuǎn)的小程序原始id，即小程序?qū)?yīng)的以gh_開頭的id |
| path | 否 | 所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑及參數(shù) |
備注：對于path屬性蹦玫，所聲明的頁面路徑必須添加.html后綴赎婚，如pages/home/index.html刘绣。
<wx-open-launch-weapp
id="launch-btn"
:username="val.appid"
:path="val.path"
>
<script type="text/wxtag-template">
<style>
.goodsname {
width: 60px;
height: 25px;
border-radius: 4px;
border: none;
padding: 0;
font-size: 11px;
color: #fff;
background: #59718E;
line-height: 25px;
text-align: center;
}
</style>
<h1 class="goodsname">打開小程序</h1>
</script>
</wx-open-launch-weapp>
這里需要注意的是，官方文檔中使用的是 template 標簽挣输，但是在 vue 項目中會有沖突纬凤，所以這里換成了 <script type="text/wxtag-template"></script>標簽
參考文章：開放標簽說明文檔
公眾號域名配置以及微信授權(quán)，可以參考我之前的文章
微信公眾號開發(fā)（一）準備工作
微信公眾號開發(fā)（二）網(wǎng)頁授權(quán)
