國內flutter使用領跑者，閒魚公開多年 Flutter 實踐經驗，詳細解讀別錯過

阿里妹導讀：Flutter從誕生到如今，已經成爲了跨端開發的領跑者。
閒魚應用在flutter可以以模塊形式存在前，進行了很長時間的混合app架構的探索，對原生工程進行較多改動，在官方推出flutter模塊模式後，咱們進行了大量調研，最終推出了一套開箱即用的混合工程腳手架flutter-boot，幫助你們快速搭建混合工程。

Google Flutter 產品經理推薦，精解Flutter企業級實踐，揭祕億級流量背後的技術祕籍，工程師不容錯過的學習寶典的《Flutter in action》，今天正式發佈，文末下載。

做者 | 興往、向志明、馬引

背景

國內外愈來愈多的公司走上了flutter探索之路。Flutter的主要開發模式分紅兩種，一種是獨立app的模式，以flutter爲主，原生工程會被包含在flutter工程下；另外一種是讓flutter以模塊（flutter module）的形式存在，分別集成在已有的iOS和android原生應用下，此時原生工程能夠在任何的目錄結構下，和flutter工程地址不產生關聯，但須要在原生工程結構中聲明flutter工程的本地地址。

簡介

flutter-boot核心解決了混合開發模式下的兩個問題：flutter混合開發的工程化設計和混合棧。那flutter-boot是如何解決的呢？

首先在工程化設計的問題上，flutter-boot創建了一套標準的工程建立流程和友好的交互命令，當流程執行完成後，即擁有了混合開發的標準工程結構，這一套工程結構可以幫助咱們同時擁有flutter和native（原生）兩種開發視角，本地flutter開發和雲端flutter構建兩種flutter集成模式，其效果如圖：

另外在混合棧的問題上，flutter-boot能自動注入混合棧依賴，同時將核心的混合棧接入代碼封裝後注入到原生工程內，在用戶按提示插入簡單幾行模版代碼後，便可看到混合棧的效果。 使用flutter-boot搭建的混合工程，開箱便可使用，接下來讓咱們瞭解下flutter-boot解決這些問題的詳細過程。

開源地址
https://github.com/alibaba-flutter/flutter-boot

工程化設計

瞭解官方的Add Flutter to existing apps項目

在瞭解flutter-boot的工程化設計細節前，咱們須要對Google官方提供的Add Flutter to existing apps方案有一個初步的瞭解。Add Flutter to existing apps項目會引導咱們以module的形式建立flutter，module形態的flutter的工程結構以下：

some/path/
  my_flutter/
    lib/main.dart
    .ios/
    .android/

在官方的工程結構下，.ios和.android是運行flutter時的模版工程，在flutter工程目錄下運行時即經過這兩個工程來啓動應用。那咱們如何讓原生工程和產生關聯呢？這裏的關聯會分紅三個部分，分別是flutter的framework，flutter的業務代碼，和flutter的插件庫。其中flutter插件庫分紅 flutter plugin native（即插件原生代碼）和flutter plugin dart（即插件的dart代碼）兩個部分。這四部分的差別在於：

所以flutter framework只須要在依賴管理中聲明便可，flutter plugin native能夠直接以源碼的方式集成，flutter plugin dart只有在被業務代碼引用時纔有效，所以和業務代碼同樣，須要支持dart代碼的調試模式和發佈模式，所以dart代碼的關聯會侵入到app的構建環節，根據app構建的模式來決定dart代碼的構建模式。

具體的實現，拿iOS來舉例，咱們會在podfile文件中增長一個自定義的ruby腳本podfilehelper的調用，podfilehelper會聲明flutter framework的依賴，聲明flutter plugin native的源碼引用，同時聲明業務代碼的路徑。

接下來會介入構建流程，在xcode的build phase內加入shell腳本xcode_backend的調用，xcode_backend會根據當前構建模式，來產出dart構建產物。

flutter-boot的補充

對於官方的混合工程項目，咱們在體驗後發現有以下的問題：

