专业的短链接生成工具
链接域名
短网址有效期
h5页面跳转小程序指定页面
更新时间：2025-5-11 11:29:29 作者：爱短链
实现从H5页面跳转至微信小程序的指定页面，可以通过微信提供的URL Link或JSSDK开放标签两种方式。以下是具体步骤和示例：
方法一：使用URL Link
1. 配置小程序URL Link
- 登录小程序后台：进入https://mp.weixin.qq.com/，在「开发」-「开发设置」中找到「生成URL Link」入口。
-
填写参数：
- 页面路径：填写要跳转的小程序页面路径（如pages/index/index）。
- 参数：可选，用于传递数据到小程序页面。
- 生成URL Link：点击生成后，复制链接（格式如https://wxaurl.cn/xxxxxx）。
2. 在H5页面中构建跳转链接
-
HTML跳转：
html复制代码
<a href="https://wxaurl.cn/xxxxxx">跳转到小程序指定页面</a> -
JavaScript跳转：
javascript复制代码
window.location.href = "https://wxaurl.cn/xxxxxx";
方法二：使用JSSDK开放标签（推荐）
1. 引入JSSDK脚本
在H5页面中引入微信JSSDK：
html复制代码
| <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> |
2. 配置JSSDK参数
通过服务端获取签名（需后端配合），前端配置：
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?参数=值" | |
| > | |
| <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页面需备案，且在小程序后台的「开发设置」-「业务域名」中添加。
- 微信环境：跳转必须在微信内置浏览器中触发。
- 参数传递：通过URL Link或path参数传递数据，小程序页面需在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> |
服务端获取签名（示例）
需后端实现，以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并返回给前端 |
通过以上步骤，即可实现H5页面无缝跳转至小程序的指定页面。
