uniapp h5在浏览器唤起app_uniapp visibilitychange

需求

当用户打开h5 链接时候 ，点击打开app, 若用户在已经安装过app的情况下直接打开app，若未安装过跳到应用市场下载安装

这个功能在实现上主要分为两种场景，从普通浏览器唤醒以及从微信唤醒。这两个场景又分为了IOS端和安卓端

配置

安卓
在manifest.json的"app-plus"->“distribute”->"android"节点下添加schemes数据:“schemes” : “nameAPP”

"schemes" :  ["nameAPP"]
1

IOS
在manifest.json的"app-plus"->“distribute”->"ios"节点下添加urltypes数据:

"urltypes": [{
                "urlidentifier": "xxx.xxx", //  一般为域名倒写，例如 taobao.com
                "urlschemes": ["nameAPP"]
   }]，
   "urlschemewhitelist":["nameAPP"]	 //白名单
1
2
3
4
5

注意

下面代码的 nameAPP:// 就是代表着schemes/Universal Link 通用链接，也就是跳到自己app 的快捷链接 如果链接需要带参数的话redxiang://params ,这里的我写的是没带参数的，我只做了微信浏览器的判断,因为微信直接打开的h5链接是不能直接换起app的，需要在微信开放平台配置相关参数**(偷个懒直接让它跳到应用市场)。目前直接获取当前手机是android还是ios

微信开放标签文档

<view class="sign-box" @click="myplayUser">
				立即下载
</view>
1
2
3

data() {
			return {
				timer:null,
				opening:null,
			}
		},
1
2
3
4
5
6

这里做了监听visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，简单说相当于onhide

	watch: {
			'opening': {
				handler: function(newVal, oldVal) {
					if(newVal == false){
						document.addEventListener("visibilitychange",()=> {
						  if (this.timer) {
						    // this.opening = false
						    clearTimeout(this.timer)
						  }
						}, false);
					}
					
				},
				immediate:true
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写好了之后记得需要打包自定义基座测试

也是第一次写，还是看到一个大佬的文章 写的

myplayUser(){
				//判断是否微信登陆 是的话直接跳到应用市场
				var u = navigator.userAgent;
				var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
				if(isWeixin>-1){
					if (uni.getSystemInfoSync().platform == 'android') {
						 window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=xxxxxxxxxxx'
					}else if (uni.getSystemInfoSync().platform == 'ios'){
						 window.location = 'https://apps.apple.com/cn/app/idxxxxxxx'
					}
					return false
				}
				//若在其他浏览器 
				uni.showLoading({
					title:'跳转中...'
				})
				 let that = this
				  that.opening = true
				  if (uni.getSystemInfoSync().platform == 'android') { //  安卓处理
				    let ifr = document.createElement('iframe');
				    ifr.src = "nameAPP://";  //配置的app 链接"schemes" :  ["nameAPP"]
				    ifr.style.display = 'none';
				    document.body.appendChild(ifr); //如果可以已经安装就可以直接打开了
					
					that.timer = window.setTimeout(function () {  //  未安装的情况
				      that.opening = false
				      document.body.removeChild(ifr);
				      //  提示下载
					    uni.hideLoading()
				      let r = confirm("未安装APP? 是否下载")
				      if (r) {
				        window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=uni.zxxxxxxx'
				      }
				    }, 4000)
					
				  } else {  //  IOS处理
				    window.location = "nameAPP://"    //如果可以已经安装就可以直接打开了
				    that.timer = setTimeout(function () { //  未安装的情况。
				      that.opening = false
				      //  跳转app store
					    uni.hideLoading()
				      let r = confirm("未安装APP? 是否去App store查看")
				      if (r) {
				        window.location = 'https://apps.apple.com/cn/app/idxxxxxxx'
				      }
				    }, 4000);
				  }
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48