好記性不如爛筆頭~
我決定要把 在微信裡 「H5 跳小程序」，「H5跳轉 App」這兩個知識點
做個筆記，也跟大家分享一下。
H5 跳小程序「使用開放標籤 ：」
「開放對象：」
必須是已認證的服務號，服務號綁定「JS接口安全域名」下的網頁可使用此標籤跳轉任意合法合規的小程序。已認證的非個人主體的小程序，使用小程序雲開發的靜態網站託管綁定的域名下的網頁，可以使用此標籤跳轉任意合法合規的小程序。「客戶端要求：」
微信版本要求為：7.0.12及以上。系統版本要求為：iOS 10.3及以上、Android 5.0及以上。
注意：微信開發者工具暫時不支持！所以建議直接使用手機訪問進行測試。
示例「第一步：判斷瀏覽器」
var userAgent = window.navigator.userAgent.toLowerCase();var is_android = /(android)/.test(userAgent);var is_iphone = /(iphone|ios)/.test(userAgent);var is_mobile = is_android || is_iphone;var is_weixin_browser = /micromessenger/.test(userAgent);// 獲取微信的版本號，如：7.0.14let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)
if (wechat) { let judgewechat = wechat[1].split('.')
if (judgewechat[0] >= 7) { if (judgewechat[1] >= 0) { if (judgewechat[2] >= 12) { // 微信版本是 7.0.12及以上 } } }}「第二步：引入微信 JSSDK 並且配置最新 JSSDK」
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必須是1.6版本 -->wx.config({ debug: false, beta: true, appId: data.appid, timestamp: data.timestamp, nonceStr: data.noncestr, signature: data.signature, jsApiList: [''], // 備註：這裡有一個坑，這項不能是 []，會不顯按鈕... openTagList: ['wx-open-launch-weapp']})wx.ready(() => { // 顯示小程序跳轉按鈕})「第三步：示例」
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html?user=123&action=abc"> <template> <style>.btn { padding: 12px }</style> <button>打開小程序</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>其中：
名稱備註username所需跳轉的小程序原始id，即小程序對應的以gh_開頭的idpath所需跳轉的小程序內頁面路徑及參數「備註：對於path屬性，所聲明的頁面路徑必須添加.html後綴，如pages/home/index.html。」
H5跳APP「使用開放標籤」
開發平臺配置前往微信開放平臺的管理中心-公眾帳號或小程序詳情-接口信息-網頁跳轉移動應用-關聯設置中綁定所需要跳轉的App。
**第一步：引入微信 JSSDK **
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必須是1.6版本 -->「第二步：初始化配置」
wx.config({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印appId: '', // 必填，公眾號的唯一標識timestamp: , // 必填，生成籤名的時間戳nonceStr: '', // 必填，生成籤名的隨機串signature: '',// 必填，籤名jsApiList: [], // 必填，需要使用的JS接口列表 必須不是空數組openTagList: ['wx-open-launch-app'] // 可選，需要使用的開放標籤列表，例如['wx-open-launch-app']});「第三步：示例」
<wx-open-launch-app id="launch-btn" appid="your-appid" extinfo="your-extinfo"> <template> <style>.btn { padding: 12px }</style> <button>App內查看</button> </template></wx-open-launch-app><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>其中：
名稱備註appid所需跳轉的AppIDextinfo跳轉所需額外信息好了，今天的分享就到這裡了，咱們下期再見吧，希望可以對你有所幫助。