最近收到一個需求：用戶可以通過指定鏈接或二維碼進入微信小程序，指定鏈接進入的微信小程序與正常微信小程序進入的有一些區別。
實現需求的想法：用h5頁面跳轉微信小程序，使用微信開放標簽<wx-open-launch-weapp>。（后來 鐵 和我說其實微信ju hua🌻碼也可以實現這樣子的效果😥）
期間遇到的問題：1、按照官網文檔步驟下來后發現按鈕無法顯示；
2、按鈕顯示后，無法跳轉微信小程序。
出現問題的原因：1、官方文檔中說的一些內容沒有搞清楚；
2、自己是個前端小小白菜什么專業術語都不懂，被后台唬~~過去。
解決問題：1、咱們先來看看微信的官方文檔怎么說（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html），嗯嗯~
首先，與咱們的微信版本和手機版本有關系，標准如下，如果這個沒有符合要求，就先升級一下吧。
-
-
- 微信版本要求為：7.0.12及以上
- 系統版本要求為：iOS 10.3及以上、Android 5.0及以上
-
2、按照文檔的要求，在與微信小程序綁定的微信公眾號里面去設置好“JS接口安全域名”，同時也加好“IP白名單”。
這里需要注意的點是：a、與微信小程序綁定的微信公眾號必須為已認證的服務號，服務號與訂閱號最快的辨別方式是，服務號是直接出現在微信聊天窗口的（就像是我和爸爸的聊天一樣），訂閱號是由微信里面的一個訂閱號進去里面有很多很多的微信公眾號。這里官方有提供一個“接口測試號申請”（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login），這里的測試號是訂閱號，也是導致我后面按鈕沒有出現的原因之一。
b、“JS接口安全域名”和“IP白名單”，這個讓專門管理微信公眾號的同仁幫忙設置，安全域名例如：home.cnblogs.com，而不是https://home.cnblogs.com/u/jiangdanan/；IP白名單為后台請求的ip，這里必須加上，如果不加則無法請求接口，微信小程序中可以不加。
3、在h5頁面中通過config接口注入權限驗證配置並申請所需開放標簽，這有一個點后台唬我，說是“timestamp”，“nonceStr”，“signature”讓我自己去請求接口都一樣的，這里一定要后台請求接口返回給自己，我忘了配置了IP白名單，就前台自己請求，就請求不到access_token等，我這里是等了服務端然后通過接口去請求，然后自己手動生成的簽名測試的。權限簽名算法可查看官網文檔（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62），如果和我一樣是自己去手動請求要生成簽名可以使用這個“微信JS接口簽名校驗工具”（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign），輸入“時間戳”，“通過接口獲得到的jsapi_ticket”，“隨機字符串”，“需要跳轉的鏈接”，就可以生成簽名。
<script>
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '這里填與微信小程序綁定的微信公眾號的appid', // 必填，公眾號的唯一標識
timestamp: '', // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '', // 必填，簽名
jsApiList: ['openLocation'], // 必填，需要使用的JS接口列表，這里為必填內容，如果沒有要使用的JS接口列表可以隨便挑選一個寫上去，不然對后續有問題（）
openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']，是打開微信小程序就使用['wx-open-launch-weapp']
});
wx.ready(function() {
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});
wx.error(function(res) {
console.log(res)
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});
</script>
4、這里可以直接將官方的例子拿過來使用了，具體樣式可以后續根據要求改變。
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx（這里是微信小程序的原始id）" path="pages/home/index?user=123&action=abc（要跳轉的小程序路徑可以加參數）"> <template> <style>.btn { padding: 12px }</style> <button class="btn">打開小程序</button> </template> </wx-open-launch-weapp> <script> var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); </script>
5、這樣子就可以出現“打開小程序”的按鈕了，不過我最后還是沒有能打開微信小程序，因為還沒有發布，當正式發布后，就可以正常打開了，以及后續工作任務啦~(雖然我還沒有看到正式發布后的效果🐷)
最后：謝 鐵 對我的指導和幫助~(ง •_•)ง