哥哥手把手教你Flutter熱更新大招,來了老弟

關于Flutter,我們重點關注assets,jni,libs 這 3 個目錄中,其他的文件都是 Nactive層殼工程的產(chǎn)物。

jni :該目錄下存在文件 libflutter.so,該文件為 Flutter Engine (引擎) 層的 C++實現(xiàn),提供skia(繪制引擎),Dart,Text(紋理繪制)等支持;

libs:該目錄下存在文件為 flutter.jar,該文件為 Flutter embedding (嵌入) 層的 Java實現(xiàn),該層提供給 Flutter 許多Native層平臺系統(tǒng)功能的支持,比如創(chuàng)建線程。

assets:該目錄下分為兩部分:

1. flutter_assets 目錄:該目錄下存放Flutter 我們應用層的資源,包括images,font等;

2. isolate_snapshot_data,isolate_snapshot_instr,vm_snapshot_data,vm_snapshot_instr 文件:這 4 個文件分別對應 isolate,VM 的數(shù)據(jù)段和指令段文件。這四個文件就是我們自己的 Flutter 代碼的產(chǎn)物了。

一,F(xiàn)lutter 代碼的熱更新

代碼實現(xiàn)

public class FlutterUtils { private static String TAG = "FlutterUtils.class"; private static String flutterZipName = "flutter-code.zip"; private static String fileSuffix = ".zip"; private static String zipPath = Environment.getExternalStorageDirectory().getPath() + "/k12/" + flutterZipName; private static String targetDirPath = zipPath.replace(fileSuffix, ""); private static String targetDirDataPath = zipPath.replace(fileSuffix, "/data"); /** * Flutter 代碼熱更新第一步: 解壓 Flutter 的壓縮文件 */ public static void unZipFlutterFile() { Log.i(TAG, "unZipFile: Start"); try { unZipFile(zipPath, targetDirPath); Log.i(TAG, "unZipFile: Finish"); } catch (Exception e) { e.printStackTrace(); } } /** * Flutter 代碼熱更新第二步: 將 Flutter 的相關文件移動到 AppData 的相關目錄,APP啟動時調用 * * @param mContext 獲取 AppData 目錄需要 */ public static void copyDataToFlutterAssets(Context mContext) { String appDataDirPath = PathUtils.getDataDirectory(mContext.getApplicationContext()) + File.separator; Log.d(TAG, "copyDataToFlutterAssets-filesDirPath:" + targetDirDataPath); Log.d(TAG, "copyDataToFlutterAssets-appDataDirPath:" + appDataDirPath); File appDataDirFile = new File(appDataDirPath); File filesDirFile = new File(targetDirDataPath); File[] files = filesDirFile.listFiles(); for (File srcFile : files) { if (srcFile.getPath().contains("isolate_snapshot_data") || srcFile.getPath().contains("isolate_snapshot_instr") || srcFile.getPath().contains("vm_snapshot_data") || srcFile.getPath().contains("vm_snapshot_instr")) { File targetFile = new File(appDataDirFile + "/" + srcFile.getName()); FileUtil.copyFileByFileChannels(srcFile, targetFile); Log.i(TAG, "copyDataToFlutterAssets-copyFile:" + srcFile.getPath()); } } Log.i(TAG, "copyDataToFlutterAssets: Finish"); } /** * 解壓縮文件到指定目錄 * * @param zipFileString 壓縮文件路徑 * @param outPathString 目標路徑 * @throws Exception */ private static void unZipFile(String zipFileString, String outPathString) { try { ZipInputStream inZip = new ZipInputStream(new FileInputStream(zipFileString)); ZipEntry zipEntry; String szName = ""; while ((zipEntry = inZip.getNextEntry()) != null) { szName = zipEntry.getName(); if (zipEntry.isDirectory()) { szName = szName.substring(0, szName.length() - 1); File folder = new File(outPathString + File.separator + szName); folder.mkdirs(); } else { File file = new File(outPathString + File.separator + szName); if (!file.exists()) { Log.d(TAG, "Create the file:" + outPathString + File.separator + szName); file.getParentFile().mkdirs(); file.createNewFile(); } FileOutputStream out = new FileOutputStream(file); int len; byte[] buffer = new byte[1024]; while ((len = inZip.read(buffer)) != -1) { out.write(buffer, 0, len); out.flush(); } out.close(); } } inZip.close(); } catch (Exception e) { Log.i(TAG,e.getMessage()); e.printStackTrace(); } } /** * 使用FileChannels復制文件。 * * @param source 原路徑 * @param dest 目標路徑 */ public static void copyFileByFileChannels(File source, File dest) { FileChannel inputChannel = null; FileChannel outputChannel = null; try { inputChannel = new FileInputStream(source).getChannel(); outputChannel = new FileOutputStream(dest).getChannel(); outputChannel.transferFrom(inputChannel, 0, inputChannel.size()); refreshMedia(BaseApplication.getBaseApplication(), dest); } catch (Exception e) { e.printStackTrace(); } finally { try { inputChannel.close(); outputChannel.close(); } catch (IOException e) { e.printStackTrace(); } } } /** * 更新媒體庫 * * @param cxt * @param files */ public static void refreshMedia(Context cxt, File... files) { for (File file : files) { String filePath = file.getAbsolutePath(); refreshMedia(cxt, filePath); } } public static void refreshMedia(Context cxt, String... filePaths) { MediaScannerConnection.scanFile(cxt.getApplicationContext(), filePaths, null, null); }}

