1、安卓,采用的是:JsBridge
2、IOS,采用的是:window.webkit
其实流程比较简单:
内嵌在原生webview的h5,可以通过JsBridge/window.webkit这2个对象访问原生的方法
但是原生要访问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('')
}
}
window.setVoiceContent = function (msg:string) {
const m = msg.substr(0, msg.length - 1)
if (admsg !== msg && admsg !== m) {
emit('load', msg)
}
admsg = msg
}
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
原文地址:https://blog.csdn.net/qq_38361229/article/details/129028290
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_8517.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!