Ionic系列——環境配置和項目搭建

一、環境介紹

    Java jdk: 開發環境

    Android ADT: Ionic Android開發環境

    IOS Xcode: Ionic Ios開發環境

    ANT: Cordova編譯工具

    Node: 開發環境

    Git: 源碼拉取下載

    Bower: 包管理工具

    Grunt: node項目構建工具

二、環境配置

2.一、Java  jdk環境

    下載安裝Java jdk環境， 並添加到環境變量 JAVA_HOME  中

    配置JAVA的環境變量： http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

2.二、操做平臺環境

2.2.一、Android ADT（Android Development Tools）環境

    下載安裝ADT 並添加到環境變量  ANDROID_HOME  中

    如何設置Android環境變量：http://jingyan.baidu.com/article/22a299b51c59d69e19376af8.html

   

    ①首先下載android sdk tools並安裝

    Android工具下載網址：http://www.androiddevtools.cn/

                                        www.androiddevtools.cn若跳轉失敗請手動複製到瀏覽器中打開

    ②我在安裝ionic的時候他說須要安裝最新的sdk，就是android22因此須要越獄下載   

     Android 5.1 API 22 全部sdk文件下載地址  http://www.oschina.net/question/1539302_227672

    ③搭建android  AVD模擬環境一直沒搞通

    如何新建安卓AVD虛擬模擬器  http://jingyan.baidu.com/article/a681b0ded7e7573b1943465b.html

2.2.二、IOS xcode環境

 暫時只搞了android的，稍後完善！在windows上面安裝ios和在ios上添加android環境都比較麻煩。

    但若是你是蘋果筆記本，你開發Ionic只須要安裝一個Node環境就能夠開發了。

2.三、ANT環境

    下載安裝ANT 並添加到環境變量 ANT_HOME  中

    ANT的安裝和環境變量配置: http://jingyan.baidu.com/article/90808022c5eed8fd91c80f90.html 

    ANT官網下載地址：http://ant.apache.org/

    有的時候須要用管理員打開，可能涉及權限問題。（這句話忘了說什麼了，先放着）

2.四、Node環境

    下載安裝Node

    Node官網下載地址：https://nodejs.org/download/

2.五、Git環境

    下載安裝Git 並添加到環境變量中

    git的安裝和配置：http://jingyan.baidu.com/article/9f7e7ec0b17cac6f2815548d.html

    Node官網下載地址：https://nodejs.org/download/

2.六、Bower和Grunt

     以後我會在另外一篇博客中完善bower的使用，下載配置，忽略文件等的使用。

npm install -g bower

npm install -g grunt

三、Ionic項目建立

3.一、安裝ionic和cordova

    添加的時候最好用cmd的管理員身份運行

npm install -g cordova ionic

3.二、建立項目

$ ionic start myproject  開始第一個項目，默認是tab
$ ionic start webApp blank
$ ionic start webApp tabs
$ ionic start webApp sidemenu

3.三、打包項目運行

    android在項目中打開cmd命令窗口：

 ionic platform add android（添加android平臺，在項目中只須要運行一次）
 ionic build android（生成androidapk）
 
 ionic run android
 ionic emulate android（在android模擬器或真機中模擬）這是在虛擬中運行

 ionic serve可自動打開瀏覽器直接在瀏覽器測試

    Ios在項目中打開cmd命令窗口：

$ ionic platform add ios
$ ionic build ios(這樣生成的是app格式，還須要加ios證書變成ipa格式)
$ ionic emulate ios

3.四、ng-cordova的使用

    Ionic系列——使用ng-cordova插件：http://my.oschina.net/u/1416844/blog/484693

四、項目介紹

    介紹項目中文件夾的意義和做用，忽略哪些上傳，剛拉取下來須要進行的操做，稍後完善！

五、錯誤處理

5.1 、在運行ionic build android的時候報錯

    [Error: ANDROID_HOME is not set and "android" command not in your PATH. You

    這個時候要這樣設置

    ANDROID_HOME：C:\environment\adt-bundle-windows-x86-20130917\sdk

    在path中寫：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

5.二、node在添加-ng-cordova的時候存在跨磁盤移動的問題

    Error: EXDEV, cross-device link not permitted 'C:\Users\shiguoqing\AppData\Local \Temp\git\1435225811973\plugin.xml'

    我目前想到的解決辦法是把項目弄到node的安裝磁盤，而後在給弄回來，我如今項目挪到c盤去了。

5.三、建立AVD（安卓模擬器）報的錯誤

    ①首先是這個問題，這是沒有安裝英特爾硬件加速執行管理器，要手動安裝一下。若是是自動安裝的androidSDK他已經集成在裏面了，但也須要手動安裝一下。能夠看下面的文章。

英特爾硬件加速執行管理器(英特爾 HAXM)是一款硬件輔助虛擬引擎(管理程序)安裝：  http://www.cnblogs.com/csulennon/p/4178404.html

    ②這個問題Stack Overflow上給了一些解釋

    屏幕尺寸影響，多個虛擬機影響，攝像頭影響等

    emulator window was out of view and was recentred    這個是屏幕的尺寸選的有問題

    emulator: Failed to sync vcpu reg
    emulator: Failed to sync HAX vcpu context
    網上說這兩個問題，arm能夠打開，intel的打不開了，加速器關了又能打開了，先在主板上打開Virtual tech，硬件加速才能用，另外，只有intel支持VT的CPU才行，個人電腦是acer4741g，說是默認開啓，可是bios中無法設置。可是這兩個問題一直沒有解決，因此模擬器也沒有跑起來，各位大神有什麼辦法？

    http://stackoverflow.com/questions/17024538/how-do-i-fix-failed-to-sync-vcpu-reg-error

③這個是問題是在環境變量配置的PATH中要添加上C:\Windows\System32

④我有一次重新裝機，一直遇到這個問題，找不到build-tools

折騰了半天，發現解決的辦法很簡單就是

 http://blog.csdn.net/langyuewu/article/details/46729985