在 2019 年，Flutter 推出了多个正式版本，支持的终端越来越多，使用的项目也越来越多。Flutter 正在经历从小范围尝鲜到大面积应用的过程，越来越多的研发团队加入到 Flutter 的学习热潮中，京东作为互联网大厂之一也积极参与了 Flutter 的跨端方案研究。本文将介绍京东在 Flutter 上的应用方案和相关优化成果。

为什么考虑Flutter技术方案

京东在Flutter的实践

• Flutter工程改造： 对Flutter开发环境和dart代码管理进行优化，可以无缝集成到现有APP中并支持自动化dart编译打包，便于开发和调试。

• 路由及多页面管理： 对原生页面和flutter页面实现了集中路由管理，可以双向传参、跳转并且进行了共享内存优化。

• 扩展UI组件库： 官方支持的Material和Cupertino样式不能满足需求，我们内部实现了自定义样式的组件库。

• 原生能力扩展： 对官方原生能力进行了扩展，封装了包括网络、登陆、埋点等等基础能力的打通并提供了50+原生扩展API。

• Android端动态化支持： 在Android端实现了动态化支持，可以线上热更新业务。iOS端暂不支持动态化。

JDFlutter框架设计

基础框架

• 基础层：提供了Flutter的基础组件支持，包括组件管理，状态管理等；基础层完全独立，对业务没有依赖。

• 通用业务层：提供了通用型业务组件支持，例如登录组件，支付组件等；通用业务层依赖于基础层。

• 业务层：即具体业务逻辑实现层，根据业务需要进行不同组件的组合，实现业务页面的快速开发。

核心组件

• 组件管理：组件之间通过标准的协议接口进行通信，降低组件耦合，便于维护及组件升级；

• 状态管理：实现数据和界面分离，统一状态管理，以数据的变化来驱动界面的改变，更有利于数据的持久化和保存，同时也有利于UI组件的复用；

• Hybrid Router：主要解决Flutter和Native之间交叉跳转的问题，减少内存开销，共享同一个Flutter Engine。

工具介绍

• 编译发布：优化Flutter原有的编译逻辑，管理依赖Flutter原生依赖关联，打包Flutter和原生代码，实现自动化构建发布。

• 资源管理：管理图片资源，将资源转换成Flutter类，便于资源的读取操作，类似Andorid的R类；

• 模版代码生成：减少Flutter的代码编写，自动生成Flutter 组件的框架模板代码，提升代码编写效率；

• JSON转换：将JSON数据转换成Flutter code，并提供json转Flutter对象的API，减少动手编写Flutter code及解析。

JDFlutter业务开发实践

配置混合工程

Android平台配置

// MyApp/settings.gradle
include ':app'                        // assumed existing content
setBinding(new Binding([gradle: this]))              // new
evaluate(new File(                                   // new
settingsDir.parentFile,                              // new
  'my_flutter/.android/include_flutter.groovy'       // new
)) 

dependencies {
  implementation project(':flutter')
}

// MyApp/settings.gradle
//projectName 原生模块名称
//projectPath 原生项目路径
include ":$projectName"
project(":$projectName").projectDir = new File("$projectPath")

iOS平台配置

flutter create -t module my_flutter

pod init

#在Podfile文件添加的新代码
flutter_application_path = '/{flutter module目录}/my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

pod install

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

~ $ git clone https://github.com/dart-lang/pub_server.git
~ $ cd pub_server
~/pub_server $ pub get
...
~/pub_server $ dart example/example.dart -d /tmp/package-db
Listening on http://localhost:8080

To make the pub client use this repository configure your shell via:

    $ export PUB_HOSTED_URL=http://localhost:8080

name: hello_plugin //plugin名称 
description: A new Flutter plugin. //介绍
version: 0.0.1//版本号
author: xxx <xxx@xxx.com>//作者和邮箱
homepage: https://localhost:8080 //组件的介绍页面
publish_to: http://localhost:8080//仓库上传地址

pub publish --dry-run

/build

dependencies:
hello_plugin:
  hosted:
    name: hello_plugin
    url: http://localhost:8080 
    version: 0.0.2

dependencies:
  hello_plugin:
    git:
      url: git://github.com/hello_plugin.git //git地址
      ref: dev-branch //分支

Flutter业务的开发与调试

$ cd flutterProjectPath/
$ flutter attach

zbdeMacBook-Pro:example zb$ flutter attach
Waiting for a connection from Flutter on MI 5X...
Done.
Syncing files to device MI 5X...                             1.2s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on MI 5X is available at: http://127.0.0.1:54422/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

JDFlutter热更新实践

• 这么文件目录中只有 flutter_assets 目录和 isolate_snapshot_data 文件是包含业务代码和图片的，其他部分基本不会变化，所以我们这里要替换的目录也就是这两个，大家可以使用 adb push 命令将资源文件 push 到对应的 data 分区来做个实验。

adb push my_flutter/.android/Flutter/build/intermediates/flutter/release/isolate_snapshot_data /data/data/app包名  /app_flutter