1. 文件或配置的添加爲手動添加，流程較長。
2. 不支持在flutter倉庫下運行原生工程。
3. 不支持flutter以獨立代碼倉庫部署時的遠端機器構建。

所以在flutter-boot腳手架中，爲了解決這些問題，咱們把混合工程的部署分爲create，link，remotelink，update四個過程。

| create

create過程目的在於幫助咱們搭建一個flutter module，包括flutter module的建立和git倉庫的部署，flutter module建立命令調用前，咱們會作基礎的檢查來讓工程位置和命名的規範知足官方的條件。在git倉庫部署時，咱們會在gitignore中忽略部分文件，同時咱們會對倉庫的狀態進行檢查，在倉庫爲空時，直接添加文件，在倉庫非空時，會優先清理倉庫。

| link

link過程目的在於關聯本地的原生工程和flutter工程。關聯的過程當中，咱們會先請求獲取flutter工程的地址和原生工程的地址，而後咱們將上面提到的須要手動集成的部分經過腳本的方式自動集成；爲了得到flutter開發視角（即flutter工程下運行原生工程），咱們將原生工程進行了軟連接，連接到flutter工程的ios目錄和android目錄，flutter在運行前會找到工程下的ios或android目錄而後運行，在flutter工程下運行iOS工程會存在一個限制，即iOS工程的target須要指定爲runner，爲了解決這個問題，咱們將原生工程的主target進行了複製，複製了一份名爲runner的target。

同時，爲了支持遠程構建的模式，咱們flutter倉庫本地路徑的聲明根據構建模式進行了區分，封裝在自定義的依賴腳本中，例如在iOS工程內，咱們會添加fbpodhelper.rb腳本文件。而後將flutter倉庫本地路徑添加到了配置文件fbConfig.local.json中。

| remotelink

update remotelink過程目的在於遠端構建模式下，可以獲取flutter倉庫的代碼，並在遠端機器上進行構建。在遠端構建模式下，咱們會侵入依賴管理的過程，在依賴獲取時，拉取flutter倉庫的代碼，將代碼放置在原生工程的.fbflutter目錄下，並將該目錄聲明爲flutter倉庫本地路徑，拉取flutter代碼並進行本地部署的過程，咱們稱之爲update過程。

這樣在遠端構建時就能和本地構建一模一樣。 那遠端模式和本地模式如何區分呢？爲了區分遠端模式與本地模式，咱們將遠端的flutter倉庫信息記錄在fbConfig.json，同時在gitignore中忽略fbConfig.local.json文件，這樣只須要初始化混合工程的工程師運行一次remotelink，其餘的開發協同者將不用關注遠端構建的配置流程。

| init

爲了方便快速搭建，咱們提供了一個命令集合，命名爲init，咱們將必備的環節以命令行交互的模式集成在了init命令中。

混合棧

混合棧是閒魚開源的一套用於flutter混合工程下協調原生頁面與flutter頁面交互的框架，目前是混合開發模式下的主流框架。在混合棧開源後，咱們關注到大量開發者在集成混合棧時會產生各類環境配置或代碼添加致使的集成問題。所以咱們決定提供一套快速集成的方案。要作到快速集成咱們面臨兩個問題：

1. flutter和混合棧的版本兼容；
2. 混合棧demo代碼封裝及插入。

版本兼容問題

目前混合棧發佈版本爲0.1.52，支持flutter 1.5.4。當flutter升級時混合棧勢必要進行適配，即咱們集成的混合棧版本也須要變動。所以咱們將混合棧的版本配置經過文件進行維護，記錄當前flutter所須要的混合棧版本。在第一版的flutter-boot中，咱們限定了混合棧的版本號，在新版本混合棧發佈時，咱們將開放版本選擇的功能。

代碼封裝及插入問題

在調研了混合棧的使用過程後，咱們將混合棧須要的demo代碼分紅了四個部分：

1. flutter引擎的託管；
2. 頁面路由的配置 ；
3. demo形式的dart頁面 ；
4. 原生的測試跳轉入口。

