原先一直都是在做iOS的原生開發(fā)，Android也是興趣平平，曾經(jīng)也是很想學習下RN的，無奈web前端跟js的一些相關(guān)內(nèi)容實在不熟悉，直到這次的flutter的出現(xiàn) 讓我重新有股學習的沖動。so，本文比較傾向于iOS的調(diào)試，所有的內(nèi)容都是建立在對iOS原生開發(fā)比較熟悉的基礎上。

image

安裝flutter

官網(wǎng)flutter.io

當然跟著我做也一樣

安裝sdk

打開 Terminal先cd到你需要安裝的目錄下， 我這里直接在 ~ 個人目錄下

一次執(zhí)行下面幾條命令

git clone -b beta https://github.com/flutter/flutter.gitexport PATH=`pwd`/flutter/bin:$PATHflutter doctor 

將flutter添加到環(huán)境變量中

vim ~/.brash_profile

//這個一定要添加export PATH=/Users/用戶名/xxxxxx/flutter/bin:$PATH

//這個是配置Android相關(guān)的 沒有Android studio 或者 只要測試iOS的話 這幾個可以先不管 export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄，替換為你自己的即可 export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools 

執(zhí)行source ~/.brash_profile

最后檢查下echo $PATH 看看 是否已經(jīng)添加到環(huán)境變量中

image

flutter doctor 命令是用來檢查依賴環(huán)境

最后結(jié)果是這樣的

image

按照他的提示把缺少的內(nèi)容安裝一下，我這里就主要安裝iOS相關(guān)的幾樣東西先

 brew install --HEAD libimobiledevicebrew install ideviceinstallerbrew install ios-deploy 

pod 大家應該都有裝

但是在安裝上面三個東西的時候brew居然給我報錯了

/usr/local/include is not writable.

這是什么鬼。。。查了很多方法
最后 解決方法 居然發(fā)現(xiàn) /usr/local/ 目錄下居然沒有include這個目錄，手動添加一個include目錄解決?。。?/p>

link完成后再運行flutter doctor 看到iOS這塊沒問題就OK了（Android暫時不管了）

image

安裝VSCode

考慮到對Android studio 不是很熟悉，所以這次選擇了 vscode

直接在官網(wǎng)下載vscode

image

安裝flutter插件

打開vscode
按快捷鍵 cmd + shift + p或者 菜單欄選擇 view - command palette

輸入 install 選擇插件安裝

image

先安裝 flutter 的語言包 dart

image

接下來繼續(xù)安裝 flutter 插件

image

新建Flutter工程

打開vscodecmd + shift + p輸入 flutter 選擇 new project

image

這時候可能會提示 找不到 flutter sdk

image

手動導入下 （我是安裝在 ~目錄下直接選擇flutter目錄就可以）

輸入新建的工程名,選擇存放路徑

這時候就會自動生成相關(guān)工程文件

這是模板工程，選擇模擬器就能直接跑了

先打開模擬器 open -a Simulator

這是最下角就可以選擇剛剛打開的模擬器

image

點擊debug 直接運行

image

模擬器就跑起來了，效果還不錯~

image

Tips

vscode 默認創(chuàng)建的 xcode工程是 OC版本的
如果想要創(chuàng)建swift 版本的話 就不能通過vscode 來創(chuàng)建

需要直接命令行創(chuàng)建

flutter create -i swift ProjectName

這時候就是用swift的工程了

image

kotlin 也一樣加參數(shù)-a kotlin 就行了

今后會陸續(xù)再更新更具體的練手項目，敬請期待吧~~~

我的博客即將搬運同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3nyifx0wvqecc

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