flutter 熱更新實現方案 UI資源化(一)

2022-06-21 17:48:12 字數 1580 閱讀 3944

demo**

一、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下圖:

到這裡,專案大的框架基本搭建完成。

完成基本專案搭建之後開始安裝http-server(http-server是乙個簡單的零配置命令列http伺服器),因為flutter_res中的json檔案是放在伺服器上的,所以需要在本地開啟http伺服器來測試。

http-server安裝:

1、先安裝nodes,**:

;2、安裝完成後在cmd中輸入 node -v 檢測:

3、用npm安裝http-server

使用: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

等等還有很多可選配置,這裡不在說明,有需要可查詢其他文件

flutter 熱更新實現方案—ui資源化(二)中**說明

flutter 熱更新實現方案 UI資源化(二)

demo flutter 熱更新實現方案 ui資源化 一 開啟http server後,回到專案。這裡需要注意,專案需要依賴dio,path provider,path provider package 提供一種平台無關的方式以一致的方式訪問裝置的檔案位置系統。新增依賴,如下圖 為了系統容器可配置,...

Flutter 應用熱更新

不過,熱更新雖然具有很大的優點,但是濫用熱修復也會給應用帶來不好的體驗,並且蘋果對於熱更新和修復是明令禁止的,所以熱更新主要針對的是國內android市場。目前,flutter對外開放的sdk是不支援熱更新的,但是在flutter的原始碼裡有一部分預埋的熱更新相關的 可以通過一些必要的手段在andr...

war包熱更新 electron 熱更新實現方式

1 electron是乙個外殼 html js css 資料報 按照官方的邏輯,採用electron builder的時候 會直接打包成asar 如果單單是打包html檔案也就算了,關鍵裡面還打包的node module 整整100mb 我只更新個html,不可能對node module重新打包吧。...