前言

瀏覽技術(shù)網(wǎng)站的時(shí)候,看到很多Flutter的字眼,號稱讓移動app更加流暢.興趣值滿分,于是開始學(xué)習(xí)了一下.
Flutter 官網(wǎng)
Flutter中文文檔

介紹

• Flutter 是由 Google 的工程師團(tuán)隊(duì)打造的，用于創(chuàng)建高性能、跨平臺的移動應(yīng)用的框架
• Flutter 專注于 Android and iOS 低延遲的輸入和高幀率
• Flutter的設(shè)計(jì)跟react-native很像，比RN更直接一點(diǎn)
• Flutter的開發(fā)語言是Dart

歷史演變

從我接觸移動app開發(fā)開始, 從Hybrid開發(fā)依賴于WebView, 眾所周知webView最大的問題就是性能問題,交互體驗(yàn)想當(dāng)?shù)牟缓?RN拋開了WebView，利用JavaScriptCore來做橋接，將js調(diào)用轉(zhuǎn)為native調(diào)用。解決了性能問題,可以說是邁進(jìn)了一大步.但是仔細(xì)想想還是需要中間量去做這件事情.這就相當(dāng)與 廠家供貨 -> 賣家出貨 的聯(lián)系變成 廠家供貨 -> 供銷員 -> 賣家 多個(gè)中間環(huán)節(jié),多少也是會影響性能.flutter更加徹底,不用橋接,不用webview.直接通過生成一個(gè)UI庫,給原生使用,這也是用Dart語言的原因吧.

與RN比較

• 都是跨平臺開發(fā)
• 通過狀態(tài)機(jī)控制局部變化
• 支持熱更新

安裝環(huán)境

首先

git clone -b beta https://github.com/flutter/flutter.git 

然后設(shè)置環(huán)境變量

vi ~/.bash_profile export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 

PATH_TO_FLUTTER_GIT_DIRECTORY為自己克隆flutter的文件目錄
之后運(yùn)行source $HOME/.bash_profile 刷新一下

運(yùn)行ide

我用的是vscode 打開之后vscode,安裝一下插件

1
之后快捷鍵是command+shift+P(或者view->Command Palette)
2.jpeg
運(yùn)行如下圖表示安裝成功:
3.jpeg

如遇到安裝不成功可以去看看官方文檔, 然而也會有錯(cuò)誤提示,處理一下即可
最后vscode的調(diào)試即可

4.jpeg

創(chuàng)建一個(gè)應(yīng)用

5.jpeg

最后

6.jpeg

可以看到圖片是pink顏色的, 默認(rèn)是blue顏色的. 試了一下熱加載功能保存一下就可以了.

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