1、安卓,采用的是:JsBridge
2、IOS,采用的是:window.webkit


其实流程比较简单:
内嵌在原生webview的h5,可以通过JsBridge/window.webkit这2个对象访问原生的方法
但是原生要访问h5的方法,h5需要把方法挂载到全局


以下是h5调用原生方法:

export const backApp = function() {
	const u = navigator.userAgent
	if (u.includes('Android') || u.includes('Linux')) {
		JsBridge.backApp('')
	}
	if (u.includes('iPhone') || u.includes('iOS')) {
		window.webkit.messageHandlers.backApp.postMessage('')
	}
}


原生调用h5,需要挂载到window上面,如下面代码所示:
window.setVoiceContent = function (msg:string) {
	const m = msg.substr(0, msg.length - 1)
	if (admsg !== msg && admsg !== m) {
		emit('load', msg)
	}
	admsg = msg
}




IOS和安卓的传参有差异,如下图所示:
在这里插入图片描述

JSBridge怎么实现?原理?

app会往webview容器里的全局变量塞方法,webview里可以通过全局访问并调用这些方法。
webview:可以理解是手机浏览器的翻版,其实就是安卓基于手机浏览器做的一个镜像,本质和手机浏览器一致。
APP里面会起一个浏览器内核:webview。

webview是一个可视化的组件,是作为原生APP的视觉部分。 可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的。 比如:APIcloud、uni-app等等的框架。
Webview 是一个基于webkit的引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待

顾名思义,JS Bridge 的意思就是桥,也就是连接 JS 和 Native 的桥梁,它也是 Hybrid App 里面的核心。一般分为 JS 调用 Native 和 Native 主动调用 JS 两种形式。
https://mp.weixin.qq.com/s/bXXXBEzAHVTWcuGNNqCgpw

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