· 安裝cordova以前要安裝nodejs 會包含npm安裝(npm是個包管理器),到官網下載https://nodejs.org/en/download/ 是個pkg包下載以後雙擊下載包運行而後 step by step,osx下會自動添加環境變量,不用手動配置,默認安裝到、usr/local下,能夠更改目錄
css
這一步就能夠安裝cordova了和ionic (這一步的主要問題是cordova安裝包的鏡像問題) html
· java
若是提示上面的就表示安裝成功了。$cordova –v;ionic –v node
建立Ionic項目 ionic start myIonic blank android
其中myIonic爲咱們的項目名稱
執行過程它會從github下載項目源碼,請等待。。。
執行完畢後你到開發目錄下查看會發現多了一個名爲myIonic的文件夾,這個文件夾就是Ionic項目的所在目錄了。
目錄下有如下文件: ios
hooks //google以後這個目錄應該是在編譯cordova時自定義的腳本命令,方便整合到咱們的編譯系統和版本控制系統中 git
plugins //cordova插件的目錄,插件的安裝下一節詳述 github
scss //scss文件,發佈時編譯這個目錄下的文件輸出到www的css目錄中 web
www //咱們的開發目錄,頁面、樣式、腳本和圖片都放在這個目錄下 apache
--css
--img
--js
--lib
--index.html
bower.json //bower配置文件
config.xml //Ionic的配置文件 ⱃ能夠配置app的id,名稱、描述起始頁和一塊兒其餘配置
gulpfile.js //gulp構建工具的執行文件,在這個文件中建立任務實現編譯scss,css、js優化等
ionic.project //Ionic的項目文件能夠配置Ionic命令中livereload的監控文件
package.json //npm配置文件
啓動測試服務器:ionic serve
一個簡單的Web應用咱們已經開發完成了,接下來咱們就要作一些部署到移動端以前的準備了。
Ionic支持兩個平臺ios、android,默認的Ionic項目並無添加這兩個平臺,咱們須要手動添加,cd到開發目錄下執行命令:
ionic platform add android
ionic platform add ios
通常項目都須要兩個平臺同時部署,因此咱們就添加兩個,執行完畢以後執行命令查看你已經添加的平臺列表:
ionic platform list
結果:
Installed platforms: android 4.0.0, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8
接下來的部署咱們分開講述:
http://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html
Install Java Development Kit (JDK) 7 or later.
When installing on Windows you also need to set JAVA_HOME Environment Variable according to JDK installation path (for example, C:\Program Files\Java\jdk1.7.0_75).
Install the Android Stand-alone SDK Tools or Android Studio. Procceed with Android Studio if you plan developing new Cordova for Android plugins or using native tools to run and debug Android platform. Otherwise,Android Stand-alone SDK Tools are enough to build and deploy Android application.
Detailed installation instructions are available as part of installation links above.
For Cordova command-line tools to work, or the CLI that is based upon them, you need to include the SDK'stools and platform-tools directories in your PATH. On a Mac, you can use a text editor to create or modify the~/.bash_profile file, adding a line such as the following, depending on where the SDK installs:
export PATH=${PATH}:/Development/android-sdk/platform-tools:/Development/android-sdk/tools
This line in ~/.bash_profile exposes these tools in newly opened terminal windows. If your terminal window is already open in OSX, or to avoid a logout/login on Linux, run this to make them available in the current terminal window:
$ source ~/.bash_profile
Android
Android部署分真機和虛擬機,其實方法相似,在部署以前須要安裝JDK、Android SDK到開發環境中,配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到環境變量中去,並把Android SDK安裝目錄添加到Path中。
配置好以後打開PowerShell輸入命令返回正確:
adb version
· 1
接下來就簡單了,把手機鏈接到電腦,並開啓usb調試模式,執行命令:
ionic run android
· 1
Ionic開始編譯項目生成apk並遠程安裝到手機上後自動打開應用,是否是很簡單?
IOS
ios部署須要一臺mac電腦,在mac電腦上面根據本篇ionic的安裝過程安裝環境以後,添加ios平臺到項目,由於apple開發的證書限制咱們在沒有申請購買apple帳號的狀況下,使用虛擬機來部署咱們的應用,在部署以前須要使用npm安裝一個ios-sim插件用來調用模擬器的,執行命令:
sudo npm install -g ios-sim
· 1
安裝好以後,cd 到開發目錄下執行:
sudo ionic build ios
咱們在前面已經說過,在開發前期咱們通常會在web中調試,而Ionic爲咱們提供了很是方面的web調試環境,只須要執行ionic serve就能夠實現lievereload,而在部署到移動端後也能夠開啓livereload的,咱們只須要修改下咱們run命令參數:
ionic run android --livereload -c -s
· 1
這是android的調試模式,不管在虛擬機上仍是在手機上均可以實現livereload,ios則只須要把android修改成ios便可,不用每次開發完成編譯再部署!-c是開啓客戶端日誌輸出,-s是開啓服務器端日誌輸出。–livereload參數的的意義在於修改生成包中的起始頁面地址,修改成遠程服務器地址這樣就能夠作到修改即通知客戶端刷新頁面了。
能使用Ionic來開發app的極可能對Ios和android的app打包發佈流程不是很熟悉,我這裏簡單說明下:
Android
Android的打包比較簡單執行命令:
ionic build android -release
· 1
找到www/platform目錄下生成的apk包,此時的apk還不能被安裝到手機上,還須要一步簽名操做,你們能夠參考:
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html
IOS
ipa文件的打包須要如今apple develop網站上註冊一個帳號,在網站申請生產環境的證書導入到你的開發機中和開發機綁定纔可使用xcode導出,詳情參閱:
http://blog.csdn.net/songrotek/article/details/8448331
http://www.mexiqq.com/2014/07/25/xcode6+ios8%E6%9C%80%E6%96%B0%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/