專業(yè)的短鏈接生成工具
鏈接域名
短網(wǎng)址有效期
h5頁面跳轉小程序指定頁面
更新時間：2025-4-3 18:42:07 作者：愛短鏈
實現(xiàn)從H5頁面跳轉至微信小程序的指定頁面，可以通過微信提供的URL Link或JSSDK開放標簽兩種方式。以下是具體步驟和示例：
方法一：使用URL Link
1. 配置小程序URL Link
- 登錄小程序后臺：進入https://mp.weixin.qq.com/，在「開發(fā)」-「開發(fā)設置」中找到「生成URL Link」入口。
-
填寫參數(shù)：
- 頁面路徑：填寫要跳轉的小程序頁面路徑（如pages/index/index）。
- 參數(shù)：可選，用于傳遞數(shù)據(jù)到小程序頁面。
- 生成URL Link：點擊生成后，復制鏈接（格式如https://wxaurl.cn/xxxxxx）。
2. 在H5頁面中構建跳轉鏈接
-
HTML跳轉：
html復制代碼
<a >跳轉到小程序指定頁面</a> -
JavaScript跳轉：
javascript復制代碼
window.location.;
方法二：使用JSSDK開放標簽（推薦）
1. 引入JSSDK腳本
在H5頁面中引入微信JSSDK：
html復制代碼
| <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> |
2. 配置JSSDK參數(shù)
通過服務端獲取簽名（需后端配合），前端配置：
javascript復制代碼
| wx.config({ | |
| debug: false, // 調試模式 | |
| appId: '你的小程序AppID', | |
| timestamp: '時間戳', | |
| nonceStr: '隨機字符串', | |
| signature: '簽名', | |
| jsApiList: ['navigateToMiniProgram'] // 必填 | |
| }); |
3. 使用開放標簽跳轉
html復制代碼
| <wx-open-launch-weapp | |
| username="gh_小程序原始ID" | |
| path="pages/index/index?參數(shù)=值" | |
| > | |
| <template> | |
| <button>打開小程序</button> | |
| </template> | |
| </wx-open-launch-weapp> |
4. 處理跳轉邏輯
javascript復制代碼
| wx.ready(() => { | |
| const btn = document.querySelector('wx-open-launch-weapp'); | |
| btn.addEventListener('launch', (e) => { | |
| console.log('跳轉成功', e.detail); | |
| }); | |
| btn.addEventListener('error', (e) => { | |
| console.error('跳轉失敗', e.detail); | |
| }); | |
| }); |
注意事項
- 域名備案：H5頁面需備案，且在小程序后臺的「開發(fā)設置」-「業(yè)務域名」中添加。
- 微信環(huán)境：跳轉必須在微信內置瀏覽器中觸發(fā)。
- 參數(shù)傳遞：通過URL Link或path參數(shù)傳遞數(shù)據(jù)，小程序頁面需在onLoad中解析。
- 有效期限制：URL Link最長有效期為30天，需定期更新。
完整示例代碼
html復制代碼
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>H5跳轉小程序</title> | |
| <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> | |
| </head> | |
| <body> | |
| <wx-open-launch-weapp | |
| username="gh_123456789abc" | |
| path="pages/detail/detail?id=123" | |
| > | |
| <template> | |
| <button style="padding: 10px 20px;">打開小程序詳情頁</button> | |
| </template> | |
| </wx-open-launch-weapp> | |
| <script> | |
| // 從服務端獲取簽名配置 | |
| wx.config({ | |
| debug: false, | |
| appId: 'wx123456789abcdefg', | |
| timestamp: '1679731200', | |
| nonceStr: 'random_str', | |
| signature: 'generated_signature', | |
| jsApiList: ['navigateToMiniProgram'] | |
| }); | |
| wx.ready(() => { | |
| const btn = document.querySelector('wx-open-launch-weapp'); | |
| btn.addEventListener('launch', (e) => { | |
| console.log('跳轉成功', e.detail); | |
| }); | |
| btn.addEventListener('error', (e) => { | |
| console.error('跳轉失敗', e.detail); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
服務端獲取簽名（示例）
需后端實現(xiàn)，以Node.js為例：
javascript復制代碼
| const crypto = require('crypto'); | |
| function getSignature(jsapiTicket, url) { | |
| const string = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${url}`; | |
| return crypto.createHash('sha1').update(string).digest('hex'); | |
| } | |
| // 獲取jsapi_ticket（需緩存） | |
| // 生成隨機字符串nonceStr和當前時間戳timestamp | |
| // 調用getSignature并返回給前端 |
通過以上步驟，即可實現(xiàn)H5頁面無縫跳轉至小程序的指定頁面。
