记 wx-open-launch-app 的一次开发实践
背景:
App分享到微信的卡片通常是些简单的活动引流引导页,其最终还是引导你打开App拓客。通常做法是分享的H5页会有打开App的按钮,点击会在右上角提示你在浏览器打开,然后在浏览器打开你的App。这种做法繁琐可能会让游客失去打开或者下载App的耐心,达不到理想的拓客效果。微信jsSdk在1.6以后引入了wx-open-launch-app
的标签,让公众号H5页可以直接打开App,方便有效。
开发流程
1. 引入jssdk并配置wx.config
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
wx.config({
appId,
nonceStr,
signature,
timestamp,
jsApiList,
openTagList: ['wx-open-launch-app'] // 引入标签
})
2. html中使用开放标签
<wx-open-launch-app
id="launch-btn"
appid="要打开的App的appid,非公众号的appid"
extinfo="要传递给App的信息字符串">
<script type="text/wxtag-template">
<button class="btn">打开App</button>
</script>
</wx-open-launch-app>
<script>
var btn = document.getElementById('launch-btn');
// 监听标签ready事件,在这之后可以点击打开App
btn.addEventListener('ready', function (e) {
console.log('ready');
});
// 监听标签launch事件,打开App成功
btn.addEventListener('launch', function (e) {
console.log('success');
});
// 监听标签error事件,打开App失败,回调函数参数的detail为失败信息
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
3. 开发过程的坑
-
标签不展示
- wx.config失败,可以在wx.error中查看失败原因
- 微信公众号配置的js安全域名有误,并非当前页面的域名
-
标签点击报错: launch:fail
- 未安装目标App
- 只能由App分享的卡片进入页面或者微信扫码进入,从卡片地址拷出来的url进入也不行!(通常调试阶段都是手动输入url地址,由微信点击进去,这方法不可取)
-
标签点击报错: launch:fail_check fail
wx-open-launch-app
的appid
属性不对,并非公众号接口信息中绑定的移动应用的appid
- 移动应用绑定的域名在微信公众号js安全域名列表中,但移动应用绑定的域名已经被其他移动应用绑定过!(譬如移动应用绑定的域名为
pingan.com.cn
,你的网页域名为lifeapp.pingcn.com.cn
。pingcn.com.cn
虽然在公众js安全域名列表中,但它很有可能已经被其他移动应用绑定,所以应该绑定移动应域名为更加精确的lifeapp.pingan.com.cn
。ps: 移动应用域名每月仅有3次修改机会,务必谨慎操作)