混合式app ionic2.x 手動搭建開發環境教程分享(nodejs,jdk,ant,androidsdk)

1、ionic簡介 

為什么選用ionic: 

1. 徹底開源且免費

2. 性能優異

3. 基于紅的發紫的AngularJs

4. 漂亮的UI

5. 強大的命令行(基于更熱門的nodejs)

6. 開發團隊非常活躍

7. ngCordova，將主流的Cordova API或者Cordova插件封裝為AngularJS擴展，使用非常方便

8. 開源免費的webfont icon庫ionicons,基本滿足你icon需求

2、相關下載: 

Node.js(npm安裝工具) ：  https://nodejs.org/en/

jdk (android編譯依賴)  ：  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

android (ADK編譯)： http://www.androiddevtools.cn/

Sublime text插件 ：http://www.sublimetext.com/

WebStorm 開發工具 ：https://www.jetbrains.com/webstorm/download/#section=windows

ionic2.x開發工具建議： Webstorm（開發） + Ant (打包)

注意事項: 建議所有程序管理員運行包括cmd androidsdk避免莫名的問題如sdk打不開cmd某些命令不能執行。

大致步驟（注意安裝順序）：安裝node.js - 安裝jdk - 安裝android(adk) – 安裝apache ant - 命令安裝ionic - 創建項目 - 編譯項目apk 

3、安裝Node.js 

　3.1 nodejs簡介

　　3.1.1 為什么要選用nodejs？

　　3.1.2 nodejs 下載以及說明

    　首先在我們官網下載Nodejs的安裝包進行安裝：https://nodejs.org/en/ 

V6.10.0 LTS（9.75MB）——長期支持版，成熟穩定

V7.7.3 Current（9.75MB）——現在最新版本，最新特性、不穩定 作為新手不用糾結，隨意選一個下載即可。

　3.1.2 開始安裝nodejs

　　(1) 下載完后進行nodejs安裝.可自定義安裝，默認是安裝在C:\Program Files\nodejs 

　　  點next進行安裝（注意避免中文目錄）

在命令行cmd控制行

輸入：node –v，控制臺將打印出：v7.7.2  提示安裝成功。

這樣，常規NodeJS的搭建到現在為止已經完成了，迫不及待的話你可以在cmd命令行中鍵入“node”進入node開發模式下，輸入你的NodeJS第一句：”hello world“ – 輸入：console.log(‘hello world’)。這里就不再多作演示了。

該引導步驟將node.exe 文件安裝到C:\Program Files\nodejs\目錄下，并將該目錄添加進path環境變量

注意：環境變量中path的nodejs路徑決定你安裝后的目錄路徑

(2)  npm 詳解

　　 npm作為一個NodeJS的模塊管理，之前我什么都不懂，從網上找各種安裝教程，弄的五花八門，走了很大的彎，現在將其整理出來，方便各位網友查看。

　　①、我們要先配置npm的全局模塊的存放路徑以及cache的路徑，例如我希望將以上兩個文件夾放在NodeJS的主目錄下，便在NodeJs下建立”node_global”及”node_cache”兩個文件夾。如下圖 

②、啟動cmd，輸入

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

③、現在我們來裝個模塊試試，選擇express這個比較常用的模塊。同樣在cmd命令行里面（管理員權限運行cmd），輸入

npm install express –g

（“-g”這個參數意思是裝到global目錄下，也就是上面說設置的“C:\Program Files\nodejs\node_global”里面。）。待cmd里面的安裝過程滾動完成后，會提示“express”裝在了哪、版本還有它的目錄結構是怎樣。如下圖 

④、關閉cmd，打開系統對話框，“我的電腦”右鍵“屬性”-“高級系統設置”-“高級”-“環境變量”。如下圖 

⑤、進入環境變量對話框，在系統變量下新建”NODE_PATH”，輸入”C:\Program Files\nodejs\node_global\node_modules“。（ps：這一步相當關鍵。） 
2014.4.19新增：由于改變了module的默認地址，所以上面的用戶變量都要跟著改變一下（用戶變量”PATH”修改為“C:\Program Files\nodejs\node_global\”），要不使用module的時候會導致輸入命令出現“xxx不是內部或外部命令，也不是可運行的程序或批處理文件”這個錯誤。 

