跨平台应用开发进阶(十六) ：uni-app实现H5页面唤醒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>

三、拓展阅读

• 《Android 设置urlSchemes》
• 《iOS 设置urlSchemes》