H5和Native交互原理（Hybrid架构）

参考：https://www.jianshu.com/p/477ea20b1ece?from=singlemessage#_dt=1598020953361  或  https://www.cnblogs.com/magicg/p/13089480.html（推荐，比较详细）

 

Native与H5相互调用

JavaScript 调用 Native 的两种方式：拦截 url scheme  和  注入API

方式一：   拦截 URL SCHEME  【现在基本不用这种方式了】

　　1、url scheme是一种类似于url的链接,起始是为了方便app之间互相调用设计的。

　　　需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)

　　2、混合开发交互的url scheme则是仿照上述的形式的一种方式。这种交互的 url 没有必要在原生app配置中注册

　　　  具体为,由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后 拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等

　　　  协议类似于：quickhybrid://xxx

　　说明：这种方案兼容性好，基本所有的低版本的机型都是有效的。但是效率低

 

方式二：    注入API  【H5直接与Native交互，js通过一个对象（JSBridge）直接调用native的方法】

　　1、原生的功能通过一个对象 注册进去，直接给 js调用

　　2、低版本的 机型，兼容性不好。不过现在的机型基本已经都支持了。

Native 调用 JavaScript：Native 可以直接调用 window下的方法

　　相比于 JavaScript 调用 Native， Native 调用 JavaScript 较为简单。

　　毕竟不管是 iOS 的 UIWebView 还是 WKWebView，还是 Android 的 WebView 组件，都以子组件的形式存在于 View/Activity 中，直接调用相应的 API 即可。

　　Native 调用 JavaScript，其实就是执行拼接 JavaScript 字符串，从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上。

　　（闭包里的方法，JavaScript 自己都调用不了，更不用想让 Native 去调用了）

 

---

 

封装 js 调用 native 的方法：bridge.js

一、区分 原生 注入 jsbridge 对象下的 方法是否 异步。                https://blog.csdn.net/yuzhengfei7/article/details/93468914

　　这个由 原生 来定。原生提供的方法，需要在回调中执行的话，就必须按照异步处理；非回调的就是同步的。      js 中异步 一定是 通过回调处理的， 回调的方法不一定是异步的。

　　原生 注入的 方法 需要 回调来执行，说明 原生里面 处理 本来就 需要 等待（即异步）。所以 js 就把这个作为异步函数好了。

二、