H5与App交互

本文探讨了H5页面如何与原生App进行深度交互,包括通过JSBridge实现数据交换,触发App功能,以及利用WebView优化用户体验。同时,文章还讨论了安全性和性能优化策略。

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

if(userAgent.indexOf("app协议头") || userAgent.search("app协议头")){
    // APP打开 html 页面逻辑
	//判断系统@type {{versions: {ios, android}}}
	var proform;
	var browser={
	    versions:function(){
	        var u = navigator.userAgent, app = navigator.appVersion;
	        return {
	            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	        };
	    }()
	};
	var UserId,token;
	if(browser.versions.ios) {
	    proform = 'ios';
	    //ios调用方法获取用户名等信息fetchUserInfo
	    window.webkit.messageHandlers.cybios.postMessage("fetchUserInfo");
	    function fetchUserInfo(userInfo){
	        //用户的userid
			UserId = userInfo.userID;
			localStorage.setItem('ZUserId',UserId);
			//产品是否正式发售
			Type = userInfo.type;
			localStorage.setItem('ZType',Type);
			//获取token
			Token = userInfo.token;
			localStorage.setItem('ZToken',Token);
	    }
	    //以下为页面展示逻辑
	    //...
	    
	} else if(browser.versions.android){
	    proform = 'android';
	    //安卓调用方法获取用户名等信息jsCallJava()
		var str = window.javaObj.jsCallJava();
		str = JSON.parse(str);
		//用户的userid
		UserId = str.userID;
		localStorage.setItem('ZUserId',UserId);
		//产品是否正式发售
		Type = userInfo.type;
		localStorage.setItem('ZType',Type);
			//获取token
		Token = userInfo.token;
		localStorage.setItem('ZToken',Token);
	    //以下为页面展示逻辑
	    //...
		
	}

}else{
// 浏览器页面打开逻辑
//...

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值