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

[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> 对外部样式进行了隔离)

编写单位时不能使用 vwvh,因此需要 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内),按钮是不会显示的(只显示为一个小白圆圈👇) image.png

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

分类:
前端
标签: