段时间的探索和实践，美团外卖 MTFlutter 团队成功实现了 Flutter 对于鸿蒙系统的 前端 2 > 2021年美团技术年货 原生支持。 这里也要提前说明一下，因为鸿蒙系统目前还处于 Beta 版本，所以这套适配方案还 没有在实际业务中上线，属于技术层面比较前期的探索。接下来本文会通过原理和部 分实现细节的介绍，分享我们在移植和开发过程中的一些经验。希望能对大家有所启 发或者帮助。 背景知识和基础概念介绍 两者的区别进行了对比： 图 3 模式对比 Canvaskit Render 模式：底层基于 Skia 的 WebAssembly 版本，而上层使 用 WebGL 进行渲染，因此能较好地保证一致性和滚动性能，但糟糕的兼容性 （WebAssembly 从 Chrome 57 版本才开始支持）是我们需要面对的问题。此外 Skia 的 WebAssembly 文件大小达到了 2.5M，且 Skia 自绘引擎需要字体库支持， Docker 镜像，整个过 程耗时较长且不够灵活。因此，我们将 Dart-SDK、Framework、Flutter_Web_ SDK 按版本打包传至云端，在编译开始前读取 CI/CD 环境变量：sdk_version （SDK 版本号），远程拉取相应版本的 SDK 包，并替换当前 Docker 环境中的对应模 块，基于以此方案实现 SDK 的灵活发布，具体流程图如下图所示： 图 10 集成

install 安装项目依赖 script 运行测试用例 发布到 npm 添加用户： npm adduser 升级补丁版本号：npm version patch 升级版本 升级小版本号：npm version minor 升级大版本号：npm version major 发布版本：npm publish Git 规范和 Changelog 生成 ·加快 Code Review 的流程 "husky": "^0.13.1" } Changelog 生成 开源项目版本信息案例 React 版本信息 版本是严格递增的，此处是：16.2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成，形如： X.Y.Z 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增， 主版本号：当你做了不兼容的 API 修改， 修订号：当你做了向下兼容的问题修正。 先行版本号 先行版本号可以作为发布正式版之前的版本，格式是在修订版本号后面加上一个连接 号（-），再加上一连串以点（.）分割的标识符，标识符可以由英文、数字和连接号

n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 第一步 当 我 跨 出 第 一 步 工程体系接入 n Flutter接入方式 n FlutterBox Flutter接入方式 源码 双端工程 Flutter环境 业务package n Plugin n 外界资源 新pubspec.yaml 一键命令 模块化开发 业务框架升级之旅 接下来…… n 技术需求（背景） n 现有业务框架 n 现有业务框架的问题与挑战 n redux到tieba_redux 技术需求（背景） 定制版本、 快速开发新app 细粒度模块化 中台能力 一键配置生成 现有业务框架（传统做法） Model Presenter

配置 很早就开始使⽤用 ioc 注⼊入的⽅方式，苦于 js ⼀一 直没有很好的实践产品。 使⽤用描述⽂文件创建实例例（xml） TS 配置 使⽤用描述⽂文件创建实例例（xml） TS 升级 使⽤用 inversify 的⾃自动化 优势：简单，功能精简 劣势：满⾜足不不了了⾃自定义的需求(xml) ⾃自动化装配 TS TS TS TS ⾃自研 100%满⾜足⾃自⼰己 虽然服务层的使⽤用已经解决了了，但是和 egg 耦合的部分还是沿⽤用了了 egg 的写法，虽然有 变通的办法，但是需要在体验上更更进⼀一步。 TS 和 Egg.js 解耦 1、保留留原有能⼒力力，可以快速迭代升级（继 承 egg-loader) 2、实现装饰器器的⽅方式，利利⽤用现有的 API， 附加能⼒力力，⽐比如 loader 的扩展， loadController，load系列列的 保留留 Egg ⽀支持 egg 插件体系的完 整版本。 Midway For Koa 220line ⽀支持 koa 作为基础框架， 包含最简单单进程场景的 midway 适配版本。 Midway For Express Midway For FaaS 240line ⽀支持 express 作为基础框 架，包含最简单单进程场 景的 midway 适配版本。 120line 极简的 for

Angular, Second Edition ISBN 978-7-302-49117-0 Ⅰ. ①A… Ⅱ. ①亚… ②杨… Ⅲ. ①超文本标记语言－程序设计－教材 Ⅳ. ①TP312.8 中国版本图书馆 CIP 数据核字(2017)第 315412 号 责任编辑：王 军 李维杰 装帧设计：孔祥峰 责任校对：曹 阳 责任印制： 出版发行：清华大学出版社 也不要担心，本书由易到难的循序渐进式风格可以极大地降低学习 Angular 框架的门槛， 降低学习痛苦指数。而对于经验丰富的前端老兵，尽管具有 Angular 框架使用经验，本书 也值得推荐，因为本书内容已经升级到 Angular 5，能助你快速将项目升级到 Angular 框架 的最新版，充分利用最新框架的强大功能。 本书由杨明军、颜炯翻译。此外，参与本书翻译的还有肖国尊、胡季红、李辉、马蓉、 李新军、易民全、姚建军、 Node.js 版本与本书中使用的相同。尽管 Node.js 相对稳定，但 是 API 仍然会不时地发生重大变更，这样可能会导致本书中包含的示例无法正常运行。 本书使用的版本是 8.9.1，这是本书写作时的长期支持(Long Term Support，LTS)版本。 Angular 5 高级编程(第 2 版) 6 当阅读本书时，Node.js 可能会有更新的版本，但是为了正常运行本书中的例子，应该坚持

