Ionic Mac 環境配置

Ionic Mac 環境配置

·        安裝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

部署到手機和cordova插件的使用

一個簡單的Web應用咱們已經開發完成了,接下來咱們就要作一些部署到移動端以前的準備了。 
Ionic
支持兩個平臺iosandroid,默認的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 the Java Development Kit (JDK)

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 SDK

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部署分真機和虛擬機,其實方法相似,在部署以前須要安裝JDKAndroid 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

4.調試

咱們在前面已經說過,在開發前期咱們通常會在web中調試,而Ionic爲咱們提供了很是方面的web調試環境,只須要執行ionic serve就能夠實現lievereload,而在部署到移動端後也能夠開啓livereload的,咱們只須要修改下咱們run命令參數:

ionic run android --livereload -c -s
·       1

這是android的調試模式,不管在虛擬機上仍是在手機上均可以實現livereloadios則只須要把android修改成ios便可,不用每次開發完成編譯再部署!-c是開啓客戶端日誌輸出,-s是開啓服務器端日誌輸出。–livereload參數的的意義在於修改生成包中的起始頁面地址,修改成遠程服務器地址這樣就能夠作到修改即通知客戶端刷新頁面了。

5.ios打包、android打包

能使用Ionic來開發app的極可能對Iosandroidapp打包發佈流程不是很熟悉,我這裏簡單說明下: 
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/

 

http://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html

相關文章
相關標籤/搜索