背景
业务需求中，经常有页面会供用户分享到微信
其他用户在微信中打开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 事件触发之后再进行替换