微信開放標簽是微信公眾平臺面向網頁開發者提供的擴展標簽集合，可以在網頁上提供跳轉小程序、打開 App 等能力。本文梳理使用微信開放標簽跳轉小程序的過程，以備日后查閱。

參考鏈接

1. 開放標簽說明文檔

準備已認證的服務號

開放標簽只能綁定已認證的服務號，只能在微信真機上測試。因此以下都是不行：

• 不能使用測試服務號
• 不能是普通公眾號，只能是服務號
• 不能使用微信開發者工具

開放標簽可以跳轉任何合法小程序，因此準備任意一個已認證的服務號都可以，不必是小程序綁定的那個服務號。

綁定 js 安全域名

登錄服務號后臺，在「公眾號設置 - 功能設置 - JS接口安全域名」里添加安全域名，需要注意一個服務號只能設置 5 個安全域名，一個月只能修改 5 次，因此盡量想好以后再去設置。

保存之前需要下載校驗文件，并上傳到域名的根目錄：

配置域名注意以下事項：

域名要公網能夠訪問，因為保存時要微信要去訪問校驗文件

只配置域名，不要帶 http://，不要帶端口號

域名要通過 ICP 備案，所以像 .local 是不行的

域名的端口微信強制 http 使用 80，https 使用 443，在開發時要注意

初始化微信 js sdk

界面引入?//res.wx.qq.com/open/js/jweixin-1.6.0.js，然后調用 config 接口注入配置信息。簽名下一小節再講

wx.config({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印appId: '', // 必填，服務號的唯一標識timestamp: '', // 必填，生成簽名的時間戳nonceStr: '', // 必填，生成簽名的隨機串，長度 16 個字符串signature: '',// 必填，簽名jsApiList: [], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標簽列表 });

需要注意：

• sdk 版本需要再 1.6.0 以上

• nonceStr 是使用駝峰命名的，不要拼錯了

生成簽名

生成簽名一般是由后端提供接口，這里主要說一下容易出現問題的地方

• 由于歷史原因，jsapi_ticket 有 jsapi 和 wx_card 兩種，wx_card用于微信卡券，其他情況都用 jsapi，后端生成時不要生成錯了

• 可以通過工具驗證簽名是成功的

• 如果使用的是 get 方法來請求生成簽名接口，要注意參數要用?encodeURIComponent 進行編碼。使用 Post 方法則不需要考慮

• 生成簽名的 url 是不帶 # 后面的部分的?

使用開放標簽進行跳轉

可以把?wx-open-launch-weap 標簽做成一個透明的蒙層蓋在按鈕上面，注意標簽內部的標簽要設置 width/height，并且單位要用 px

const tagStyle = {width: '100%', height: '100%', position: 'absolute', left: 0, top: 0, zIndex: 1, backgroundColor: 'transparent', overflow: 'hidden'} const tagButtonStyle = {width: '160px', height: '64px', display: 'block', border: 'none', backgroundColor: 'transparent'}return (<button style={style} className='open-minapp'>{children}<wx-open-launch-weapp style={tagStyle} username={username} path={path} envVersion={envVersion} extraData={extraData} ><script type="text/wxtag-template"><button style={tagButtonStyle}></button></script></wx-open-launch-weapp></button>)

總結

以上是生活随笔為你收集整理的H5 使用微信开放标签跳转小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。