乾貨 | 京東技術中臺的Flutter實踐之路

在 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

搭建PUB私服倉庫

~ $ git clone 

~ $ cd pub_server

~/pub_server $ pub get

...

~/pub_server $ dart example/example.dart -d /tmp/package-db

Listening on 



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



    $ export PUB_HOSTED_URL=

name: hello_plugin //plugin名稱 

description: A new Flutter plugin. //介紹

version: 0.0.1//版本號

author: xxx <xxx@xxx.com>//作者和郵箱

homepage:  //元件的介紹頁面

publish_to: //倉庫上傳地址

pub publish --dry-run

/build

dependencies:

hello_plugin:

  hosted:

    name: hello_plugin

    url:  

    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: 

For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

JDFlutter熱更新實踐

Flutter App的包結構

Flutter包的初始化流程

• 配置了一些環境資料，比如各個核心包的路徑，主要是提供給其他一些模組全域性呼叫

• 檢查 asset 下 Flutter 包的完整性，主要是上面介紹的一些核心包，一旦缺少核心的一些庫，就會直接拋異常。開發過程中我們經常因為配置導致有些檔案沒有打包進去，然後會直接 crash，就是在這裡觸發的，具體程式碼如下：

• 解壓部分 asset 下的資源到 data 分割槽，以下是一些片段的程式碼，那為什麼要解壓呢？放在 asset 下也是可以透過 assetManager 讀取的。這裡 google 應該是從效能角度要求解壓的，因為頻繁的使用 assetManager 讀取 asset 是很容易造成多執行緒阻塞的，一旦阻塞了將會導致整個 Flutter 業務全部無法渲染，所以需要解壓一些核心的資源庫，而不是解壓了所有的資源 (例如圖片就沒有解壓)

執行原理

熱修復實驗

• 先開啟Flutter頁面，預設會載入asset下的包，並解壓到data分割槽
• 修改一個Flutter工程，並編譯程式碼，最終在工程目錄 my_flutter/.android/Flutter/build/intermediates/flutter/release中看到打包生成的檔案

• 這麼檔案目錄中只有 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

• 關閉 Flutter 頁面，在 Task 中殺掉程式，回來後重新開啟 Flutter 頁面，就能看到改動的效果，圖片資源是存放在 flutter_asset 目錄的，將圖片放到這個目錄，同樣能更新圖片

Google熱修復設計

熱修復步驟

• 在頁面初始化時，檢查固定的下載更新目錄有沒有業務升級包，從程式碼來看，必須在manifest中開啟該功能，設定DynamicPatching

• 每次 init 的時候都會觸發檢查 data 分割槽的 app_flutter 包，如果不存在就會從 aaset 目錄解壓出來，而升級包的替換就是在這步完成的，按照邏輯會優先檢查升級目錄有沒有包存在，如果存在則優先從升級目錄解壓，如果不存在還是從 asset 目錄解壓；

• 當然在檢查到有升級包時，會對升級包的一些配置做校驗，主要是 manifest.json 檔案，裡面會包含 buildNumber/baselineChecksum 欄位，同時也會對"isolate_snapshot_data", "isolate_snapshot_instr", "flutter_assets/isolate_snapshot_data"等檔案做 CRC32 校驗。

• 升級後的版本時間戳是從配置的 manifest.json 檔案中讀取 patchNumber 和檔案下載時間確定的，完成檔案覆蓋後會重新生成。

如何配置伺服器

整體流程

存在的缺陷

• 過於定製化，全部在引擎完成，很難適配一些特殊的需求定製；
• 不支援現在比較主流的升級流程，諸如灰度和白名單等功能；
• 版本號的維度不好控制，同時不能做版本回滾等操作。

JDFlutter如何實現熱修復

實現原理

熱修復規劃

未來展望

點選“ 京東雲 ”瞭解京東雲移動跨端開發解決方案

歡迎點選“ 京東雲 ”瞭解更多精彩內容