flutter 熱更新實現方案—UI資源化(一)
一、Android Studio創建應用flutter項目flutter_hot_update,如下圖:
1、在flutter_hot_update層級下創建flutter模塊包,flutter_hot_update右鍵—>New—>Module—>Flutter Package ,操作如下:
創建三個模塊包分別為flutter_pkg(放置公共組件、配置信息等)、flutter_res(放置資源文件可更新)、flutter_script(放置事件觸發腳本等文件),如下圖,相關文件后面會說明。
創建完成之后,在flutter_hot_update層級下的pubspec.yaml文件中添加flutter_pkg依賴,執行右上角Pub get下圖:
依賴完成之后,在flutter_pkg重新創建MyApp.dart文件創建新的MyApp widget,同時進入主項目的main.dart,刪除MyApp widget相關代碼,把新的MyApp引入進來,如下圖:
修改完成之后,widget_test.dart 會報錯,test文件夾沒有可以刪除,也可以導入文件import 'package:flutter_pkg/MyApp.dart';,消除報紅,
到這里,項目大的框架基本搭建完成。
完成基本項目搭建之后開始安裝http-server(http-server是一個簡單的零配置命令行http服務器),因為flutter_res中的json文件是放在服務器上的,所以需要在本地開啟http服務器來測試。
http-server安裝:
1、先安裝nodes,網址:https://nodejs.org/en/download/current/ ;
2、安裝完成后在cmd中輸入 node -v 檢測:
3、用npm安裝http-server
終端輸入下面的命令:
npm install http-server -g
這里注意要使用-g選項,安裝成全局的,這樣我們才可以在任意的目錄使用。
使用:
http-server [path] [options]
[path]是你想訪問的資源文件夾的路徑,即之前項目中flutter_res文件路徑
[options] 可選配置:
-p 要使用的端口(默認為8080)
-g或--gzip啟用時(默認為“False”),它將用於./public/some-file.js.gz代替./public/some-file.jsgzip壓縮版本的文件,並且該請求接受gzip編碼。
-c設置緩存控制max-age頭的緩存時間(以秒為單位),例如-c10 10秒(默認為'3600')。要禁用緩存,請使用-c-1。
--cors通過Access-Control-Allow-Origin標題啟用CORS
等等還有很多可選配置,這里不在說明,有需要可查詢其他文檔
在cmd中 輸入 http-server /Users/client/Desktop/flutter_hot_update/flutter_res -c-1 -g -p 8080,如下圖: