记 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. 开发过程的坑

• 标签不展示

  1. wx.config失败，可以在wx.error中查看失败原因
  2. 微信公众号配置的js安全域名有误，并非当前页面的域名

• 标签点击报错: launch:fail

  1. 未安装目标App
  2. 只能由App分享的卡片进入页面或者微信扫码进入，从卡片地址拷出来的url进入也不行！(通常调试阶段都是手动输入url地址，由微信点击进去，这方法不可取)

• 标签点击报错: launch:fail_check fail

  1. wx-open-launch-app的appid属性不对,并非公众号接口信息中绑定的移动应用的appid
  2. 移动应用绑定的域名在微信公众号js安全域名列表中，但移动应用绑定的域名已经被其他移动应用绑定过！(譬如移动应用绑定的域名为pingan.com.cn,你的网页域名为lifeapp.pingcn.com.cn。pingcn.com.cn虽然在公众js安全域名列表中，但它很有可能已经被其他移动应用绑定，所以应该绑定移动应域名为更加精确的lifeapp.pingan.com.cn。ps: 移动应用域名每月仅有3次修改机会，务必谨慎操作)