首页html 使用 wx-open-launch-weapp 跳转小程序

html 使用 wx-open-launch-weapp 跳转小程序

时间: 2024-01-20 20:02:38 浏览: 146

HTML5跳转小程序wx-open-launch-weapp的示例代码

4星 · 用户满意度95%

注意事项微信开放标签有最低的微信版本要求，以及最低的系统版本要求。微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。绑定域名微信安全域名只能修改绑定3次/每月登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。引入JS文件在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweix

使用 wx-open-launch-weapp 标签可以在HTML页面中实现跳转小程序的功能。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>跳转小程序示例</title> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> </head> <body> <wx-open-launch-weapp id="launch-btn" username="gh_1234567890ab" path="/pages/index/index" extinfo="{}" bindlaunch="onLaunchApp" binderror="onError" > <button>跳转小程序</button> </wx-open-launch-weapp> <script> wx.ready(function() { document.getElementById('launch-btn').addEventListener('click', function() { wx.openBusinessView({ businessType: 17, extraData: { appId: 'wx1234567890ab', path: '/pages/index/index', envVersion: 'release' }, success: function(res) { console.log('跳转小程序成功'); }, fail: function(res) { console.log('跳转小程序失败'); } }); }); }); </script> </body> </html> ``` 在上述代码中，我们引入了微信提供的 JavaScript SDK，并在页面中添加了一个 wx-open-launch-weapp 标签。通过设置标签的属性，可以指定要跳转的小程序的用户名、路径和额外信息。当用户点击按钮时，会触发绑定的 onLaunchApp 事件，然后调用 wx.openBusinessView 方法实现跳转小程序的功能。注意：在实际使用中，需要将示例代码中的用户名、路径、AppID等信息替换为实际的值。

阅读全文