準備
開始創建第一個App項目
- 使用ionic cli提供的命令創建一個ionic app
ionic start ionic_test tabs
其中
ionic_test是項目名稱,tabs是使用的項目模版.如下圖ionic還提供了空白模版和側邊欄菜單模版，更多詳情查看ionic cli命令
注：有時候由于網絡問題或者ionic項目調整使用命令無法下載ionic模版，于是我在github上放了一個ionic3 tabs項目模版，和官網上下載下來是一樣的，各位可以下載使用，：https://github.com/yanxiaojun617/ionic3-app-base
- 下載依賴
cd ionic_test
cnpm install
cnpm安裝是快很多，但是經常項目會報莫名奇怪的錯誤，這時候重新用npm安裝依賴就解決了，所有先使用cnpm安裝項目依賴，安裝完成如果項目運行不起來，那就刪除項目下的
node_modules文件夾，重新用npm安裝：npm i
在瀏覽器上運行App項目
- 如下圖1,使用命令
ionic serve在瀏覽器運行app,也可以用ionic serve --lab,一定要試試 -
如下圖2,是打開的瀏覽器界面,開發過程中經常要在chrome控制臺調試代碼
圖1
圖 2
在真機上運行app項目
- 在真機上運行需要確保android sdk已經下載好,可以參考這里
- 執行
cordova platform add android把html+js代碼編譯成"android"代碼 - 第一次編譯可能需要下載gradle文件,這個文件有66M下載很慢,建議耐心等待,只需下載一次.如果真想快可以看這里.
- 用usb數據線連接電腦和手機并確保連接成功,可以看這里
- 再執行
cordova run android就可以在手機上運行了,安裝過程如下圖
cordova run android命令等于cordova build android(生成apk)和adb install -r apk路徑(安裝apk到真機)
如果代碼有修改,記得先執行ionic serve或者使用ionic cordova run android
ionic run android過程圖
app開發模版
真機運行失敗情況1
失敗情況1
真機運行失敗情況2
失敗情況2
失敗情況2
真機運行失敗情況3
- 手機上已經安裝了app正式版(release版本)或安裝了更gao
