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