这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

跨端技术概述

1.跨端是什么

1. 跨端背景

随着移动互联网的普及和发展，越来越多的应用需要同时支持多个终端设备，如手机、平板电脑和电脑等。

传统的开发方式需要为不同的设备分别开发应用，这样不仅开发成本高，而且需要维护多个版本的代码，效率低下。

因此，跨端技术应运而生，它可以帮助开发者快速构建跨平台应用，提高开发效率和用户体验。

2.跨端是什么

跨端技术是指在不同的终端设备（如电脑、手机、平板等）之间共享代码、数据和逻辑的技术，以实现一次开发、多端部署的效果。这种技术可以帮助开发者减少重复的开发工作，提高开发效率和代码复用率。

通常意义上讲，在前端领域的跨端指的是一套代码落地到不同的native操作系统上，也就是常说的 write once run anywhere

常见痛点:

各端功能几乎—致，各端需要单独配置研发人员
开发、维护成本高
安卓、iOS发版周期长
……

2.跨端技术方案介绍

Hybrid方案

基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。

原生渲染方案

使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面

——React Native

React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用。

可以将同一份代码转换为不同平台的原生应用。React Native支持iOS、Android等多个平台，开发者可以使用熟悉的Web技术进行开发，但相对于原生应用性能稍逊。

React native的思路是最大化地复用前端的生态和Native的生态，和WebView容器的最大区别在于View的渲染体系。React Native抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射到对应的平台，渲染成平台的组件。相对 WebView容器，体验会有一定的提升。不过，渲染时需要JavaScript和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在Native层，要求开发人员对Native有一定的熟悉度。

React Native是一主要有JSI、Fabric、Turbo Modules组成。

JSI

JSI 是 JavaScript Interface 的缩写，一个用 C++ 写成的轻量级框架，它的作用就是通过JSI，JS 对象可以直接获得 C++ 对象(Host Object)引用，并调用对应方法。
Fabric

Fabric 是最新的渲染系统，它将取代当前的 UI Manager;
Turbo Modules

Turbo Modules 基本上是对这些旧的 Native 模块的增强，正如在前面介绍的那样，现在 JS 将能够持有这些模块的引用，所以 JS 代码可以仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间。

自渲染方案

利用 Skia 重新实现渲染管线,不依赖原生组件。

Flutter

Flutter是 Google在2018年世界移动大会公布的开源应用开发框架，仅通过套代码库，就能构建精美的、原生平台编译的多平台应用。

Flutter引擎毫无疑问是Flutter的核心，它主要使用C++编写，并提供了Flutter应用所需的原语。当需要绘制新一帧的内容时，引擎将负责对需要合成的场景进行栅格化。它提供了Flutter核心API的底层实现，包括图形(通过Skia)、文本布局、文件及网络IO、辅助功能支持、插件架构和Dart运行环境及编译环境的工具链。

引擎将底层C++代码包装成Dart代码，通过dart:ui暴露给Flutter框架层。该库暴露了最底层的原语，包括用于驱动输入、图形、和文本渲染的子系统的类。通常，开发者可以通过Flutter框架层与Flutter交互，该框架提供了以Dart语言编写的现代响应式框架。它包括由一系列层组成的一组丰富的平台，布局和基础库。从下层到上层，依次有:

基础的foundation类及一些基层之上的构建块服务、渲染层、weight层。

小程序方案

使用小程序 DSL +JS开发，通过中间层桥接后调用原生能力,使用webview来渲染U界面。

小程序跨端技术是编译时和运行时的结合方案。

3.基于小程序跨端实践

可以使用 Taro 框架来开发小程序、H5 网页、React Native、快应用等多端应用。

1.下载小程序开发者工具

抖音开放平台 (open-douyin.com)

2.小程序开发、调试

首先，使用 npm 全局安装 Taro：

javaCopy code
npm install -g @tarojs/cli

使用 Taro CLI 创建一个新项目：

csharpCopy code
taro init myApp

进入项目目录，使用以下命令启动开发服务器：

bashCopy codecd myApp
npm run dev:weapp

javascriptCopy code// src/pages/index/index.jsx
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}

在 app.jsx 文件中配置路由：

javascriptCopy code// src/app.jsx
import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index/index'

import './app.less'

class App extends Component {

  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  render () {
    return (
      <Index />
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

最后，使用以下命令编译并预览小程序：

Copy code
npm run dev:weapp

3.小程序上传

总结与展望

这节课学习了许多跨平台的跨端技术。还学习使用了字节跳动的小程序开发者工具，同时也学习了小程序的优化手段。

随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是「write once, run anywhere]，未来自渲染可能会出现更多机会。

跨端技术初识 | 青训营笔记