一、前言
应用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）中才能实现以下功能：
注意⚠️：iOS15及以上系统限制每个应用最多只能配置 50 个白名单列表，超过 50 个的白名单会失效，在配置白名单时需要注意以下问题：
白名单配置步骤如下：配置 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>
复制代码
三、拓展阅读
评论