有时候需要APP需要分享H5链接给用户,用户点击链接检测当前用户是否已经安装APP,如果安装了则打开指定页面。没有安装则跳转下载链接。实现这个需求需要在APP打包上线时设置好 scheme 本地协议,然后访问H5页面时检测本地协议(其实就是在app中将http协议转换为本地协议)
android
第一步 打开uniapp配置文件manifest.json -> 源码视图
把 "schemes": ["hulian"] 添加到 "app-plus"->"distribute"->"android" 保存后提交App云端打包生效
第二步 浏览器中通过href启动应用
安装应用后,我们可以在html页面中,通过href直接调用应用
<a href="hulian://abc?uid=1">hulian:<a><br/>
hulian://就是配置的本地协议 abc就是访问的路径
第三步 接收页面参数
在App.vue的onShow里可以直接获取
onShow: function() {
var args= plus.runtime.arguments;
if(args){
// 处理args参数,如直达到某新页面等
}
}
IOS
第一步 打开uniapp配置文件manifest.json -> 源码视图
把下面代码添加到 manifest.json的"app-plus"->"distribute"->"ios"节点下
"urltypes": [
{
"urlidentifier":"com.xxx.test",
"urlschemes": [
"hulian"
]
}
],
urlidentifier为标识,可自定义,格式为反向域名格式
第二步 浏览器中通过href启动应用
安装应用后,我们可以在html页面中,通过href直接调用应用
<a href="hulian://abc?uid=1">hulian:<a><br/>
hulian://就是配置的本地协议 abc就是访问的路径
第三步 接收页面参数
在App.vue的onShow里可以直接获取
onShow: function() {
var args= plus.runtime.arguments;
if(args){
// 处理args参数,如直达到某新页面等
}
}
HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://",方便开发者调测。
如果是本地(离线)打包,请自行在原生工程中配置
以上介绍了怎么创建该本地协议及调用该本地协议的方法。但这里还有个关键就是怎么判断用户是否安装了该app呢?原理如下:
在手机浏览器中用js代码请求该协议,如果在500ms内,如果有应用程序能解析这个协议,那么就能打开该应用;如果超过500ms就跳转到app下载页。
更多推荐
uniapp 之检测用户是否已经安装APP
发布评论