⑥、以上步驟都OK的話，我們可以再次開啟cmd命令行，進入node，輸入“require(‘express’)”來測試下node的模塊全局路徑是否配置正確了。正確的話cmd會列出express的相關信息。如下圖（如出錯一般都是NODE_PATH的配置不對，可以檢查下第④⑤步） 

OK，這樣就搞定了，只要配置好之后，通過管理員權限安裝模塊就可以很好管理目錄了。

⑦、查看npm 版本號 ：

3、安裝JDK(androidSDK需要的) 

　3.1　下載完jdk后，點next進行安裝（注意避免中文目錄）

　3.2 安裝后cmd執行java -version看到版本就是安裝成功了（無需設置path）(我這里的版本是jdk1.8)

4、安裝androidSDK 
 

 4.1 sdk下載

　　開發android的道友，肯定都聽說過這玩意。大家可以在http://www.androiddevtools.cn/上進行下載相應版本。

　　下載完后，點next進行安裝（注意避免中文目錄）

　　4.2  設置環境變量全局訪問android

　　我的電腦 - 右鍵屬性 - 高級系統設置 - 環境變量 

　　新建變量名               變量值 
　　ANDROID_HOME     D:\ionic\androidsdk(你sdk的路徑)

　　然后在path里添加(注意前面的分號)   
　　;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

　　執行android -h看到命令即安裝設置成功

注意:執行androidsdk目錄下的SDK Manager.exe即可打開工具包 如果遇到打不開的情況請用管理員運行!!!

配置AndroidSDK 國內無法訪問google服務器 所以列表是空的需要配置鏡像 
選擇Tools - Options 打開設置界面

填入mirrors.neusoft.edu.cn 端口80

并勾選 “Force https://... sources to be fetched using http://...單擊Close關閉”

依次選擇Packages - Reload（或者重新打開）

這里千萬注意只需要勾選3個Android SDK Platform-tools、Android SDK Build-tools、API23下的SDK Platform (編譯的時候會提示你需要的api版本，目前是API23) 
如果你勾選了其它的，可能要下載2、30G的東西。像我這樣選只需要下載200M

 附加：項目集成Crosswalk需要勾選Extras下的Android Support Repository和Google Repository否則會報錯 

接受 - 安裝

安裝完的列表 新版ionic只需裝23,如果編譯遇到錯誤就安裝API 22的platform

 5、安裝 Apache ant 

　　5.1 下載ant

　　ant下載地址： http://ant.apache.org/bindownload.cgi

　5.2  下載安裝完后進行配置環境變量

Windows下ANT用到的環境變量主要有2個： ANT_HOME 和 PATH。 

eg：
1. 設置ANT_HOME指向ant的安裝目錄(系統變量)。 
設置方法：ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6

2. 設置bin和lib目錄到PATH變量中(用戶變量)。將%ANT_HOME%\bin; %ANT_HOME%\lib添加到x變量的path中。 
設置方法：PATH = %ANT_HOME%\bin; %ANT_HOME%\lib

安裝如果不成功可以把%ANT_HOME%換成真實的路徑。

如:     D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib

安裝完成以后在cmd中輸入 ant -version 驗證是否安裝成功。

  6、下載安裝ionic、demo 本地、創建/編譯項目 

1.使用npm下載ionic模板項目下載到本地。中間會有一些問詢，比如是否使用sass.app的命名等。

　　npm install -g  cordova ionic

執行 cordova ionic 命令、運行下面的命令來確認它們被成功安裝：

cordova （當前最新版本為v6.5.0）

ionic （當前最新版本為v2.2.1）

 1、開始創建項目（以管理身份進行運行Node.js command prompt）

環境搭建完畢，現在開始創建項目編譯APK

這里可以指定目錄下進行創建項目

 ionic start  myionictest tabs（創建過程y/n詢問是否打開官網n即可）

 查看創建的目錄文件夾

myionictest 就為項目名稱,進入myionictest 這個文件夾:

