Hybrid

• juejin.cn/post/684490…
• zhuanlan.zhihu.com/p/78956029

方案：

h5 容器 & 小程序

原理：

• js 与 native 通信，jsbridge, 核心 webview
• Native > webview > h5

方式：

• webview url scheme 跳转拦截
• api 注入： native 获取js上下文环境， 直接在context上挂载对象or方法，供js调用
• webview prompt 拦截

中间url 拦截实现原理：

1. webview 中发出的网络请求， native 端都能监听

2. 协议定制 定义一套 URL Scheme 规则。 比如： jego.com://getxxx?id=1, jego.com://openxxx?id=1

• 创建iframe 发送请求：
• 设置域名白名单： 安全考虑，防止三方调用

3. 协议拦截

• native 通过对webview 的请求进行拦截：

• iOS： shouldStartLoadWithRequest

• android: shouldOverrideUrlLoading

获取到url, 判断如果为自定义协议，则进行拦截， 解析参数，并调用相关原生Api;

4. 协议回调

• 网络请求是一个异步过程，回调也是异步。
• 利用js 事件系统，window.addEventListener & window.dispatchEvent

1. 发送请求，注册自定义事件
2. native侧处理后，通过jsbridge 调用 window.dispatchEvent ,回调data

痛点

优化

像我们的做法是让客户端下载一个zip包进行解压前端资源。当资源过期或者解析出错的时候走线上。

作用

• 安全加密。 native可以代理web 发出的请求，然后转发进行加密、解密，签名校验。