H5和app混合开发的通讯方式

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

代码007普通

打赏 收藏 海报 链接