android h5跳转到原生页面 h5跳转到app指定页面

转载

数据科学探索者 2023-09-18 04:30:19

文章标签 android h5跳转到原生页面前端 h5 json ios 文章分类 Android 移动开发

关于uniapp分享二维码，浏览器打开下载页面跳转app指定页面

前言

本文介绍了uniapp如何通过app分享指定页面海报，浏览器通过扫描二维码进入下载页面，判断手机安装了此app跳转至app指定页面，没有下载则安装下载

1、app内配置

1.manifest.json配置

代码如下（示例）：打开manifest.json->源码视图->app-plus->distribute->android配置

"android" : {
           "schemes" : [ "text" ],
      },

代码如下（示例）：这个应用支持的scheme，大小写相关，推荐使用小写

2.app.vue内配置

代码如下（示例）：onLaunch内

代码如下（示例）：

plus.globalEvent.addEventListener('newintent', (e) => {
	var args = plus.runtime.arguments;
	var a = args.split("//")
	//此时的a[1]就是pages/文件名/页面名?参数名='+参数
	if (args) {
		// 处理args参数，如直达到某新页面等  
		uni.navigateTo({
			url: a[1]
		})
	}
});

代码如下（示例）：onShow内此处给的延时因为ios不给延时的话获取的页面路径会是上一次的页面路径

代码如下（示例）：

setTimeout(function() {
	var args = plus.runtime.arguments;
	var a = args.split("//")
	if (args) {
		uni.navigateTo({
			url:a[1]
		})
	}
}, 10);

2、h5页面

代码如下（示例）：在这里先获取扫描二维码内携带的打开app内指定页面的参数

//获取Location对象的search属性值,location对象中search属性返回的是问号之后的URL
var searchStr = location.search;
//去除无用的字符"?"
searchStr = searchStr.substr(1);
//将searchStr字符串分割成数组，数组中的每一个元素为一个参数和参数值
var searchs = searchStr.split("&");
//获得第一个参数和值
var address = searchs[0].split("=");

因为我是在下载页面点击下载按钮以后才去判断的有没有安装当前app安装则跳转没有安装则直接下载这里因为我是根据点击下载按钮判断的有无下载app跳转，所以没有判断当前手机为ios还是安卓，如需判断请自行去百度

a标签的默认href就是你所要跳转的指定页面路径

这里的searchs就是你在manifest.json内配置的schemes为开头

let schemes = 'text://pages/index/index?id=1' 这里text://后面就是你所要跳转那个页面的具体路径
以及要携带的参数

<a :href="searchs" @click="indexUp1"></a>

indexUp(){
	点击事件内给一个定时器，因为h5无法直接判断手机有没有安装当前app，当前定时器就相当于判断 
	 当点击下载按钮的时候有当前app的话就是直接打开app跳转至指定页面，没有的话则下载当前app
	 （前提是确保前面配置都ok的情况下）
	setTimeout(()=> {
		window.location.href = this.downList[0]; //下载地址  
	}, 500);
	
}