客户端 Vue Vue-Router Vuex Iview Electron 底层 Main Process Render Process 底层 代理理层 SSO Stash ⽤用户信息 版本统计 权限管理理 构建层 Electron-builder webpack Gulp etc…… UAC ├── bin │ ├── jenkins.sh │ ├── run-test 修复问题 Unit Testing ✔ 版本管理理平台 测试 Electron应⽤用中遇到的问题和解决⽅方案 项⽬目实践 #1如何解耦业务逻辑 Node Path file Stream …… Native dialog Shell TouchBar …… ⻚页⾯面代码与业务逻辑混写，功能重复 升级Electron框架，修改成本⼤大 Vue Component #3如何完成签名、⾃自动更更新 使⽤用⼈人员 版本1.0 命中使⽤用的版本 版本管理理平台 配置⻚页⾯面 后端服务 版本1.2 版本1.3 每次新版本上线，⼀一旦线上出现严重bug 影响所有⽤用户使⽤用 客户端 更更新SDK 添加灰度版本和配置信息 配置信息 项⽬目实践 #3如何完成签名、⾃自动更更新 灰度发布 指定⼈人员发布 指定版本发布 项⽬目实践 #4如何定位和收集问题

已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript 标准的哪个版本。 JavaScript简介 JavaScript历史 ECMAScript JavaScript版本 1 JavaScript简介 - 7 - 本文档使用 书栈(BookStack.CN) 构建 由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这 的浏览器，这 就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老 用户的浏览器是无法运行新版本的JavaScript代码的。 不过，JavaScript的核心语法并没有多大变化。我们的教程会先讲JavaScript最核心的用法，然 后，针对ES6讲解新增特性。 原文: https://wizardforcel.gitbooks.io/li 书栈(BookStack.CN) 构建 5. abc = 'Hello, world'; 6. alert(abc); 运行代码，如果浏览器报错，请修复后再运行。如果浏览器不报错，说明你的浏览器太古老了，需要尽 快升级。 不用 var 申明的变量会被视为全局变量，为了避免这一缺陷，所有的JavaScript代码都应该使用 strict模式。我们在后面编写的JavaScript代码将全部采用strict模式。

ECMAScript 6 入门 《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。 前言 4 本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，对涉及的语法知识给予详细介 绍，并给出大量简洁易懂的示例代码。 本书为中级难度，适合已经掌握 ES5 的读者，用来了解这门语言的最新发展；也 可当作参考手册，查寻新增的语法点。 提交给国际标准化组织ECMA，希望这种语言能够成为国 际标准。次年，ECMA 发布262号标准文件（ECMA-262）的第一版，规定了浏览 器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。 该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有 两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape JavaScript 语言的下一个版本。 但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个 人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要 引入的功能。常规的做法是先发布6.0版，过一段时间再发6.1版，然后是6.2版、 ECMAScript 6简介 7 6.3版等等。 但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任

入门教程》 框架版本对 Vue 的支持 ● Element UI 支持 Vue 2 ● Element Plus 支持 Vue 3 ● Ant Design Vue 1.x 支持 Vue 2 ● Ant Design Vue 3.x 支持 Vue 3 Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第 方组件库 Vue 3 ，3.x 版在易用性、功能、性能上都有了很大的提升，可以说是对 ue 3 比较成熟支持的版本了。 浏览器兼容性 Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己放弃了 IE 而是 Vue 3 本 已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架，可使用 Babel、ESBuild 或其他转换 原文链接：Element 单校验和提交功能。 input、checkb x 、select 等常用功能两个框架都有。 ● Ant Design Vue 2 & 3 是最早支持 Vue 3 的框架之一，新版本解决了很多 Vue 用户群在旧版本 喜欢的「单向数据流 value + change event」，实现了全 v-model 使用组件。 维护状态 Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻

系统仅有64位的二进制文档，支持的最低版本是 macOS 10.8。 仅支持 Windows 7 及其以后的版本，之前的版本中是不能工作的。 对于 Windows 提供 x86 和 amd64 (x64) 版本的二进制文件。需要注意的是 ARM 版本的 Windows 目 前尚不支持. 预编译的 ia32 ( i686 ) 和 x64 ( amd64 ) 版本 Electron 二进制文件都是在Ubuntu arm 版的二进制文件是在 ARM v7（硬浮点 ABI 与Debian Wheezy 版本的 NEON）下完成的。 预编译二进制文件是否能够运行，取决于其中是否包括了编译平台链接的库，所以只有 Ubuntu 12.04可以保证正常 工作，但是以下的平台也被证实可以运行 Electron 的预编译版本： Ubuntu 12.04 及更新 Fedora 21 Debian 8 支持的平台 的位置。 当 Node 开始换新的V8引擎版本时，原生模块可能“坏”掉。为确保一切工作正常，你需要检查你想要使用的原生模 块是否被 Electron 内置的 Node 支持。你可以在这里查看 Electron 内置的 Node 版本，或者使用 process.version (参考：快速入门)查看。 考虑到 NAN 可以使你的开发更容易对多版本 Node 的支持，建议使用它来开发你自己的模块。你也可以使用