跨端容器

为什么需要跨端

开发成本、效率

一致性体验

前端开发生态

跨端方案

webview、 小程序、 RN/WeeX、 Lynx、 Flutter

跨端容器

WebView

1. Webview，即网页视图，用于加载网页Url，并展示其内容的控件
2. 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发；比如lonic、Cordova。
   

常用webview：Android，IOS、国产Android

优势：

1. 一次开发，处处使用，学习成本低
2. 随时发布，即时更新，不用下载安装包
3. 移动设备性能不断提升，性能有保障
4. 通过JSBridge和原生系统交互，实现复杂功能

WebView 使用原生能力

1、Javascript 调用 Native

API注入: Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截

使用Webview URL Scheme 跳转拦截

IOS上 window.webkit.messageHandler 直接通信

2、Native 调用 Javascript

直接通过webview 暴露的 API 执行JS代码

IOS webview.stringByEvaluatingJavaScriptFromString

Android webview.evaluateJavascript

WebView——Native通信

1. JS环境中提供通信的JSBridge
2. Native 端提供 SDK 响应JSBridge 发出的调用
3. 前端和客户端分别实现对应功能模块

实现一个简易JSBridge

小程序

1. 微信、支付宝、百度小程序、小米直达号
2. 渲染层 — webview
3. 双线程，多webview架构
4. 双线程，多webview架构

React Native/WeeX

1. 原生组件渲染
2. React/Vue框架
3. virtual dom
4. JSBridge

Lynx

1. Vue
2. JS Core /V8
3. JSBinding
4. Native UI / Skia

Flutter

1. wideget
2. dart vm
3. skia 图形库

跨端方案对比

总结