代碼分析:

在我們的 Native 項目中,會在 FlutterMainActivity 中,通過調用 Flutter 這個類來創(chuàng)建 View:

flutterView = Flutter.createView(this, getLifecycle(), route);

layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,

FrameLayout.LayoutParams.MATCH_PARENT);

addContentView(flutterView, layoutParams);

查看 Flutter 類代碼,發(fā)現(xiàn) Flutter 類主要做了幾件事:

1. 使用 FlutterNative 加載 View,設置路由,使用 lifecycle 綁定生命周期;

2. 使用 FlutterMain 初始化,重點關注這里。

public static FlutterView createView(@NonNull final Activity activity, @NonNull Lifecycle lifecycle, String initialRoute) {

FlutterMain.startInitialization(activity.getApplicationContext());

FlutterMain.ensureInitializationComplete(activity.getApplicationContext(), (String[])null);

FlutterNativeView nativeView = new FlutterNativeView(activity);

所以,真正初始化的相關代碼是在 FlutterMian 中:

public static void startInitialization(Context applicationContext, FlutterMain.Settings settings) {

if (Looper.myLooper() != Looper.getMainLooper()) {

throw new IllegalStateException("startInitialization must be called on the main thread");

} else if (sSettings == null) {

sSettings = settings;

long initStartTimestampMillis = SystemClock.uptimeMillis();

initConfig(applicationContext);

initAot(applicationContext);

initResources(applicationContext);

System.loadLibrary("flutter");

long initTimeMillis = SystemClock.uptimeMillis() - initStartTimestampMillis;

nativeRecordStartTimestamp(initTimeMillis);

}

}

在 startInitialization 中,主要執(zhí)行了三個初始化方法 initConfig(applicationContext),initAot(applicationContext),initResources(applicationContext),最后記錄了執(zhí)行時間;

在 initConfig 中:

private static void initConfig(Context applicationContext) {

try {

Bundle metadata = applicationContext.getPackageManager().getApplicationInfo(applicationContext.getPackageName(), 128).metaData;

if (metadata != null) {

sAotSharedLibraryPath = metadata.getString(PUBLIC_AOT_AOT_SHARED_LIBRARY_PATH, "app.so");

sAotVmSnapshotData = metadata.getString(PUBLIC_AOT_VM_SNAPSHOT_DATA_KEY, "vm_snapshot_data");

sAotVmSnapshotInstr = metadata.getString(PUBLIC_AOT_VM_SNAPSHOT_INSTR_KEY, "vm_snapshot_instr");

sAotIsolateSnapshotData = metadata.getString(PUBLIC_AOT_ISOLATE_SNAPSHOT_DATA_KEY, "isolate_snapshot_data");

sAotIsolateSnapshotInstr = metadata.getString(PUBLIC_AOT_ISOLATE_SNAPSHOT_INSTR_KEY, "isolate_snapshot_instr");

sFlx = metadata.getString(PUBLIC_FLX_KEY, "app.flx");

sFlutterAssetsDir = metadata.getString(PUBLIC_FLUTTER_ASSETS_DIR_KEY, "flutter_assets");

}

} catch (NameNotFoundException var2) {

throw new RuntimeException(var2);

}

}

在 initResources 中:

sResourceExtractor = new ResourceExtractor(applicationContext);

sResourceExtractor.addResource(fromFlutterAssets(sFlx)).addResource(fromFlutterAssets(sAotVmSnapshotData)).addResource(fromFlutterAssets(sAotVmSnapshotInstr)).addResource(fromFlutterAssets(sAotIsolateSnapshotData)).addResource(fromFlutterAssets(sAotIsolateSnapshotInstr)).addResource(fromFlutterAssets("kernel_blob.bin"));

if (sIsPrecompiledAsSharedLibrary) {

sResourceExtractor.addResource(sAotSharedLibraryPath);

} else {

sResourceExtractor.addResource(sAotVmSnapshotData).addResource(sAotVmSnapshotInstr).addResource(sAotIsolateSnapshotData).addResource(sAotIsolateSnapshotInstr);

}

sResourceExtractor.start();

在 ResourceExtractor 類中,通過名字就能知道這個類是做資源提取的。把 add 的 Flutter 相關文件從 assets 目錄中取出來,該類中 ExtractTask 的 doInBackground 方法中:

File dataDir = new File(PathUtils.getDataDirectory(ResourceExtractor.this.mContext));

這句話指定了資源提取的目的地,即 data/data/包名/app_flutter,如下:

如圖,可以看到該目錄是的訪問權限是可讀可寫,所以理論上,我們只要把自己的 Flutter 產(chǎn)物下載后,從內(nèi)存 copy 到這里,便能夠實現(xiàn)代碼的動態(tài)更新

二,F(xiàn)lutter資源的熱更新

我們的App安裝到手機上后,是很難再修改 Assets 目錄下的資源,所以關于資源的替換,目前的方案是使用 Flutter 的 API :Image.file() 來從存儲卡中讀取圖片。

通常我們的 Flutter 項目中應當存有關于 App 的圖片,盡量保證在熱更新的時候使用已經(jīng)存在的圖片,

其次,我們可以使用 Image.network() 來加載網(wǎng)絡資源的圖片,

如果還不能滿足需求,兜底的方案就是使用 Image.file(),將資源圖片放到Zip目錄下一起下發(fā),并在Flutter代碼中使用 Image.file() 來加載。

通過 Native 層方法拿到圖片文件夾的內(nèi)存地址 dataDir;

判斷圖片是否存在,存在則加載,不存在則加載已經(jīng)存在的圖片占位;

new File(dataDir + 'hotupdate_test.png').existsSync()

? Image.file(new File(dataDir + 'hotupdate_test.png'))

: Image.asset("images/net_error.png"),

在 Flutter 代碼產(chǎn)物替換中,因為替換的 4 個文件皆為直接加載到內(nèi)存中的引擎代碼,所以這部分優(yōu)化空間有限。但在資源的熱更新中,資源是從Assets取得,所以這里應該有更優(yōu)的方案。

Flutter 的熱更新意味著可以在在App的一個入口里,像 H5 一樣無窮的嵌入頁面,但又有和原生媲美的流暢體驗。

未來 Flutter 熱更新技術如果成熟,應用開發(fā)可能只需要 Android端和 IOS端實現(xiàn)本地業(yè)務功能模塊的封裝,業(yè)務和UI的代碼都放在 Flutter 中,

便能夠真正的實現(xiàn)移動兩端一份業(yè)務代碼,并且賦予產(chǎn)品在不影響用戶體驗的情況下,擁有動態(tài)部署APP內(nèi)容的能力。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,882評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,208評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,746評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,666評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,477評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,960評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,047評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,200評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,726評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,617評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,807評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,327評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,049評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,425評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,674評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,432評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,769評論 2 372

推薦閱讀更多精彩內(nèi)容