客户端容器 3 | 青训营笔记

跨端容器

为什么要跨段

• 开发成本高
• 一致性体验
• 前端开发生态

WebView

• WebView，即网页视图，用于加载网页Url，并展示其内容的控件
• 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于WebView进行的二次开发，比如lonic，Cordova，uni-app

WebView使用原生的能力

• JavaScript调用Native

  1. API注入：Native获取JS环境上下文，对其挂在的对象或者方法进行拦截
  2. 使用WebView Url Scheme 跳转拦截
  3. Ios上 window.webkit.messageHandler直接通信

• Native调用JavaScript

  1. 直接通过WebView暴露的API执行JS代码
  2. ios：webview.stringByEvaluatingJavaScriptFromString
  3. Android：webview.evaluateJavaScript

webview 与Native通信

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

小程序

• 渲染层--webView
• 双线程，多webView架构
• 数据通信，Native转发

Weex/React Native

• 原生组件渲染
• React/Vue框架
• virtrual dom
• JSBridge

Lynx

• Vue
• Js Core / V8
• JSBinding
• Native UI / Skia

Flutter

• wideget
• dark vm
• skia图形库

通用原理

• UI组件
• 渲染引擎
• 逻辑控制引擎
• 通信桥梁
• 底层API抹平表现差异