前言： 最近公司有一个这样的需要，需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的，今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转了 …
前言：
最近公司有一个这样的需要，需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的，今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转了，下面就简单描述一下对接的流程。 微信公众号详细对接文档：
公众号关联小程序：
1、进入公众号后台，路径：广告与服务——小程序—小程序管理—添加
2、关联小程序—管理员微信扫码确认
3、搜索小程序名称或APPID绑定
4、绑定成功等待小程序管理者同意
查看小程序原始id：
找到关联成功的小程序，鼠标放入其中找到详情查看小程序原始id
绑定JS接口安全域名：
微信JS-SDK的使用步骤，配置信息生成详细说明（.NET版）：跳转标签、前提条件和属性说明：跳转小程序：wx-open-launch-weapp用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。 开放对象
错误提示若跳转时出现以下页面，表示网页绑定的服务号或小程序无权限，请检查是否符合上述开放对象条件。
属性
代码实现：
 <html>
<head>
<title>H5打开小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
</head>
<body>
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!--js代码-->
<script type="text/javascript">
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
wx.ready(function () {
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == 'wxwork'
var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
if (isWeixin) {
wx.config({
//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: 'ccccxxxx4354353453', // 必填，公众号的唯一标识
timestamp: 0123456, // 必填，生成签名的时间戳
nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
signature: 'signature', // 必填，填任意非空字符串即可
jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填，随意一个接口即可
openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})
}
else {
alert("请在微信中打开");
}
})
</script>
</body>
</html>
作者：追逐时光者 作者简介：一个热爱编程，善于分享，喜欢学习、探索、尝试新事物，新技术的程序猿。 |
阿九源码 » 微信公众号开发之H5页面跳转到指定的小程序
