ionic初體驗

搞了一波cordova後，算是對Hybrid有了一點點微小的認知。爲了快速開發，ionic無疑是更好的選擇，它底層的打包和通訊機制基於cordova實現，在上層實現了本身的UI組件，能夠結合Angular或React使用，而且宣稱將在將來支持Vue。

環境準備

若是已經安裝了cordova，則單獨安裝ionic便可，不然須要一併安裝。

npm install -g ionic cordova
複製代碼

建立項目

經過start命令來新建一個ionic項目。

ionic start my-app
複製代碼

而且能夠支持傳入模板，以及項目類型，具體參考ionic start。

咱們在這裏建立一個基於angular的tabs導航的app。

ionic start myapp tabs --type=ionic-angular
複製代碼

固然也能夠直接從一個更完善的模板開始。

ionic start myapp super --type=ionic-angular
複製代碼

這幾種方式能夠都試試看。

運行項目

在瀏覽器運行web版

在嘗試npm start調用ionic-app-scripts serve啓動項目時，發現報錯找不到@ionic/app-scripts模塊，嘗試從新安裝該模塊，node-gyp模塊又報了這個錯：

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

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

我採用了第一種方案：

npm install --global --production windows-build-tools
複製代碼

ps: 必須以系統管理員方式運行命令行。

接着從新安裝一遍@ionic/app-scripts，而後從新運行項目，冇問題啦。

npm uninstall @ionic/app-scripts
npm install --save-dev @ionic/app-scripts
npm start
複製代碼

支持android和ios

ionic cordova platform add ios
ionic cordova platform add android
複製代碼

android調試

首先檢查下設備鏈接是否正常

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
複製代碼

此時注意在手機上贊成**「繼續安裝」**，不然是不會成功的。安裝成功則能夠看到成功的提示。

> 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
複製代碼

此時還能夠在Chrome瀏覽器上輸入chrome://inspect進行調試。

手機上的操做會同步到Chrome瀏覽器上。

而且還支持斷點調試。

ios調試

ios就先不試了，沒設備。。。

---

首發連接

---

掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章！