環(huán)境安裝
技術(shù)選型：ionic(v1.7.16)+angularjs(v1)+cordova
基于h5的app開(kāi)發(fā)需要安裝的環(huán)境有 node.js、cordova、git、bower、gulp、ionic、java jdk、android sdk
1. Node.js
下載地址<a > https://nodejs.org</a>
2. Cordova
Cordova提供了一組設(shè)備相關(guān)的API，通過(guò)這組API，移動(dòng)應(yīng)用能夠以JavaScript訪問(wèn)原生的設(shè)備功能，如攝像頭、麥克風(fēng)等.Cordova還提供了一組統(tǒng)一的JavaScript類庫(kù)，以及為這些類庫(kù)所用的設(shè)備相關(guān)的原生后臺(tái)代碼。
安裝好nodejs 可以直接在 windows的命令行使用 npm 命令安裝cordova
(注：cordova好像被墻了需翻墻后使用以下命令，或通過(guò)淘寶鏡像安裝)
普通安裝
C:\> npm install -g cordova
通過(guò)淘寶鏡像安裝
C:\> npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\> cnpm install -g cordova
安裝完cordova .js 按住window+R輸入cmd打開(kāi)終端輸入cordova -v檢查是否安裝成功
3. git安裝
Git是一款免費(fèi)、開(kāi)源的分布式版本控制系統(tǒng)，用于敏捷高效地處理任何或小或大的項(xiàng)目分布式相比于集中式的最大區(qū)別在于開(kāi)發(fā)者可以提交到本地，每個(gè)開(kāi)發(fā)者通過(guò)克隆（git clone），在本地機(jī)器上拷貝一個(gè)完整的Git倉(cāng)庫(kù)。
下載地址 <a >git-for-windows</a>
4. bower
- 省時(shí)： 為什么要用bower第一個(gè)原因節(jié)省時(shí)間，每次我們需要安裝jquery的時(shí)候 我們都需要去jquery網(wǎng)站下載包或使用cdn版本，但有了Bower 你只需要簡(jiǎn)單配置輸入一條命令，jquery就會(huì)安裝在本地計(jì)算機(jī)上.
- 脫機(jī)工作,Bower會(huì)在用戶主目錄下創(chuàng)建一個(gè).bower文件夾
- 清晰的腳本依賴關(guān)系
- 讓升級(jí)變得簡(jiǎn)單
安裝bower的前置條件需要安裝 nodejs、git
C:\> npm install -g bower
5.安裝GUlP工具
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器,安裝GUlP插件該工具可以幫助開(kāi)發(fā)者對(duì)前端代碼的的編譯（sass、less）、壓縮、測(cè)試；圖片的壓縮。
6.安裝ionic
因本項(xiàng)目使用ionic(v1.7.16),需指定安裝版本備注
安裝指定version
npm install -g ionic@1.7.16
或通過(guò)淘寶鏡像安裝
cnpm install -g ionic@1.7.16
普通安裝
C:\> npm install -g ionic
通過(guò)淘寶鏡像安裝
C:\> npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\> cnpm install -g ionic
安裝完ionic 按住window+R輸入cmd打開(kāi)終端輸入ionic -v檢查是否安裝成功
備注：
卸載ionic
npm uninstall -g ionic
7.安裝java jdk
下載地址 <a >http://java.oracle.com</a>
選擇與本系統(tǒng)匹配的版本，如window x64
安裝后需輸入java -version確認(rèn)是否安裝成功
JDK環(huán)境變量配置
reference:http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html?qq-pf-to=pcqq.c2c
- 計(jì)算機(jī)→屬性→高級(jí)系統(tǒng)設(shè)置→高級(jí)→環(huán)境變量
2)系統(tǒng)變量→新建 JAVA_HOME 變量 。
變量值填寫jdk的安裝目錄（本人是 C:\Program Files\Java\jdk1.8.0_121)
3)系統(tǒng)變量→尋找 Path 變量→編輯
在變量值最后輸入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
（注意原來(lái)Path的變量值末尾有沒(méi)有;號(hào)，如果沒(méi)有，先輸入；號(hào)再輸入上面的代碼）
4)系統(tǒng)變量→新建 CLASSPATH 變量
變量值填寫 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一點(diǎn)）
系統(tǒng)變量配置完畢
5）或者在cmd上運(yùn)行path,能找到上述路徑即為成功
8.安裝android sdk
下載地址 <a >http://developer.android.com/sdk/index.html</a>
安裝android sdk的前置條件需要安裝 java jdk
安裝后需輸入android -v確認(rèn)是否安裝成功
如果出現(xiàn)如下所示，則未成功。
1)android sdk未安裝成功
解決方法：配置android sdk環(huán)境變量
reference：http://jingyan.baidu.com/article/f71d603757965b1ab641d12a.html
1）在系統(tǒng)變量里找到Path選中（圖中藍(lán)色那條），點(diǎn)擊下面的【編輯】。
2)在變量值里加入androidSDK中platform-tools和tools的目錄路徑
本機(jī)為：
C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools
C:\Users\Administrator\AppData\Local\Android\sdk\tools
當(dāng)然兩個(gè)之間要加個(gè)分號(hào)“;”。
3)在cmd上運(yùn)行adb,如下圖即為成功
4）或者在cmd上運(yùn)行path,能找到上述路徑即為成功
初始化項(xiàng)目(創(chuàng)建新項(xiàng)目)
ionic方式生成項(xiàng)目的基礎(chǔ)框架
# 創(chuàng)建tabs模板的應(yīng)用
ionic start myApp tabs
# 添加android平臺(tái)
ionic platform add android
# 編譯 android應(yīng)用
ionic build android
# 應(yīng)用在android下調(diào)式
ionic run android
工程的目錄結(jié)構(gòu)如下
+ hooks
+ platforms
+ plugins //cordova插件的目錄，插件的安裝下一節(jié)詳述
+ resources
+ scss //scss文件，發(fā)布時(shí)編譯這個(gè)目錄下的文件輸出到www的css目錄中
+ www
- .bowerrc
- .gitignore
- bower.json
- config.xml
- gulpfile.js
- ionic.project
- package.json
- README.md
cordova 與ionic 的區(qū)別，ionic是基于cordova擴(kuò)展的，ionic擁有cordova的全部功能。ionic中多了一些前端腳本的構(gòu)建工具如（bower、gulp）
hooks目錄編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中,platforms,plugins,resources,scss,config.xml
www目錄為 html的前端資源目錄, 我們所說(shuō)的開(kāi)發(fā)就是在個(gè)目錄下進(jìn)行以下對(duì)
+ css // 樣式文件
- style.css
+ fonts // 字體文件
+ img // 存放圖片文件
+ js // 存放工程腳本
+ cfg // angularjs 一些配置文件，路由表
+ ctrl // angularjs 控制器
+ dev // 開(kāi)發(fā)版本文件
+ release // 生產(chǎn)版本文件
+ services // 接口與服務(wù)
app.js
+ lib // 第三方腳本
+ templates // 模板文件
- dev.html // pc瀏覽頁(yè)面（用來(lái)測(cè)試業(yè)務(wù)）
-index.html // 生產(chǎn)環(huán)境（最終發(fā)布的app）
目錄是按MVC方式劃分 M(js/services)、V(templates)、C(js/ctrl)。在實(shí)際開(kāi)發(fā)過(guò)程中都需要在瀏覽器測(cè)試開(kāi)發(fā)，由于瀏覽并沒(méi)有真實(shí)手機(jī)設(shè)備的環(huán)境（相機(jī)、文件等），對(duì)原生接口調(diào)用時(shí)分開(kāi)發(fā)版本(dev)與生產(chǎn)版本（release）,開(kāi)發(fā)版本只是模擬并延時(shí)返回結(jié)果。
使用 ionic tabs 模版創(chuàng)建一個(gè) APP過(guò)程
1)ionic start testDemo tabs
2)ionic platform add android
3)ionic run android
此步真機(jī)調(diào)試，需要啟動(dòng)手機(jī)”開(kāi)發(fā)者模式“--”USB調(diào)試“
可能遇到的錯(cuò)誤
1)ionic run android
出現(xiàn)問(wèn)題一
解決方法：
reference:<a >http://stackoverflow.com/questions/31310182/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo</a>
下載<a >Android SDK tools package</a>替換"C:\Users\Administrator\AppData\Local\Android\sdk" tools文件
download url:https://dl.google.com/android/repository/tools_r25.2.3-windows.zip
出現(xiàn)問(wèn)題二
卡死在這一步，或者出現(xiàn)如下報(bào)錯(cuò)：
解決方法：
手動(dòng)下載gradle-version-all.zip對(duì)應(yīng)的版本，替換已有的版本，放置到對(duì)應(yīng)的目錄，本地為：
C:\Users\Administrator.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e5ni9e8iofg8ghvk7
下載<a >Gradle Distributions</a>
download url:http://services.gradle.org/distributions
出現(xiàn)問(wèn)題三
adb無(wú)法使用，提示error:unknown host service
reference:
http://blog.csdn.net/liguilicsdn/article/details/50902194
http://jingyan.baidu.com/article/00a07f3844e13782d128dc61.html
解決方法：
首先需要確認(rèn)手機(jī)手否連接電腦并啟動(dòng)USB調(diào)試，在判斷辨別電腦的5037端口被哪個(gè)應(yīng)用程序占用的方法：（使用adb時(shí)需要5037端口是空閑的）
1)確認(rèn)手機(jī)手否連接電腦并啟動(dòng)USB調(diào)試
- 打開(kāi)命令行，輸入命令：netstat -ano |findstr "5037"
- 查看到對(duì)應(yīng)的進(jìn)程的PID是7952
Ctrl+alt+delete，打開(kāi)任務(wù)管理器
查看是哪個(gè)進(jìn)程占用了7952
![查找進(jìn)程對(duì)應(yīng)的PID]
這里是sjk_daemon.exe(百度到是金山手機(jī)助手)占用了此進(jìn)程，需要將該進(jìn)程
- 結(jié)束該進(jìn)程
5）如果發(fā)現(xiàn)一個(gè)進(jìn)程，多次關(guān)閉無(wú)法關(guān)閉，可以嘗試
![Uploading 08_869068.png . . .]
卸載該應(yīng)用
6）如果還是無(wú)法連接設(shè)備，提示devices notfound，可以嘗試如下命令：
adb kill-server
adb start-server
adb remount
reference:
http://huangtengfei.com/2016/01/start-ionic/
