關于混合開發，市面上的現在基本幾種：webview+html、rn、weex、kotlin、flutter。

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

關于flutter

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

環境搭建

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

1、下載flutter sdk

直接去官網下載可能下不下來，可以通過git下載

先設置鏡像 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***// 如果覺得這個下載下不下來或者太慢，可以通過下面這個國內碼云地址 ***git clone https://gitee.com/mirrors/Flutter.git*** 

2、設置環境變量

下下來flutter 后進入flutter目錄可以看到bin目錄。

將/flutter/bin設置到環境變量的path中。

在/flutter/bin目錄下執行 flutter doctor命令。

3、android studio插件

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

plugin.png

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

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

flutter.png

hello word

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

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

項目目錄

flutterRun.png

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

運行

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

hello.png

第一次運行結束，后面就需要熟悉dart語法，查看原生里的源碼看實現原理。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/18075.html