來自:http://bbs.ionic-china.com/read.php?tid=7&fid=4
搭建環境 安裝教程
ionic簡介
為什么選用ionic:
徹底開源且免費
性能優異
基於紅的發紫的AngularJs
漂亮的UI
強大的命令行(基於更熱門的nodejs)
開發團隊非常活躍。
ngCordova,將主流的Cordova API或者Cordova插件封裝為AngularJS擴展,使用非常方便。
開源免費的webfont icon庫ionicons,基本滿足你icon需求。
本篇主要講解windows平台搭建編譯APK MacOS搭建編譯IPK看這里
必備:
Node.js (npm安裝工具) 百度下載 官網下載 注:如果官網新版不能安裝請用百度下載0.12.7版
jdk (android編譯依賴) 百度下載 官網下載
android (ADK編譯) 百度下載 官網下載 (建議迅雷)
開發工具建議Sublime + ionic小助手
選件:
phonegap (移動端預覽) 百度下載 phonegap.apk國內下載 phonegap.ipk蘋果下載 phonegap.exe官網下載
Git(bower) 百度下載 官網下載
jre(git需要) 百度下載 官網下載
選件的介紹和安裝請看另一篇帖子傳送門
大致步驟(注意安裝順序):安裝node.js - 安裝jdk - 安裝android(adk) - 命令安裝ionic - 創建項目 - 編譯項目apk
注意事項:
百度下載的可能為舊版,但保證可以安裝,想裝新版的請官網下載。
安裝ngCordova需要安裝bower(Git和jre)不值得 推薦使用ionic小助手,小助手會自動下載安裝ngCordova。
建議所有程序管理員運行包括cmd androidsdk避免莫名的問題如sdk打不開cmd某些命令不能執行。
1.安裝node.js
沒什么好說的一路next選好路徑(避免中文目錄,這東西驕着呢我連空格都沒寫)
點擊查看原圖
安裝后cmd執行node -v看到版本就是安裝成功了(無需設置path)
點擊查看原圖
其實現在我們就可以安裝ionic了,但是我們要編譯apk才能看到效果所以需要裝sdk (這里注意順序先裝sdk再裝ionic)
2.安裝JDK(androidSDK需要)
仍然沒什么好說的java的jdk一路next
點擊查看原圖
安裝后cmd執行java -version看到版本就是安裝成功了(無需設置path)
點擊查看原圖
3.安裝androidSDK
選好路徑一路next
點擊查看原圖
現在是不能檢查androidsdk的 需要設置環境變量
點擊查看原圖
我的電腦 - 右鍵屬性 - 高級系統設置 - 環境變量
新建變量名 變量值
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
點擊查看原圖
接受 - 安裝
點擊查看原圖
安裝完的列表像我這樣子就可以了注意:新版ionic裝23就好,如果你遇到錯誤就把API 22的platform也勾上
點擊查看原圖
安裝前283M
點擊查看原圖
4.安裝ionic cordova
現在開始用node(npm)安裝ionic 只需要幾條命令
打開cmd(建議管理員運行)npm經常無法訪問 我們先映射到淘寶的服務器
npm install -g cnpm --registry=https://registry.npm.taobao.org
點擊查看原圖
然后我們就可以用cnpm命令安裝了
cnpm install -g cordova ionic(安裝 cordova ionic)
點擊查看原圖
安裝完成后運行ionic -v可以看到版本
點擊查看原圖
現在我們創建個項目看看
ionic start myApp tabs(創建過程y/n詢問是否打開官網n即可)
點擊查看原圖
可以看到我們創建的項目文件夾
點擊查看原圖
現在我們可以運行ionic server預覽下項目
點擊查看原圖
編譯需要添加platform平台
ionic platform add android(添加平台ionic platform remove android移除平台 平台大概20M遷移項目時候需要刪掉)
點擊查看原圖
ionic build android(第一次編譯要下載gradle-2.2.1-all.zip和一堆jar 如果gradle-2.2.1-all.zip下載太慢換個時間段再嘗試)
三個模版APK文件百度下載
常用命令:
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 myApp blank(空項目)
ionic start myApp tabs(帶導航條)
ionic start myApp 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 (開啟服務調試)
ionic build ios(編譯項目ipk)ionic emulate ios(運行項目ipk)