| flutter引擎的託管

引擎的託管咱們依賴於應用的初始化，因爲初始化過程隨着應用的複雜程度提高而提高，所以目前咱們提供了一行代碼做爲接口，使用者在應用初始化時加入這一行代碼便可完成託管。

| 頁面路由的配置

demo形式的dart頁面，路由配置即路由到某個標識符時，flutter或原生頁面須要識別並跳轉相應頁面。路由的配置須要在原生和flutter兩側進行部署。在原生側，咱們將混合棧的demo路由代碼進行了精簡，而後添加在了原生工程的固定目錄下。因爲iOS僅添加代碼文件是不會被歸入構建範圍的，所以咱們封裝了一套iOS側的代碼添加工具來實現文件的插入。在flutter側咱們對main.dart文件進行了覆蓋，將帶有路由邏輯的main.dart集成進來，同時提供了demo dart頁面的建立邏輯。

| 原生的測試跳轉入口

爲了方便使用者快速看到混合工程的跳轉模式，咱們在iOS和android雙端封裝了一個入口按鈕和按鈕的添加過程，使用者在測試的頁面手動加入一行代碼，便可看到跳轉flutter的入口。

效果

在使用flutter-boot前，開發者可能要花費數天來進行混合工程搭建，如今，使用者只須要調用一個命令，加入兩行代碼便可完成混合工程的搭建，大大下降了開發者的開發成本。

但flutter-boot的使命還未達成，咱們指望使用者能更加流暢的進行flutter開發，將來咱們會優化多人協同的開發流程，完善持續集成環境的搭建，讓使用者擁有更佳的開發體驗。

最後，福利來了，如今承載億級流量的閒魚將多年最佳實踐經驗整理成冊，《Flutter in action》 面世啦，本篇內容僅爲書中的精華之一！

4大精彩看點，快速瞭解《Flutter in action》

Flutter開源工具大集合

閒魚Flutter應用框架Fish Redux、開發利器AspectD、FlutterBoost等一衆開發工具正式開源，如今《Flutter in action》一次幫你找全了。

開源地址+技術解析，手把手教你Flutter應用框架和混合開發原理！

閒魚Flutter企業級應用實踐

隨着無線，IoT的發展，5G的到來，移動研發愈加向多端化發展。傳統的基於Native＋Web＋服務端的開發方式，研發效率低下，顯然已經沒法適應發展須要。

而Flutter是Google開源的跨端便攜UI工具包，除了具備很是優秀的跨端渲染一致性，還具有很是高效的研發體驗，豐富的開箱即用的UI組件，以及跟Native媲美的性能體驗。因爲它的衆多優點，也使得Flutter成爲了近些年來熱門的新技術。

在這本書中將詳細講解閒魚Flutter＆FaaS雲端一體化架構，和閒魚基於Flutter的架構演進與創新，學習一套全面的Flutter架構應用方案。

混合開發實踐指南

你將在這裏看到閒魚技術團隊利用Flutter技術改造和上線複雜業務的混合工程改造實踐、抽取Flutter依賴到遠程的實現細節、以及使用Plugin橋接獲取設備信息、使用基礎網絡庫等混合開發實踐指南。

這些實踐遍及閒魚各大業務線和應用場景，爲你使用Flutter打造本身的研發體系探索一條實踐之路。

Flutter的深刻進階教程

在得到開源工具與開發實踐指南後，你還將在本書中學到Flutter的更多應用場景。

它們包括瞭如何低成本實現Flutter富文本、設計一個高準確率的Flutter埋點框架、Flutter外接紋理、可定製化的Flutter相冊組件等等深刻進階內容。

如何下載

Google Flutter 產品經理推薦，揭祕億級流量背後的技術祕籍，工程師不容錯過的學習寶典，包括開源工具、峯會直達、混合開發、深刻進階等，

私信我【閒魚】或這關注我查看介紹
便可得到完整資源。

鳴謝

本文來自雲棲社區合做夥伴「阿里技術」，瞭解相關信息能夠關注「阿里技術」。