2022年微信环境下h5与小程序跳转app的方案整合
近日小编有遇到微信环境需要跳转到app的问题,于是安排底下前端同事整理一下现阶段微信跳转app的场景和方案(h5和小程序两种)。见下文
微信开放标签--方案一(需要原生接入微信sdk)
<wx-open-launch-app
appid="appid"
extinfo="extinfo"
>
</wx-open-launch-app>
appid:所需要跳转应用的AppID
extinfo:跳转所需额外的信息
开发流程具体如下:
-
开放标签跳转App,App必须要接入微信OpenSDK
-
Ios接入文档关于openSDK1.8.6及以上版本的更新说明 | 微信开放文档
-
Android接入文档关于openSDK6.8.0的更新说明 | 微信开放文档
-
提供认证的服务号和开放平台账号(需隶属于同一主体)
-
微信开放平台绑定所需跳转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存在的问题:
-
在 ios 上会有确认弹窗提示用户是否打开,对于用户来说唤端,多出了一步操作。若用户未安装 APP ,也会有一个提示窗,告知我们 “打不开该网页,因为网址无效”
-
传统 Scheme 跳转无法得知唤端是否成功,Universal Link 唤端失败可以直接打开此链接对应的页面
-
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,具体如下:
-
微信h5活动页面,点击页面内打开app按钮;
-
跳转至中间页面并缓存参数,提示用户使用内置浏览器打开;
-
使用落地页解析参数执行唤醒app操作,若无app执行下载操作;
更多推荐
微信环境下h5与小程序跳转app的陷阱
发布评论