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

其实流程比较简单
内嵌在原生webviewh5,可以通过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模式进行二次开发的。 比如:APIclouduniapp等等的框架。
Webview 是一个基于webkit的引擎,可以解析DOM 元素展示html页面控件,它和浏览器展示页面原理是相同的,所以可以把它当做浏览器看待

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

原文地址:https://blog.csdn.net/qq_38361229/article/details/129028290

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8517.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注