cd myionictest

2. 添加android平臺:

ionic platform add android 

3. 生成android apk:

ionic build android  

 查看生成apk 目錄

現在我們可以運行ionic server預覽下項目

 現在我們可以運行ionic server預覽下項目、顯示如下已經搭建好了一個移動混合式app ionic 框架

此步驟說明（如果此過程下載本地不了建議通過以下這種方式把gradle-2.2.1-all.zip下載下來配置）：

博客鏈接：http://download.csdn.net/detail/capmiachael/9693458

附加gradle官網鏈接下載、根據ionic對應gradle版本下載即可

gradle 下載鏈接：http://services.gradle.org/distributions/    

4. 在android模擬器或真機中模擬:

ionic emulate android 

5、其中3和4可以合并為：

ionic run android 

 即生成apk，并在模擬器或真機中模擬。

6、更新ionic等

    a.更新cordova及ionic包

　 npm update -g cordova ionic 

b.更新已建ionic項目中的js類庫，命令行中先進入項目所在目錄，然后運行：

ionic lib update 

7.展現ionic項目結果（顯示在ios和Android上的樣式）

ionic serve --lab 

說明： 運行emulate/run命令的時候會在platforms目錄下生成apk.

在執行platform和emulate命令的過程中如果出現報錯大多是因為android環境沒有安裝完全導致的。請在cmd中輸入android打開android SDK manager檢查相關的包是否已經安裝完全。

一般來說，tool和emulator都是必須要安裝的.然后選擇某一版本的android API進行安裝。

常用命令： 

npm install -g cnpm --registry=https://registry.npm.taobao.org（npm鏡像源指向淘寶） 
cnpm install -g cordova ionic（安裝cordova ionic） 
cnpm update -g cordova ionic（更新cordova ionic） 
ionic -help（查看幫助） 
ionic -v（查看版本） 

ionic start myionictest blank（空項目） 
ionic start myionictest tabs（帶導航條） 
ionic start myionictest sidemenu（帶側滑菜單） 

ionic platform add android（添加android平臺） 
ionic platform remove android（移除android平臺） 
ionic build android（編譯項目apk） 
ionic emulate android（運行項目apk 手機連接在手機運行 模擬器連接在模擬器運行） 
ionic run android （相當于build + emulate） 
ionic serve（開啟服務調試） 

 如果小伙伴看到了此文章，按照我整理的文檔步驟進行操作、遇到了問題可以隨時找我解決。

　　工作了四年多，一直專注于前后臺運維相關的開發工作、前幾年專注傳統行業OA、商城、CMS、電信、醫療相關管理軟件開發、慢慢的從傳統行業跳到互聯網公司工作，慢慢的通過一年兩年互聯網公司項目的接觸。客戶端app與服務器結合開發流程、敏捷式管理、自己不斷的摸搜學習也有了自己的一套學習方式和經驗、互聯網給我帶來的技術更新之快要求也高、所有需要不斷要求自己跟上節奏、前端的崛起、大數據趨勢、隨著更多的大學生想步入IT行業，要求也不像三四年前那會學習一門java語言會個div+css就可以找到工作。如果是新手想要步入互聯網行業想做前端，我非常愿意跟你聊聊談談作為你的一個參考、老司機也是一個有故事的人，我的qq：525331804 。慢慢的轉向移動端開發、學習html5、css3、angularjs、nodejs、ionic等技術 ionic是我目前主要學習的一個接近原生國外UI的一個框架技術、混合式開發未來將有可能運用到更多管理軟件開發，這只是我自己的一個看法。ionic 開發app一個是成本低、一個人就可以開發一套安卓、iOS app 而且體驗也不錯。現在對ionic 有一個全新的認識、網上很多搭建教程都不是特別全面、 這個是經過我本人搭建了一遍總結下來的、也有一些參考網上的就沒有多寫了，就借用過來。

最后幫自己的公眾號做一個宣傳，主要是分享 污公害、純天然不含廣告、 想了解可以關注、不感興趣的忽略。

微信公眾號搜索：zixuncool  或  資訊酷 

ionic2.x 混合式開發交流群：