文章目录

  • 一、前言
  • 二、实现
  • 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,找到androidios配置节点。

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>