基于Google Flutter的移動端跨平臺應用實踐.pdf

《基于Google Flutter的移動端跨平臺應用實踐.pdf》由會員分享，可在線閱讀，更多相關《基于Google Flutter的移動端跨平臺應用實踐.pdf（40頁珍藏版）》請在三個皮匠報告上搜索。

1、閑魚Flutter應用實踐閑魚為什么使用FlutterFlutter與Native混合開發實踐Hybrid工程實踐-研發時Hybrid棧管理-運行時Hybrid頁面組件Flutter通用問題實踐詳情頁頁面框架圖片緩存注意事項線上Crash率詳情頁性能對比上線效果小結Flutter，一種新的可能性or性能動態性FlutterPhoneGapReactive NativeWeex高性能方案原理AOTJITMachine CodeScript/BytecodeRelease模式開發模式快速、可預測更快的開發周期高性能 60FPS編程很好的兩端一致性SkiaLinear layout,paint St

2、ructural RepaintingDart復雜交互No JS BridgeOpenGL/Vulkan/Metal閑魚商品詳情頁面(Flutter)混合棧Native組件視頻多圖動畫蓋樓閑魚為什么使用FlutterFlutter與Native混合開發實踐Hybrid工程實踐-研發時Hybrid棧管理-運行時Hybrid頁面組件Flutter通用問題實踐詳情頁頁面框架圖片緩存注意事項線上Crash率詳情頁性能對比上線效果小結Flutter Hybrid工程實踐Flutter默認工程結構Hybrid工程的問題iOS(git&cocoapods)Android(git&gradle)iOS(git

3、&cocoapods)Android(git&gradle)Flutter(git&pub)已有工程目錄Flutter工程目錄?如何基于現有工程搭建？如何支持過渡期的Flutter&Native雙開發模式？如何與現有構建工具集成？工程結構&雙開發模式以前的工程新的工程(Flutter&Native/Weex)iOS(git&cocoapods)Android(git&gradle)Flutter App Repo(pub)iOS(git subm&cocoapods)Android(git subm&gradle)Flutter(git submodule)Flutter TeamiOS(gi

4、t&cocoapods)Android(git&gradle)Native/Weex TeamFlutter產物Submodule引入現有工程Flutter中間產物拆解Flutter構建邏輯，修改gradle和pods腳本Hybrid工程修改點Flutter(?branch&subm)Flutter?iOS?Android(subm)App?flutter.jar(libflutter.so)vm/isolate_ snapshot_instr/data?flutter_assetsengine?repoengine.version?flutter?engine(xianyu branch)?

5、flutterflutter toolsflutter testdart sdksky_engineengine artifacts?Dart Packages?Flutter Plugin?Pub Server1Pub Server2?iOS?podspecaar?snapshot_assembly.s?snapshot_assembly.o?official bugfix?Android?Android?Flutter?flutter_tools?flutter_toolsgradle?Engine編譯（如ARMv7）構建優化私有倉庫雙開發模式混合調試MTL打包閑魚iOS工程修改示例修改工

6、程名為Runner(包括主代碼文件夾)修改Podfile以處理Flutter相關邏輯添加Flutter目錄，并指定Runner的Debug Config為Flutter/Debug.xcconfig，Release.config為Flutter/Release.xcconfig修改Runner的Build Phases添加xcode_backend.sh用于拷貝Flutter.framework，構建App.framework(如果Debug還有snapshot_blob.bin)，以及構建后的thin.嵌入App.framework和Flutter.framework(對應代碼+引擎)嵌入f

7、lutter_assets(資源等)閑魚Android工程修改示例添加包文件夾android/app/src/main以存儲GeneratedPluginRegistrant.javalocal.properties存儲Flutter相關信息引入flutter.gradle閑魚Android支持armeabi修改flutter.gradle，將arm64的處理同arm修改libflutter.so目錄結構為lib/armeabi/libflutter.so修改Android啟動Activity啟動邏輯以保證多個Launchable-Activity的時候的正確啟動。Flutter Hybrid

8、棧管理Hybrid棧管理定義Page1 Native Page2 Flutter Page3 Flutter Page4 Native Page5 Flutter Flutter默認棧管理FlutterActivityBuildContextFlutterViewFlutterNativeViewNavigatorrouterouteroutehistory routesRoutePageBuilder?buildPageFlutter Frameworkpush()pop()remove()replace()Platform自管理棧單實例 /多實例兩種方案的比較FlutterActivity

9、FlutterActivityFlutterActivityPage1Page2Page3dart vmshellplt,ui,io,gpushellplt,ui,io,gpushellplt,ui,io,gpuFlutterNativeViewFlutterViewFlutterViewFlutterViewFlutterActivityFlutterActivityFlutterActivityEnginePage1Page2Page3方案二方案一更快的加載速度數據多頁面復用更簡單頁面隔離性好方案二實現?BuildContextNavigatorrouterouteroutehistory

10、 routesRoutePageBuilder?buildPageFlutter Frameworkpush()pop()remove()replace()?OpenURL?RouterFlutterView(CAEAGLLayer)FlutterViewControllerXFlutterViewController?RootVCNativeVC1(Page1)FlutterWrapperVC1(Page2)NativeVC(Page3)FlutterWrapperVC4(Page4)?RootActivityNativeVC1(Page1)FlutterWrapperActivity1(P

11、age2)NativeVC(Page3)FlutterWrapperActivity4(Page4)ChannelRenderSurfaceViewXFlutterView?Channel?FlutterViewRenderActivity剝離轉場動畫單例移動內部棧跟隨Native托管棧OpenUrl支持Hybrid頁面組件Texture自定義視頻播放器參考:https:/ Texture自定義視頻播放器Flutter-Render(layer_tree)Rasterizer-Draw(layer_tree)LayerTree-Paint()ContainLayer TextureLayer

