混合开发优缺点
- 优点： 开发快、易更新、开发周期短
- 缺点：性能问题、兼容性问题
- Android5.0+ 和。IOS9.0+ 上缺点不再明显
混合开发应用场景
微信公众号，通过JSSDK连接 Native 端和 Web 端
微信小程序，通过内置框架连接 Native 端和 Web 端
混合开发学习意义
- 更好的使用第三方平台
- 更灵活的技术方案选型
- 具备搭建平台和输出服务的能力
混合开发的核心技术
JSBridge 桥接器
- 实现 Native 端和 Web 端双向通信的一种机制
- 以Javascript 引擎或者 WebView 容器为媒介
- 通过约定协议进行通信
混合开发主流技术框架
Web 渲染： Cordova（前身是 PhoneGap） 原生渲染： React Native、Weex 混合渲染： 微信小程序、
混合开发核心技术解析
JSBridge 实现原理
- 类比 Client/Server 模式
- 将 Native 端原生接口封装成 JavaScript 接口
- 将 Web 端 JavaScript 接口封装成原生接口
- Web 端 和 Native 端的双向通信
JSBridge 实现示例
Code
JsBridge 中 Web 端调用原生端的两种实现方式
拦截 WebView 请求的 Url Schema
- 优点：兼容性好
- 缺点：不直观、URL 长度有限制
Demo
向 WebView 中注入 JS API
- 优点：简单直观
- 缺点：有兼容性问题（Android4.2+）
Demo
原生调用 web 端的方式
带回调的 JSBridge
- 在对端执行操作并返回结果
- 有输入有输出才是完整的调用
通过两次单向调用实现
Demo1: Web 获取 Native 输入框内容，并在 web 中使用 web 弹出
Demo2: Native 获取 Web 输入框内容，并在 Native 中使用 原生 弹出
使用 JSBridge 的开源实现
- JsBridge： 拦截 URL Schema
- DSBridge： 注入 JS API
