H5与App交互

最新推荐文章于 2025-07-13 18:11:50 发布

Eternal-memory

最新推荐文章于 2025-07-13 18:11:50 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发经验之谈 Javascript

本文链接：https://blog.youkuaiyun.com/liuxin_1991/article/details/90512333

前端开发经验之谈同时被 2 个专栏收录

12 篇文章

订阅专栏

Javascript

11 篇文章

订阅专栏

本文探讨了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{
// 浏览器页面打开逻辑
//...

}