12、OtherLayer OtherLayer SKCanvas-Draw FlutterFI建_前屏幕ua下xlayer_tree，并調用Render渲染 Rasterizer RE統GPUGlK概念不一n，這里其U就g一個layer_treex渲染(Paint 并呈v(Present S屏幕上x過y Layer)reeg一個渲染m，Paint方r將會遞歸x遍L每一個節s并e行節sxPaint方r)extureLayerg一個t殊xLayer葉T節s，調用通過不P平臺xUv可以UvExternal_)exturex渲染 dixLayer最z都g調用(KIAxCanvas來Uv渲染，我CxExte

13、rnal_texture，會封裝成一個(KImage，A給(KCanvas渲染。使用TextureLayer參考video_player插件：https:/pub.dartlang.org/packages/video_playerTexture對接自定義視頻播放器1:設置一個EventChannel，用于向Flutter通知視頻狀態變化2:設置一個MethodChannel，用于控制video player3:設置一個FlutterTexture，用于顯示視頻幀4:從Native播放器中提取出video frame，貼到FlutterTexture.復用Native組件FlutterNati

14、vePlatform Channels注意Layer沖突問題新建Window或者Activity裝載Native組件開天窗？還沒成功閑魚為什么使用FlutterFlutter與Native混合開發實踐Hybrid工程實踐-研發時Hybrid棧管理-運行時基于Texture對接自定義視頻組件Flutter通用問題實踐詳情頁頁面框架圖片緩存注意事項線上Crash率詳情頁性能對比上線效果小結Flutter詳情頁頁面框架頁面框架簡單的頁面：動態組裝能力InheritedWidget共享數據統一協議（下頁詳述）更復雜的交互頁面：考慮ReduxStreamDataServer?DataBindProvid

15、er(InheritedWidget)?WidgetsList?DataBindProvider.of(context).dataBindchildchildrenhold統一協議Mirror(反射)?Flutter(Dart)JavaDO?templateAndroid?IOS?templatetemplateServerTree shaking不支持反射class PCommentReplyRes 用自動化代碼工具減少Json反射工作量圖片緩存圖片緩存方案當前默認的圖片緩存策略（官方在優化中）：“class ImageCache Implements a least-recently-us

16、ed cache of up to 1000 images.The maximum size can be adjusted using maximumSize.”問題：內存占用，容易Crash圖片緩存方案方案1，只有單頁面時，簡單處理方案：class XWidgetsFlutterBinding extends WidgetsFlutterBinding override ImageCache createImageCache()ImageCache cache=new ImageCache();cache.maximumSize=110;/the maximum size of cache

17、d images.return cache;方案2，官方正在開發中的基于空間大小的緩存參考：https:/ set maximumSize(int value)=set maximumSizeBytes(int value).1，修改最大緩存圖片的數量，提供自定義Cache的Hook點2，圖片尺寸自適應剪裁圖片寬度統一泛化為一系列標準尺寸，如 60,128，234 640,720,960,WebPQuality方案3，增加磁盤緩存：共用Native圖片庫磁盤緩存優點：簡化磁盤緩存管理邏輯，可復用Native邏輯內存緩存還在Flutter端可以為多圖傳輸提供便利閑魚為什么使用FlutterFlu

18、tter與Native混合開發實踐Hybrid工程實踐-研發時Hybrid棧管理-運行時基于Texture對接自定義視頻組件Flutter通用問題實踐詳情頁頁面框架圖片緩存注意事項線上Crash率詳情頁性能對比上線效果小結問題收斂內存問題icu dat問題視頻兼容問題截圖問題armv7問題字體問題 早期的問題：User Crash率：百分之一小于 萬分之一統計基準用戶數：數百萬達到生產穩定性Flutter相關問題處理思路構建問題觀察日志(打開flutter 插件中的verbose logging)調試flutter_tools考察flutter.gradle/xcode_backend.sh是

19、否OK頁面異?；蛘逤rash考慮FlutterView/FlutterViewController生命周期是否正?？疾飚a物是否正常符號化后定位問題gitter聊天室和github issuesFlutter相關問題處理思路閱讀和修改源代碼flutter插件相關查看https:/ 4.x,5.x iPhone 5c,6s 注：高端機型區分不明顯AndroidLenovo 4.4.4Lenovo 4.4.4NativeFlutterCPU16.125.43dvm memory55.0090.83native memory96.5091.43total memory152.00182.58FPS42

20、.6032.62SM2.331.14Oppo 4.3NativeFlutterCPU32.0026.02dvm memory111.71289.10native memory104.0094.07total memory216.14383.60FPS16.9730.46SM4.7838.56Xiaomi 5.0.2NativeFlutterCPU32.327.31dvm memory228.00111.86native memory134.00130.80total memory362.00242.57FPS22.1344SM17.6858.29Huawei 7.0NativeFlutterC

21、PU16.747.91dvm memory395.92197.08native memory143.00233.24total memory539.08431.05FPS38.2246.2SM45.7858.09iOSiphone 5c 9.0.1NativeFlutterCPU50.27%47.3%Memory149.4127.28Traffic total2934916757FPS39.7153.08GPU4.36%8.78%iphone 6s 10.3.2NativeFlutterCPU30.31%27.42%Memory247.24231.66Traffic total2486817686FPS47.4750.08GPU21.89%26.25%注：以新老商品詳情頁為測試對象，相同的研發團隊和相似的開發周期。小結效果成本成熟度