[wx-open-launch-app] 微信开放标签 H5跳转App踩坑

背景

业务需求中，经常有页面会供用户分享到微信
其他用户在微信中打开H5后，点击相应按钮，此时若用户手机中已经安装了App，则直接唤起App并自动跳转到对应页面

这里就需要接入微信开放标签中的 <wx-open-launch-app> 标签，以向客户端传递 extinfo 来指定对应页面

使用步骤见官方文档：开放标签说明文档，在此不赘述

但是文档除了接入步骤外，相关注意事项的信息量十分微薄，此中坑位就由我一一道来
（都是一些小注意点，但是遇到了可能会花费些时间才能找到原因）

wx.config

首先与使用 JS-SDK 一致，需要先引入 jweixin.js，后通过 wx.config 进行配置与申请

这里的一个注意点是，即使只需要引入开放标签而不需要使用任何 JsApi，也需要至少向 jsApiList 传递一项，不能为空数组，如

wx.config({
    ...
    jsApiList: ['onMenuShareWeibo'],
    openTagList: ['wx-open-launch-app']
})

否则会导致iOS配置的没问题，但安卓始终无法配置成功，触发 wx.error
（最坑的是在开发者工具上是没有问题的，真机验证时才会发现，而且 error 输出的内容也不相干）

标签引用

官方文档中的引用示例如下

<wx-open-launch-app xx='xx'>
    <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">App内查看</button>
    </template>
</wx-open-launch-app>

然而在 React 中不能使用 <template> 标签（React 会将小写字母开头的标签视为原生的 html 标签），因此需要改用微信提供的 <script type='text/wxtag-template'>

并且 <style> 中的样式需要以字符串形式编写，或直接在 button 上写行内样式

所以准确的示例应该如下

// @ts-ignore
<wx-open-launch-app xx='xx'>
  <script type='text/wxtag-template'>
    <style>{'.btn { padding: 12px }'}</style>
    <button class='btn' style={{ ... }}>App内查看</button>
  </script>
{/* @ts-ignore */}
</wx-open-launch-app>

样式编写

外部样式无法影响到标签内元素的样式
（猜测是包裹着元素的 <script> 对外部样式进行了隔离）

编写单位时不能使用 vw、vh，因此需要 getPx 转化

<wx-open-launch-app> 的父元素不能是 flex 布局，否则会被挤到宽度近乎为0

标签属性

appid

appid 是在微信公众平台中配置的关联应用的 appId（注意不是公众号的 appId）

当碰上 "launch:fail_check fail" 报错时，应该检查的可能性有两个

• 上述的 appId 是否准确
• wx.config 中的 appId 配置的公众号Id是否准确（业务有两个公众号，默认使用的是公众号A，而当时后台却配在公众号B，因此也被这个报错消磨了半天）

extinfo

extinfo 里放的是最重要的，即要给到客户端的需跳转到的对应路径信息

其格式是字符串，因此如果约定的数据是对象，不要忘了先 JSON.stringify 下，给到客户端自行解析

错误信息获取

文档中写着 error 事件的返回值是 { errMsg: string }，但实际上应该是 { detail: string }，即

btn.addEventListener('error', function (e) {
  console.log('fail', e.detail);
});

兜底处理

唤起失败

用户手机中可能未装有对应 App，及其他不会成功唤起 App 的情况

因此需要在 wx.error 和 <wx-open-launch-app> 绑定的 error 事件中都进行兜底处理，如调起原有的跳转到 AppStore / 应用宝等的流程
（wx.error 是针对微信版本、系统版本过低导致的配置失败的处理，开放标签的 error 则是针对应用尚未安装的处理）

初始化未完成

在微信开放标签初始化完成之前（一般在1s内），按钮是不会显示的（只显示为一个小白圆圈?）

因此可以写多一个 loading 状态的按钮展示，在开放标签的 ready 事件触发之后再进行替换