使用Ionic3框架開始第一個混合開發APP

什麼是混合開發？

簡單來講，就是在開發移動應用中同時使用Native和Web的開發方式。

什麼是Ionic3框架？

Ionic3框架是一個混合開發框架，其自己依賴於Angular，Sass，Cordova。

使用Ionic3框架能夠作什麼？

使用Ionic3能夠使用前端相關技術快速開發多平臺的移動APP。

Ionic3環境搭建

1. 安裝Visual Studio 2011以上版本。
2. 安裝python 2.7版本。
3. 安裝node。
4. 使用npm全局安裝Cordova和Ionic。命令行輸入npm install -g cordova ionic
5. 安裝Android Studio。
6. 安裝Git。（可選）

安裝完了以後，命令行輸入ionic -h以下圖

初始化第一個應用

輸入ionic start -h查看初始化命令詳情，以下圖。

• name是項目名
• template是初始化的模板
• --type是項目類型，有Ionic1和Ionic-angular(也就是Ionic2和Ionic3)
• --app-name是App的名稱，能夠以後經過config.xml修改
• --list是打印出全部可用模板
• --cordova是集成Cordova
• --no-deps是不安裝npm依賴
• --no-git是不初始化git倉庫
• --no-link是不連接到Ionic平臺

好了，輸入ionic start HelloWorld blank --cordova --no-deps --no-git --no-link來初始化一個項目。完成以後以下圖。

這個時候工做目錄下就生成了一個HelloWorld目錄，進去。

輸入npm install安裝依賴，安裝完如圖。

無視掉那幾個警告

輸入ionic serve，第一次會出現下圖，輸入Y安裝。

而後再次輸入ionic serve，如圖繼續輸入Y安裝，安裝完後用啓動serve，以下圖。

遊覽器會自動打開localhost:8100，若是沒有就在遊覽器裏面手動打開本網頁，界面以下圖。

按F12打開控制檯，而後切換到移動顯示，以下圖。

這個樣子大概就是咱們應用界面的樣子了。

而後回到控制檯，Ctrl + C結束調試服務器。而後輸入ionic cordova，而後輸入Y安裝插件，以下圖。

輸入ionic cordova platform add android，這是添加一個Android平臺的命令。若是是ios就是將Android那裏替換爲ios，成功後以下圖。PS：ios須要安裝XCode，也就是須要在MAC OSX系統上。

輸入ionic cordova build android --prod生成一個Debug包，以下圖。

這樣就打包完畢了，去到platfrom/android/outputs/apk/目錄下，android-debug.apk就是咱們打包出來的APP。安裝到手機上就能夠使用或者調試了。注意：這個包是Debug版本，並不是正式包，正式包須要先生成簽名

至此，你就開始了第一個Ionic3應用。