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

跨端容器

1. 为什么需要跨端

• 开发成本，效率
• 一致性体验
• 前端开发生态

2. 有哪些跨端方案

• WebView
• 小程序
• RN/Weex
• Lyx
• Flutter

3. 跨端容器-WebView

• WebView，即网页视图，用于加载网页Url，并展示其内容的控件

• 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发；比如lonic、Cordova

• 使用WebView优势

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

• WebView使用原生能力

  1. JavaScript调用Native

     • API注入: Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截
     • 使用Webview URL Scheme 跳转拦截
     • IOS上 window.webkit.messageHandler直接通信

  2. Native调用Javascript

     • 直接通过webview暴露的API执行JS代码
     • lOS webview.stringByEvaluatingJavaScriptFromString
     • Android webview.evaluateJavascript

• WebView<->Native通信

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

• 实现一个简易JSBridge

  interface CallArgs{
      callId: string //调用Id，唯一标识
      module: string //调用模块
      method: string //调用方法
      data: any //参数
  }
  const Callbacks = {} //存放回调函数 callId为key
  function applyNative = (payload:CallArgs, callback:Function)=>{
  	const callId = prefix + callTime++
  	Callbacks[callId] = callback
  	const Args0: CallArgs = {
          callId: callId,
  		module: payload.module || 'layout',
  	    method: payload.method || 'randomSize',
  		data: payload.data,
  	}
      if(IOS){
          return window.webkitURL.messageHandler.postMessage(JSON.stringify(Args0))
      }else {
          //Android对window上约定的对象进行拦截
          return window.AndroidBridge(JSON.stringify(Args0))
      }
  }
  

  interface ResponseArgs {
  	responseId: string //回调Id，与callId对应
      errCode: number
  	errMsg?: string
      data: unknown
  }
  //native端调用webview，参数都经过序列化
  const applywebview = (res: string)=>{
      const response = JSON.parse(res) as ResponseArgs
      const {responseId} = response
      //从callbacks找到对应的回调处理方法
      if(type of Callbacks[responseId] === 'function' ){
      	Callbacks[responseId](response) 
          //回调后删除该次回调函数
          delete Callbacks[responseId]
      }
  }
  window.JSBridge = {
  	applyNative,
  	applywebview  //挂载在window上,供native直接调用
  }
  

4. 跨端容器-小程序

• 微信、支付宝、百度小程序、小米直达号
• 渲染层-webview
• 双线程，多webview架构
• 数据通信，Native转发

5. 跨端容器-React Native/Weex

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

6. 跨端容器-Lynx

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

7. 跨端容器-Flutter

• widget
• dart vm
• skia图形库

8. 跨端容器-通用原理

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