關(guān)于混合開發(fā)，市面上的現(xiàn)在基本幾種：webview+html、rn、weex、kotlin、flutter。

h5、rn之前都使用開發(fā)過多個產(chǎn)品，也很了解這兩者的優(yōu)劣，weex、kotlin只是大概了解過，而flutter之前看過，但感覺dart語法很不友好，當(dāng)時也沒有太接觸。
最近看了一下關(guān)于rn、flutter的對比，于是想重新了解一下。

關(guān)于flutter

flutter是google推出的一款ui移動框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面，是基于dart語言，不需要像rn通過連接器與js通訊，性能比rn更勝一籌（未驗(yàn)證），在github的start數(shù)40000+，react-native的start數(shù)是70000+。

環(huán)境搭建

參考flutter中文網(wǎng)(https://flutterchina.club/get-started/install/)

1、下載flutter sdk

直接去官網(wǎng)下載可能下不下來，可以通過git下載

先設(shè)置鏡像 set PUB_HOSTED_URL=https://pub.flutter-io.cn set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn***git clone -b beta https://github.com/flutter/flutter.git***// 如果覺得這個下載下不下來或者太慢，可以通過下面這個國內(nèi)碼云地址 ***git clone https://gitee.com/mirrors/Flutter.git*** 

2、設(shè)置環(huán)境變量

下下來flutter 后進(jìn)入flutter目錄可以看到bin目錄。

將/flutter/bin設(shè)置到環(huán)境變量的path中。

在/flutter/bin目錄下執(zhí)行 flutter doctor命令。

3、android studio插件

下載android studio就不說了，打開android studio/file/setting/plugin/

plugin.png

輸入 flutter查找并install。
第一次可能下不下來。我的電腦第一次就沒下下來，是回家后打開電腦重新下載才下下來的，猜測可能是下載完flutter sdk、或者配置flutter環(huán)境變量后需要重啟電腦。

在安裝完插件并重新啟動android studio就可以在 file/new/中看到一個新選項(xiàng) New Flutter Project

flutter.png

hello word

按照慣例，接下來我們跑一個hello world。

照上面的new/new Flutter Project 然后 next、next、next一個新項(xiàng)目就建好了。

項(xiàng)目目錄

flutterRun.png

項(xiàng)目目錄和rn目錄類似，android、ios原生工程。lib放混合開發(fā)的dart文件，
pubspec.yaml項(xiàng)目的配置文件，類似于rn、react中的package.json，聲明項(xiàng)目版本、依賴等。
在運(yùn)行后如android，會在項(xiàng)目根目錄的build（和android同目錄）下生成構(gòu)建之后的文件，這一點(diǎn)和rn以及之前的android項(xiàng)目很不一樣，之前的androidbuild都是在/app/build/目錄下。

運(yùn)行

點(diǎn)擊上面截圖右上角綠三角run，第一次運(yùn)行會比較慢。main.dart是主入口的混合文件。我們可以修改截圖中間的文本內(nèi)容，再運(yùn)行

hello.png

第一次運(yùn)行結(jié)束，后面就需要熟悉dart語法，查看原生里的源碼看實(shí)現(xiàn)原理。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/18075.html