html 使用 wx-open-launch-weapp 跳转小程序
时间: 2024-01-20 20:02:38 浏览: 146
HTML5跳转小程序wx-open-launch-weapp的示例代码
4星 · 用户满意度95%
使用 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等信息替换为实际的值。
阅读全文