歡迎光臨
每天分享高質量文章

已有 Android 專案整合 Flutter 尋坑記

作者:dengyin2000

連結:https://www.jianshu.com/p/d9cc2ff365c8

背景

Flutter作為谷歌下一代主推的全平臺UI框架,具有很多的優點:

  • 支援全平臺,包括Android、iOS、Web甚至桌面端。

  • 全平臺都基於同一套程式碼庫,區別於React Native的learn once, write everywhere。

  • 媲美原生的效能。

  • 牛逼的開發效率,這個深有體會,目前筆者公司負責的一個電商app,隨便修改一行程式碼build一次在2018款macbook pro 15下都需要4分鐘左右,Flutter可以做到不到一秒。

  • 豐富的元件庫,比Android的元件更加豐富。

  • 國內已經有很多大廠已經有使用Flutter在他們的核心專案中了, 比如阿裡的鹹魚,騰訊的now直播,京東商城等等。

今年整個網際網路寒冬,很多公司都在裁員,移動端跨平臺方案能夠一定程度上節約開發成本,而且android ios都是一套程式碼,也避免了分端開發導致兩端邏輯可能不一致的問題。

嘗鮮

按照官方檔案的指引https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps,很快我就完成了整合,但是一執行,進入flutter頁面時,總是黑屏過段時間就閃退了,檢視崩潰資訊時發現應該是flutter so庫沒有打包進去,這個問題是因為我們的專案是隻打包armeabi單abi。而flutter只提供armeabi-v7a以上的so。所以我們把abi改成armeabi-v7a就可以順利打包flutter的so庫了,如下:

    splits {
        abi {
            enable !project.hasProperty('runx86')
            reset()
            include 'armeabi-v7a' 
            universalApk false
        }
    }

滿心歡喜的趕緊build再次執行,結果還是一樣,進入flutter頁面,還是黑屏一下,然後閃退,這時候出現的error log是:

VM snapshot must be valid.
Check failed: vm. Must be able to initialize the VM.

WTF:google之,發現一片非常有用的文章https://github.com/flutter/flutter/issues/19818。在這篇文章中提到:

vmfailed

看起來是說打包的apk的assets中缺少了flutter_assets,flutter_assets裡面是什麼?我猜他媽的肯定是dart vm還有dart的程式碼。這個哥們也比較實在,他說他也不知道為什麼沒有打包進去。於是按照這個哥們的方法,手工把flutter module編譯出來的flutter_assets的複製到安卓專案中,然後重新編譯打包,我手指微微顫抖的點開flutter頁面,我操,flutter頁面終於出來,我第一次流下了幸福的眼淚。但是幸福過後,還是要思考,我不能每次都手工複製吧,寫個指令碼複製也行,但是還是顯得不太專業,我想要的是直接在IDE上點build按鈕就能生成一個完美的apk包。

接著繼續檢視上面這個issue 19818(這個number還蠻吉利的),有個兄弟說是如果你的專案中有用到productFlavors的話,你的flutter專案也必須要配置相同的productFlavors才會自動把flutter_assets打包進去。按照下麵這個方式進行程式碼調整:

productFlavor

build打包執行,f**k,還是不行。flutter_assets怎樣都打包不進apk裡面。然後就是無盡的嘗試,終於發現有一個中國的兄弟遇到跟我類似的問題https://www.jianshu.com/p/3a88d9b993cd

fluttermaster

看起來是需要切到flutter的master分支上才可以,目前我是在stable分支上,那就切把,趕緊執行flutter channel master。這個過程需要翻牆,或者新增flutter中國映象。要不然會下載不成功。切成功之後,試了無數次,還行不行。怎麼辦,我已經生無死戀……………………..

在經過多次痛哭流涕之後,我真想把電腦合上,背起書包回家(已經是深夜了),但是作為一個對技術有狂熱追求的我,我不甘心就這樣失敗。也許是上帝的安排,冥冥之中我對比了下別的專案module名稱都是app這樣,而我們的卻是vipshop。我想再嘗試一把,不行的話,那我就放棄了。 於是我把vipshop重新命名為app,build執行。檢視下apk打包的內容。

done

flutter_assets終於打包進去了。 進入flutter頁面也沒閃退了。嗚嗚… 今晚終於可以安心睡個好覺了。 趕緊掏出手機叫好滴滴,打卡下班回家….

總結

整體的曲折經歷上面已經說了,下麵總結下具體的改動點,假設你的主工程和flutter module位於:

  • 主工程:/somepath/my_app

  • flutter module: /somepath/flutter_module

主要改動點有:

  1. flutter切到master分支,執行flutter channel master。

  2. 按照官方指引https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps進行整合。

  3. 確保你的主工程的主module名稱是app,/somepath/my_app/app。

  4. 如果你的專案使用了abi splits,確認include的是armeabi-v7a。

    splits {
        abi {
            enable !project.hasProperty('runx86')
            reset()
            include 'armeabi-v7a' 
            universalApk false
        }
    }
  1. 假設你的主專案配置了dev productFlavor,那麼你需要修改 /somepath/flutter_module/.android/Flutter/build.gradle,增加dev productFlavor和buildTypes。

productflavor
  1. 修改flutter專案 /somepath/flutter_module/.android/app/build.gradle,增加dev productFlavor

productflavor
大功告成!!
已同步到看一看
贊(0)

分享創造快樂