跨端容器简介
⭐什么是跨端？
让代码可以跨客户端运行，WEB、Android、IOS，大有write once, run everywhere之势！
⭐为什么需要跨端
🌰一套代码多处运行，成本大大降低，开发效率upup↑
🌰一套开发流程，体验一致性也得到了保证。
🌰前端开发生态完善，人数众多，向其他方向进行扩展（抢饭碗bushi）
⭐跨端容器简介
🌰WebView
WebView，即网页视图，用于加载网页URL，并展示其内容的空间。它可以内嵌在移动端APP中，实现前端混合开发，大多数混合框架都是基于Webview的二次开发，例如lonic、Cordova等等。
常用WebView分类
常用webview、Android、iOS、国产Android
WebView的优势
- 一次开发，处处使用，学习成本较低
- 随时发布，即时更新，不用下载安装包
- 移动设备性能不断提升，性能有保障
- 通过JSBridge和原生系统交互，可以实现复杂功能
WebView使用原生能力
JavaScript调用Native
- API注入：Native获取JavaScript环境上下文，对其挂载的对象或者方法进行拦截
- 使用WebView URL Scheme跳转拦截
- IOS上window.webkit.meesageHandler直接通信
Native调用JavaScript
- 直接通过webview暴露的API执行JS代码
- 在IOS中： webview.stringByEvaluatingJavaScriptFromString
- 在Android中： webview.evaluateJavascript
WebView<->Native通信
- JS环境中提供了通信的JSBridge
- Native端提供了SDK响应JSBridge发出的调用
- 前端和客户端分别实现对应的功能模块
🌰小程序
小程序有微信、支付宝、百度小程序、小米直达号等等
他的主要架构：
- 渲染层——webview
- 双线程——多webview架构
- 数据通信——可以观察出逻辑层和渲染层做了分离，所以需要通过Native进行转发
🌰React Native/Weex
- 原生组件渲染
- React/Vue框架
- virtual dom
- JSBridge
🌰Lynx
- Vue
- JS Core / V8
- JSBinding
- Native UI / Skia
🌰Flutter
- wideget
- dark vm
- skia图形库绘画，所以在各端看起来是一致的
⭐总结
总结以上，我们可以发现跨端容器的通用原理：
- 提供一套基础的UI组件
- 提供一个渲染引擎
- 提供一个逻辑控制引擎
- 来一个通信桥梁bridge
- 最后再实现各端API，抹平各端的表现差异
最后对比各技术：
