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

一、ionic簡介 

爲何選用ionic: 

1. 完全開源且免費
2. 性能優異
3. 基於紅的發紫的AngularJs
4. 漂亮的UI
5. 強大的命令行(基於更熱門的nodejs)
6. 開發團隊很是活躍
7. ngCordova，將主流的Cordova API或者Cordova插件封裝爲AngularJS擴展，使用很是方便
8. 開源免費的webfont icon庫ionicons,基本知足你icon需求

 

二、相關下載: 

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 

 

三、安裝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 版本號 ：

 

 

 

三、安裝JDK(androidSDK須要的) 

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

　　

 

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

    

 

四、安裝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) 
若是你勾選了其它的，可能要下載二、30G的東西。像我這樣選只須要下載200M

 

 

 附加：項目集成Crosswalk須要勾選Extras下的Android Support Repository和Google Repository不然會報錯 

 

接受 - 安裝

 

 

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

 

 

 

 五、安裝 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 驗證是否安裝成功。

 

  六、下載安裝ionic、demo 本地、建立/編譯項目 

　　

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

　　npm install -g  cordova ionic

 

  

 

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

 

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

ionic （當前最新版本爲v2.2.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 

  

五、其中3和4能夠合併爲：

 

ionic run android 

  

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

 

六、更新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 。慢慢的轉向移動端開發、學習html五、css三、angularjs、nodejs、ionic等技術 ionic是我目前主要學習的一個接近原生國外UI的一個框架技術、混合式開發將來將有可能運用到更多管理軟件開發，這只是我本身的一個見解。ionic 開發app一個是成本低、一我的就能夠開發一套安卓、iOS app 並且體驗也不錯。如今對ionic 有一個全新的認識、網上不少搭建教程都不是特別全面、 這個是通過我本人搭建了一遍總結下來的、也有一些參考網上的就沒有多寫了，就借用過來。

最後幫本身的公衆號作一個宣傳，主要是分享 污公害、純自然不含廣告、 想了解能夠關注、不感興趣的忽略。

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

 

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

 

 

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