(更新)短信唤起App/小程序的最佳实践

H5 打开/下载 APP 方法汇总

之前的文章H5 打开-下载 APP 方法汇总介绍了 H5 页面如何友好唤起 APP 的方法。

通过 schema URL 和 universal links 配合可以实现当用户安装 APP 时唤起 APP,未安装时下载 APP 的交互体验。

本文主要是将上述方法结合起来,讨论在用户在短信场景中具体的实现方案。

需求描述

运营下发短信,用户点击短信中的短链后:

  1. 若用户安装了 APP,则直接打开 APP 并打开特定的功能页(可能是原生页面或者是 H5)
  2. 若用户未安装 APP,则跳转到应用市场下载 APP(iOS,安卓则是自动下载安装包)
  3. (其他需求)第 1 步不变,第 2 步修改为若未安装 APP,则打开微信小程序并打开特定的功能页(可能是小程序原生页面或者是 H5)

准备工作

功能落地页面

用户最终在 APP/小程序 打开的页面,以 H5 为例:https://www.wobushi.top/about?from=message,也可以是客户端/小程序的原生页面路径,例如:pages/activity/index?from=message

该页面以下简称 落地页

H5 打开/下载跳转页

用户点击短链后直接打开的 H5 页面,页面承载了打开/下载 APP 的逻辑,通过判断设备当前状态做出不同的跳转行动,可以做成通用页面,当出现一些异常导致无法唤醒 APP/微信时,能够给用户展示一个友好的提示页面,也可以在页面上提供手动选择的按钮。

如果要设计成通用页面,需要将落地页信息携带到该页面的参数中,例如:https://www.wobushi.top/bridge?app_url=https%3A%2F%2Fwww.wobushi.top%2Fabout%3Ffrom%3Dmessage&mp_url=pages%2Factivity%2Findex%3Ffrom%3Dmessage&first=app

参数名 参数含义
app_url 需要在 APP 打开落地页的链接地址,可以是 H5 也可以是 APP 原生页面
mp_url 需要在小程序打开落地页的链接地址,可以是 H5 也可以是小程序原生页面
first 如果上面两个参数同时存在,优先打开 APP 还是小程序

注意:

  1. 参数需要进行 URL 编码,避免跳转后对方无法解析正确的落地页参数
  2. 跳转小程序需要将目标页面路径和参数调用小程序的服务端 API 换取跳转链接,跳转链接只能被一个微信用户点击,需要在页面上每次重新获取
  3. 若不希望小程序原生页面路径暴露,可以先通过微信 API 获取跳转链接,然后将获取到的链接放到 mp_url 参数中去,但注意每个用户必须生成独立的链接

该页面以下简称跳转页

生成短链

直接将跳转页链接放在短信中太长且会影响阅读短信主体内容,需要使用短链服务将跳转页映射成一个较短的链接,例如:https://s.top/qwer

以下简称短链

具体实现

需要在短链域名下配置 universal link,APP 唤醒后,需要主动请求短链拿到跳转页的地址,再通过解析跳转页上面的链接参数获取到落地页地址,最后打开落地页。

注意:获取到的参数需要进行 URL 解码。

schema url

由于 universal link 是 ios 独享,安卓设备下,短链在浏览器中打开后会自动重定向到跳转页

跳转页 JS 需要区分设备类型。

iOS

进入到页面逻辑说明没有命中 universal link,说明用户并没有安装 APP,则可以直接跳转到下载页面。

如果需要打开小程序,可以直接通过小程序 schema 跳转小程序

android

进入页面后直接使用上文的方法通过 schema 唤起 APP,如果 APP 没有被唤醒则自动跳转下载 APP。

注意

不论是 iOS 还是安卓,universal link 和 schema 都有可能存在失效的情况,schema 还有可能被浏览器拦截,所以为了确保被拦截后用户还能有完整的体验,在跳转页上至少需要添加打开和下载的按钮,用户能够点击并再次尝试做出相应的动作。


(更新)短信唤起App/小程序的最佳实践
https://www.wobushi.top/2023/(更新)短信唤起App-小程序的最佳实践/
作者
Pride Su
发布于
2023年5月30日
许可协议