文章目录
- 一、前言
- 二、实现
- 2.1 android schemes配置
- 2.2 iOS schemes配置
- 2.3 H5 跳转 uni-app
- 三、拓展阅读
一、前言
应用uni-app
开发APP过程中,需要由后台短信服务器向某个特定用户发送一条带有链接的短信,用户点击该链接可唤醒app或者通过URL下载app。
实现逻辑如下:
当用户点击链接,首先进入H5页面,然后H5页面判断手机有没有安装app,有的话直接唤醒并打开app,没有的话进入应用市场或者通过指定URL下载。
二、实现
注意📢:苹果手机是直接跳转appStore
打开和下载!不能通过schemes
去打开!
原因是:当苹果手机没有这款app,苹果浏览器(safari浏览器)会显示‘safar浏览器打不开该网页因为网址无效
’的弹出框。
首先配置app,进入manifest.json——源码视图——app-plus——distribute
,找到android
和ios
配置节点。
2.1 android schemes配置
先配置android
,增加一个schemes
,这个安卓就能访问你的app了。
"app-plus": {
"distribute": {
"android": {
"schemes": "test,myuniapp"
//...
},
//...
},
//...
},
//...
2.2 iOS schemes配置
然后配置ios
,在由其他APP跳转uni-app时,ios
配置跟android
不一样,ios
需要配置一个白名单,这样才能唤醒你的app
。在由H5跳转至uni-app时,无需配置白名单。
有关白名单的配置需求如下:
从
iOS9
开始系统安全策略更新,加入对用户隐私以及禁止扫描系统信息的控制,限制了应用对scheme
协议的访问。需要将其它App注册的scheme
添加到应用访问白名单。(LSApplicationQueriesSchemes
)中才能实现以下功能:
- 通过
scheme
检查其它App是否安装,不添加到白名单则检测结果为未安装(即使应用已经安装);- 通过
scheme
协议调用其它App,不添加到白名单则会弹出提示框,用户确认后才能启动应用,添加到白名单列表后则无需用户确认直接启动应用。注意⚠️:
iOS15
及以上系统限制每个应用最多只能配置50个白名单列表,超过50个的白名单会失效,在配置白名单时需要注意以下问题:
- 部分模块使用的三方SDK(如微信登录)需要添加白名单列表,三方SDK添加的白名单优先级高于
manifest.json
中配置的白名单。- uni原生插件可能也会添加白名单列表,uni原生插件添加的白名单优先级高于
manifest.json
中配置的白名单。
白名单配置步骤如下:
配置H5白名单,ios app才能去跳转app,白名单写的是app的urlschemes
。
找到manifest.json
,在 "app-plus"->"distribute"->"ios"
节点的 schemes
属性配置UrlSchemes
,示例如下:
"app-plus": {
"distribute": {
"ios": {
"urltypes": "test,myuniapp"
//...
},
//...
},
//...
},
//...
在manifest.json
文件的"app-plus"->"distribute"->"ios"
下添加urlschemewhitelist
节点数据如下:
"plus": {
"distribute": {
"ios": {
"urlschemewhitelist": "baidumap,iosamap",
//...
},
//...
},
//...
},
//...
2.3 H5 跳转 uni-app
兼容(通用)性处理。
// 兼容
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
/*IE内核*/
presto: u.indexOf('Presto') > -1,
/*opera内核*/
webKit: u.indexOf('AppleWebKit') > -1,
/*苹果、谷歌内核*/
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
/*火狐内核*/
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
/*是否为移动终端*/
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
/*ios终端*/
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
/*android终端或者uc浏览器*/
iPhone: u.indexOf('iPhone') > -1,
/*是否为iPhone或者QQHD浏览器*/
iPad: u.indexOf('iPad') > -1,
/*是否iPad*/
webApp: u.indexOf('Safari') == -1,
/*是否web应该程序,没有头部与底部*/
souyue: u.indexOf('souyue') > -1,
superapp: u.indexOf('superapp') > -1,
weixin: u.toLowerCase().indexOf('micromessenger') > -1,
Safari: u.indexOf('Safari') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
然后去唤醒app,苹果手机直接进入appStore打开和下载
if (browser.versions.ios) {
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=xxxx";
} else if (browser.versions.android) {
window.location.href = "test://";
}
完整代码如下:
<template>
<view class="btnWrap">
<view class="btn" @click="handleBtnDlown">立即下载</view>
</view>
</view>
</template>
<script>
// 兼容
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
/*IE内核*/
presto: u.indexOf('Presto') > -1,
/*opera内核*/
webKit: u.indexOf('AppleWebKit') > -1,
/*苹果、谷歌内核*/
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
/*火狐内核*/
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
/*是否为移动终端*/
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
/*ios终端*/
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
/*android终端或者uc浏览器*/
iPhone: u.indexOf('iPhone') > -1,
/*是否为iPhone或者QQHD浏览器*/
iPad: u.indexOf('iPad') > -1,
/*是否iPad*/
webApp: u.indexOf('Safari') == -1,
/*是否web应该程序,没有头部与底部*/
souyue: u.indexOf('souyue') > -1,
superapp: u.indexOf('superapp') > -1,
weixin: u.toLowerCase().indexOf('micromessenger') > -1,
Safari: u.indexOf('Safari') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
export default {
data() {
return {}
},
onLoad() {
//页面初始化进入app,进不去就说明没安装app,然后可以点击下载去应用市场去下载
if (browser.versions.ios) {
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=xxx";
} else if (browser.versions.android) {
window.location.href = "test://"; //manifest.json配置的schemes
}
},
methods: {
// 下载app
handleBtnDlown() {
if (browser.versions.android) {
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=xxx;
}
}
}
}
</script>