搞了一波cordova后，算是對Hybrid有了一點點微小的認知。為了快速開發(fā)，ionic無疑是更好的選擇鸽凶，它底層的打包和通信機制基于cordova實現(xiàn)，在上層實現(xiàn)了自己的UI組件建峭，可以結(jié)合Angular或React使用玻侥，并且宣稱將在未來支持Vue。

環(huán)境準備

如果已經(jīng)安裝了cordova亿蒸，則單獨安裝ionic即可凑兰，否則需要一并安裝。

npm install -g ionic cordova

創(chuàng)建項目

通過start命令來新建一個ionic項目边锁。

ionic start my-app

并且可以支持傳入模板姑食，以及項目類型，具體參考ionic start砚蓬。

我們在這里創(chuàng)建一個基于angular的tabs導航的app矢门。

ionic start myapp tabs --type=ionic-angular

當然也可以直接從一個更完善的模板開始盆色。

ionic start myapp super --type=ionic-angular

這幾種方式可以都試試看灰蛙。

運行項目

在瀏覽器運行web版

在嘗試npm start調(diào)用ionic-app-scripts serve啟動項目時，發(fā)現(xiàn)報錯找不到@ionic/app-scripts模塊隔躲，嘗試重新安裝該模塊摩梧，node-gyp模塊又報了這個錯：

Error: Can't find Python executable "python", you can set the PYTHON env variable.

查詢node-gyp后，官方提供了兩種解決方案

解決找不到python模塊的問題

我采用了第一種方案：

npm install --global --production windows-build-tools

ps: 必須以系統(tǒng)管理員方式運行命令行宣旱。

接著重新安裝一遍@ionic/app-scripts仅父，然后重新運行項目，冇問題啦。

npm uninstall @ionic/app-scripts
npm install --save-dev @ionic/app-scripts
npm start

ionic界面

支持android和ios

ionic cordova platform add ios
ionic cordova platform add android

android調(diào)試

首先檢查下設(shè)備連接是否正常

D:\robin\frontend\hybrid\ionic\ionic-blog> adb devices
List of devices attached
5fdba1e7        device

使用ionic cli提供的命令運行app

// -l是--livereload的簡寫
ionic cordova run android -l

此時注意在手機上同意“繼續(xù)安裝”笙纤，否則是不會成功的耗溜。安裝成功則可以看到成功的提示。

> cordova.cmd build android --device
[app-scripts] [16:05:33]  lint finished in 3.95 s
> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device --forward 8100:8100 --forward 35729:35729 --forward 53703:53703
[native-run] Selected hardware device 5fdba1e7
[native-run] Forwarded device port 35729 to host port 35729
[native-run] Forwarded device port 8100 to host port 8100
[native-run] Forwarded device port 53703 to host port 53703
[native-run] Installing platforms\android\app\build\outputs\apk\debug\app-debug.apk...
[native-run] Starting application activity io.ionic.starter/io.ionic.starter.MainActivity...
[native-run] Run Successful

ionic界面

此時還可以在Chrome瀏覽器上輸入chrome://inspect進行調(diào)試省容。

chrome inspect

手機上的操作會同步到Chrome瀏覽器上抖拴。

ionic遠程調(diào)試動圖

并且還支持斷點調(diào)試。

ionic斷點調(diào)試

ios調(diào)試

ios就先不試了腥椒，沒設(shè)備阿宅。。笼蛛。