uniapp h5在浏览器唤起app

最新推荐文章于 2025-04-27 09:59:22 发布

如梦令1

最新推荐文章于 2025-04-27 09:59:22 发布

阅读量2k

点赞数 1

分类专栏： uni app 文章标签：微信 ios android

本文链接：https://blog.youkuaiyun.com/qq_42966789/article/details/120239028

版权

uni app 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何实现在H5页面中点击打开APP的功能，针对已安装和未安装APP的用户进行不同处理。在Android和iOS平台上，通过配置manifest.json文件来设置scheme。对于微信环境，由于特殊性，需要额外处理并跳转到应用市场。此外，还提供了一段JavaScript代码示例，用于监听页面可见性变化，以判断和执行相应的唤醒或跳转操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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

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

配置

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

"schemes" :  ["nameAPP"]

在这里插入图片描述

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

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

在这里插入图片描述

注意

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

微信开放标签文档

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

data() {
			return {
				timer:null,
				opening:null,
			}
		},

这里做了监听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
			}
		},

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

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

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);
				  }
			},