MUI H5+ APP 分享H5连接通过scheme唤醒APP

秒速五厘米 2022-10-01 09:50 193阅读 0赞

#### 添加scheme ####

> 在manifest.json文件中添加IOS及安卓的scheme节点

//IOS
    "apple": {
    	"appid": "testguangdian.dome",/*iOS必选，苹果开发网站申请的appid，如io.dcloud.HelloMUI*/
    	"mobileprovision": "",/*iOS必选，打包配置文件*/
    	"password": "goncenleo01",/*iOS必选，导入配置文件密码*/
    	"p12": "",/*iOS必选，打包配置文件关联的个人证书*/
    	"devices": "universal",/*iphone，可取值iphone/ipad/universal*/
    	"urltypes":[
    		{
    			"urlidentifier":"testguangdian.dome",
    			"urlschemes":[
    				"zhsq"
    			]
    		}
    	],
     
    	"frameworks": []
    },
    复制代码

//安卓
    "google": {
    	"packagename": "",/*Android必选，程序包名，如io.dcloud.HelloMUI*/
    	"keystore": "",/*Android必选，打包证书文件*/
    	"password": "",/*Android必选，打包证书密码*/
    	"aliasname": "",/*Android必选，打包证书别名*/
    	"schemes":[
    		"zhsq"
    	],
    }
    复制代码

> 在APP的首页中 做出响应

document.addEventListener('plusready', function () {
    	checkArguments();
    }, false);
    // 判断启动方式
    function checkArguments() {
    	 alert(plus.runtime.launcher )
    	if(plus.runtime.launcher == "default"){
    		return
    	}else if(plus.runtime.launcher == "scheme"){
    			var args = plus.runtime.arguments;
    			alert(JSON.stringify(args))
     
    			if (args) {
    				arr = args.split("?")[1];
    			var goodsid = arr.split("=")[1];
    				setTimeout(function(){
     
    					mui.openWindow("goods_detail.html?goodsid="+goodsid);
    					
    				},1000)
     
    			}
    		}
    		
    	}
    	// 处理从后台恢复
    document.addEventListener('newintent', function () {
    	console.log("addEventListener: newintent");
    	checkArguments();
    }, false);
    复制代码

> 在H5中唤起

function gp_down(dev){ //下载链接
    	if(dev=='android'){
    			var ifr = document.createElement('iframe');
    			ifr.src = 'https://zhapp.4hl.cn/static/home/js/H53D548C0_0806114840.apk';
    			ifr.style.display = 'none';
    			document.body.appendChild(ifr);
    	}else if(dev=='ios'){
    		
    	}
    }
    
    
    
    
    function submitFn(){
    	
    //判断浏览器
    var u = navigator.userAgent;
    if(/MicroMessenger/gi.test(u)) {
    	// 引导用户在浏览器中打开
    	alert('请在浏览器中打开');
    	return;
    }
    var d = new Date();
    var t0 = d.getTime();
    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
    	//Android
    			var href = "zhsq://startapp?goodsid=428045"
    //						alert("Android-->zhsq")
    //						alert(openApp('zhsq://startapp'))
    	if(openApp(href)){
    		openApp(href);
    	}else{
    		//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
    		var delay = setInterval(function(){
    				var d = new Date();
    				var t1 = d.getTime();
    				if( t1-t0<3000 && t1-t0>2000){
    //		                    alert('请下载APP');
    //		                     window.location.href = " app下载地址 ";
    				}
    				if(t1-t0>=3000){
    					clearInterval(delay);
    				}
    		},1000);
    	}
    }else if(u.indexOf('iPhone') > -1){
    	//IOS
    //            	alert("ios-->zhsq")
    //								alert(openApp('zhsq://startapp'))
    	if(openApp('zhsq://startapp')){  
    		openApp('zhsq://startapp');
    	}else{
    		var delay = setInterval(function(){
    			var d = new Date();
    			var t1 = d.getTime();
    			if( t1-t0<3000 && t1-t0>2000){
    //		                    alert('请下载APP');
    //		                    window.location.href = "app下载地址 ";
    			}
    			if(t1-t0>=3000){
    				clearInterval(delay);
    			}
    		},1000);
    	}
    }    
    }
    
    function openApp(src) {
    // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
    // 否则打开a标签的href链接
    	var ifr = document.createElement('iframe');
    //				 alert("openApp-->"+src)
    	ifr.src = src;
    	ifr.style.display = 'none';
    	document.body.appendChild(ifr);
    	window.setTimeout(function( ){
    		document.body.removeChild(ifr);
    	},2000);
    }
    
    
    submitFn()    
    复制代码

转载于:https://juejin.im/post/5cb143e05188257a9e312334

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni_app h5打包

使用uniapp 进行h5打包步骤如下: 1. 打开manifest.json —> h5配置路由模式: 我使用的是hash路由运行基础路径:

川长思鸟来/ 2022年12月07日 12:03/ 0 赞/ 271 阅读

相关 H5通过URL Scheme协议唤起App

场景 > 在 h5 页面上，用户点击打开app按钮，如果已经安装了App则打开app，否则引导用户前往应用市场。实现思路 > 在 h5 页面上唤醒app ，需要

末蓝、/ 2022年12月01日 15:52/ 0 赞/ 276 阅读

相关 Mui打开android界面,MUI H5+ APP 分享H5连接通过scheme唤醒APP

添加scheme 在manifest.json文件中添加IOS及安卓的scheme节点 //IOS "apple": \{ "appid": "testguangdia

谁践踏了优雅/ 2022年10月05日 13:47/ 0 赞/ 144 阅读

相关 MUI H5+ APP 分享H5连接通过scheme唤醒APP

添加scheme > 在manifest.json文件中添加IOS及安卓的scheme节点 //IOS "apple": { "appid":

秒速五厘米/ 2022年10月01日 09:50/ 0 赞/ 194 阅读

相关 app跳转至H5，H5向app传递参数调用app接口

1.需先在项目引入uni的 SDK  <script type="text/javascript" src="ht

Love The Way You Lie/ 2022年09月12日 01:57/ 0 赞/ 204 阅读

相关 H5唤醒APP

支付宝 [https://ds.alipay.com/?from=mobileweb][https_ds.alipay.com_from_mobileweb]

忘是亡心i/ 2022年08月22日 14:20/ 0 赞/ 186 阅读

相关 h5 app版本管理

基于mui框架做一个简单的版本管理；原理：在通用js中设置一个版本号，然后在个人中心界面设置一个版本管理li ![20190315201126543.png][

深藏阁楼爱情的钟/ 2022年03月07日 00:30/ 0 赞/ 241 阅读

相关 H5唤醒APP

H5 唤醒APP功能最近遇到一个需求，需要在从APP分享出去的H5页面中，带有一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转

冷不防/ 2022年02月26日 05:06/ 0 赞/ 212 阅读

相关 H5嵌入APP后，通过window.WebViewJavascriptBridge原生APP与H5之间交互

原生APP跳转到H5页面时，往往需要携带一些用户信息，之前做法是在跳转的地址中拼接H5页面需要的参数，现在通过window.WebViewJavascriptBridge悄悄的

╰半橙微兮°/ 2022年02月20日 03:49/ 0 赞/ 586 阅读

相关 app内嵌H5调用分享

最近产品提出了一个需求：我们在合作方的app中提供的部分页面中增加分享页面，具体要求是在3个二维码推广页面调用app的分享接口，分享方式有3种，分别是点击”分享链接“按钮调起分

一时失言乱红尘/ 2021年12月21日 14:51/ 0 赞/ 443 阅读