基於Web的APP開發 （Ionic初次嘗試）

1、說明

由於初次接觸Ionic，Ionic是基於web開發移動設備的應用APP的開源框架。開發和構建APP比較快速，而且跨平臺性能比較好。（這兩點是在第一次嘗試的時候的確有這樣的感覺）。
在這裏就把我第一次使用和安裝Ionic 的過程記個筆記。主要內容包括：安裝，環境變量配置，中途出現的問題的解決方案，構建第一個應用的例子。

2、安裝

準備工具：免費的VPN軟件：proxy999。
由於有部分資源需要從國外網站上下載，所以使用這個翻牆代理安裝成功率會高很多。
網上參考文檔的網址：
Ionic官網：（包含詳細的開發文檔）http://ionicframework.com/
Ionic中文網站：http://www.ionic-china.com/#
Ionic中文教程：（RUNOOB網站）http://www.runoob.com/ionic/ionic-tutorial.html
Ionic入門視頻：（極客學院）http://search.jikexueyuan.com/course?q=Ionic

---

安裝node.js

安裝node.js
這是爲了能夠使用命令行來實現安裝 cordova/phonegap,ionic
Node.js下載網址：https://nodejs.org/en/download/
Node.js 安裝教程：http://www.runoob.com/nodejs/nodejs-install-setup.html

驗證 node.js是否安裝成功

//Windows + R 鍵，輸入cmd 打開命令行工具
node –-version

安裝成功。

---

安裝cordova 和 ionic

在所要安裝的位置內，shift + 鼠標右鍵，顯示如下

打開命令行窗口後，使用命令行安裝，安裝命令如下

npm install -g cordova ionic

1：正在安裝：

2：安裝完成：

安裝完成後的界面可能會略有不同。

---

安裝Android SDK

Android SDK安裝，參照官網安裝，由於本人之前安裝過Android studio，所以不需要再重新安裝了。
http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html （英文）
http://cordova.apache.org/docs/zh-cn/6.x/guide/platforms/android/index.html （中文）

配置系統環境變量：

C:\xxxxx\android-sdk\platform-tools
C:\xxxxx\android-sdk\tools

配置參考圖

//命令行中輸入 path 查看系統環境變量
path

3、構建APP

在新建的文件夾中 ：
Shift + 鼠標右鍵 ，快速打開該目錄下的命令行工具。

//命令行中的命令
//自定義的APP的名稱: myFirstAPP
// 是對應的一個系統模板: tabs
ionic start myFirstAPP tabs

構建完成後的效果

此時已經構建完成了。

4、查看

會顯示我們新創建的應用的文件。
打開對應文件夾中的www/文件夾，裏面的index.html文件直接用瀏覽器打開就可以先看結果。

最好使用火狐瀏覽器打開，暫時沒找到解決谷歌瀏覽器打不開的狀況。

至此，我們已經基本完成了項目的開發。

5、構建APK文件

也許會出現問題：

參考解決方式：
通過http://services.gradle.org/distributions/gradle-2.2.1-all.zip
http://download.csdn.net/download/guojunustb/8445741

下載該文件，然後把文件粘貼到 myApp\platforms\android\gradle\gradle-2.2.1-all.zip 下。然後打開路徑 myApp\platforms\android\cordova\lib\下的 Gradlebuild.js 文件，完成下面的操作:
var distributionUrl = ‘distributionUrl=http://services.gradle.org/distributions/gradle-2.2.1-all.zip‘;
修改爲:
var distributionUrl = ‘../gradle-2.2.1-all.zip’;
上面內容都是從秒秒學裏的HTML基礎課程中總結的，有興趣你可以百度搜一下，再仔細看看

進入到APP文件夾內，打開命令行窗口，輸入如下命令即可：

//生成android  APK 文件
ionic build android
//在手機和電腦相連接的情況下，將APK安裝到手機上。
ionic run android

構建apk文件成功。

6、總結

環境配置有點複雜，不過運氣還算可以，終於解決啦。
主要內容還是使用Javascript，由於本人對javascript完全不懂，所以只能在html 文件中修改幾個參數，來感受一下，Ionic帶來的新鮮感。
個人微信：yafeihou，歡迎交流