微信环境下h5与小程序跳转app的陷阱

2022年微信环境下h5与小程序跳转app的方案整合

近日小编有遇到微信环境需要跳转到app的问题，于是安排底下前端同事整理一下现阶段微信跳转app的场景和方案（h5和小程序两种）。见下文

微信开放标签--方案一（需要原生接入微信sdk）

<wx-open-launch-app

appid="appid"

extinfo="extinfo"

>

</wx-open-launch-app>

appid:所需要跳转应用的AppID

extinfo:跳转所需额外的信息

开发流程具体如下：

1. 开放标签跳转App，App必须要接入微信OpenSDK

1. Ios接入文档关于openSDK1.8.6及以上版本的更新说明 | 微信开放文档

2. Android接入文档关于openSDK6.8.0的更新说明 | 微信开放文档

1. 提供认证的服务号和开放平台账号（需隶属于同一主体）

2. 微信开放平台绑定所需跳转App的信息

首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App，绑定信息示例如下：

（注：开放标签外部需要一个容器包裹，给容器标签样式，小程序内置h5时，开放标签会失效，不能唤醒app）

h5开发流程：

（注：跳转应用商店需开微信是否支持，不支持可至中间页下载）

传统URL scheme和Universal Link--方案二（目前微信已屏蔽）

URL Scheme

完整链接：[scheme:][//authority][path][?query][#fragment]

Scheme：应用app协议标识及路径，参数

Universal Link

苹果在ios9以后版本引入底层原理，可通过http链接打开app，如打不开则跳转失败页面

Universal Link存在的问题：

1. 在 ios 上会有确认弹窗提示用户是否打开，对于用户来说唤端，多出了一步操作。若用户未安装 APP ，也会有一个提示窗，告知我们 “打不开该网页，因为网址无效”

2. 传统 Scheme 跳转无法得知唤端是否成功，Universal Link 唤端失败可以直接打开此链接对应的页面

3. Scheme 在微信、微博、QQ浏览器、手百中都已经被禁止使用，使用 Universal Link 可以避开它们的屏蔽（目前微信和QQ浏览器已经禁止了 Universal Link，其他主流APP未发现有禁止 ）

调用媒介跳转方式

URL Scheme方式一般使用iframe的方式唤端

Universal Link 方式一般使用location的方式唤端

使用小程序跳转app--方案三（需要特定条件）

小程序跳转app的前置条件是（场景值为1069：移动应用），当场景值满足时，具有返回app和打开app的能力，即：app需要先激活小程序后，才能使小程序具有打开app和返回app的能力

开始前准备：

1.微信开放需配置关联的移动应用

2.小程序后台配置需要关联需要调试的移动应用

3.原生开发需配置sample的证书和bundle id（小程序提供原始id和页面路径供原生跳转）

小程序开发流程:

小程序内部判断来源值（scene），判断是否可以唤醒/打开app

h5中间页中转--方案四

如上面方案不满足客户需求，另有中转方案，微信内直接唤起app跳转至中间页面，然后通过内置浏览器唤醒app，具体如下：

1. 微信h5活动页面，点击页面内打开app按钮；

2. 跳转至中间页面并缓存参数，提示用户使用内置浏览器打开；

3. 使用落地页解析参数执行唤醒app操作，若无app执行下载操作；