2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

Ionic Mac 環(huán)境配置

·??????? 安裝cordova之前要安裝nodejs 會(huì)包含npm安裝（npm是個(gè)包管理器），到官網(wǎng)下載https://nodejs.org/en/download/ 是個(gè)pkg包下載之后雙擊下載包運(yùn)行然后 step by step，osx下會(huì)自動(dòng)添加環(huán)境變量，不用手動(dòng)配置，默認(rèn)安裝到、usr/local下，可以更改目錄?

這一步就可以安裝cordova了和ionic （這一步的主要問題是cordova安裝包的鏡像問題）

·???????

如果提示上面的就表示安裝成功了。$cordova –v；ionic –v

創(chuàng)建Ionic項(xiàng)目 ionic start myIonic blank

其中myIonic為我們的項(xiàng)目名稱?
執(zhí)行過程它會(huì)從github下載項(xiàng)目源碼，請(qǐng)等待。。。?
執(zhí)行完畢后你到開發(fā)目錄下查看會(huì)發(fā)現(xiàn)多了一個(gè)名為myIonic的文件夾，這個(gè)文件夾就是Ionic項(xiàng)目的所在目錄了。?
目錄下有以下文件：

hooks?????????? //google之后這個(gè)目錄應(yīng)該是在編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中

plugins???????? //cordova插件的目錄，插件的安裝下一節(jié)詳述

scss??????????? //scss文件，發(fā)布時(shí)編譯這個(gè)目錄下的文件輸出到www的css目錄中

www???????????? //我們的開發(fā)目錄，頁面、樣式、腳本和圖片都放在這個(gè)目錄下

--css

--img

--js

--lib

--index.html

bower.json????? //bower配置文件

config.xml????? //Ionic的配置文件 ?可以配置app的id，名稱、描述起始頁和一起其他配置

gulpfile.js???? //gulp構(gòu)建工具的執(zhí)行文件，在這個(gè)文件中創(chuàng)建任務(wù)實(shí)現(xiàn)編譯scss，css、js優(yōu)化等

ionic.project?? //Ionic的項(xiàng)目文件可以配置Ionic命令中l(wèi)ivereload的監(jiān)控文件

package.json??? //npm配置文件

啟動(dòng)測(cè)試服務(wù)器：ionic serve

部署到手機(jī)和cordova插件的使用

一個(gè)簡(jiǎn)單的Web應(yīng)用我們已經(jīng)開發(fā)完成了，接下來我們就要做一些部署到移動(dòng)端之前的準(zhǔn)備了。?
Ionic支持兩個(gè)平臺(tái)ios、android，默認(rèn)的Ionic項(xiàng)目并沒有添加這兩個(gè)平臺(tái)，我們需要手動(dòng)添加，cd到開發(fā)目錄下執(zhí)行命令：

ionic platform add android

ionic platform add ios

一般項(xiàng)目都需要兩個(gè)平臺(tái)同時(shí)部署，所以我們就添加兩個(gè)，執(zhí)行完畢之后執(zhí)行命令查看你已經(jīng)添加的平臺(tái)列表：

ionic platform list

結(jié)果：

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部署分真機(jī)和虛擬機(jī)，其實(shí)方法類似，在部署之前需要安裝JDK、Android SDK到開發(fā)環(huán)境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到環(huán)境變量中去，并把Android SDK安裝目錄添加到Path中。?
配置好之后打開PowerShell輸入命令返回正確：

adb version

·?????? 1

接下來就簡(jiǎn)單了，把手機(jī)連接到電腦，并開啟usb調(diào)試模式，執(zhí)行命令：

ionic run android

·?????? 1

Ionic開始編譯項(xiàng)目生成apk并遠(yuǎn)程安裝到手機(jī)上后自動(dòng)打開應(yīng)用，是不是很簡(jiǎn)單？

IOS?
ios部署需要一臺(tái)mac電腦，在mac電腦上面根據(jù)本篇ionic的安裝過程安裝環(huán)境之后，添加ios平臺(tái)到項(xiàng)目，因?yàn)閍pple開發(fā)的證書限制我們?cè)跊]有申請(qǐng)購買apple賬號(hào)的情況下，使用虛擬機(jī)來部署我們的應(yīng)用，在部署之前需要使用npm安裝一個(gè)ios-sim插件用來調(diào)用模擬器的，執(zhí)行命令：

sudo npm install -g ios-sim

·?????? 1

安裝好之后，cd 到開發(fā)目錄下執(zhí)行：

sudo ionic build ios

4.調(diào)試

我們?cè)谇懊嬉呀?jīng)說過，在開發(fā)前期我們一般會(huì)在web中調(diào)試，而Ionic為我們提供了非常方面的web調(diào)試環(huán)境，只需要執(zhí)行ionic serve就可以實(shí)現(xiàn)lievereload，而在部署到移動(dòng)端后也可以開啟livereload的，我們只需要修改下我們r(jià)un命令參數(shù)：

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

這是android的調(diào)試模式，無論在虛擬機(jī)上還是在手機(jī)上都可以實(shí)現(xiàn)livereload，ios則只需要把a(bǔ)ndroid修改為ios即可，不用每次開發(fā)完成編譯再部署！-c是開啟客戶端日志輸出，-s是開啟服務(wù)器端日志輸出。–livereload參數(shù)的的意義在于修改生成包中的起始頁面地址，修改為遠(yuǎn)程服務(wù)器地址這樣就可以做到修改即通知客戶端刷新頁面了。

5.ios打包、android打包

能使用Ionic來開發(fā)app的很可能對(duì)Ios和android的app打包發(fā)布流程不是很熟悉，我這里簡(jiǎn)單說明下：?
Android?
Android的打包比較簡(jiǎn)單執(zhí)行命令：

ionic build android -release ·?????? 1

找到www/platform目錄下生成的apk包，此時(shí)的apk還不能被安裝到手機(jī)上，還需要一步簽名操作，大家可以參考：?
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

IOS?
ipa文件的打包需要現(xiàn)在apple develop網(wǎng)站上注冊(cè)一個(gè)賬號(hào)，在網(wǎng)站申請(qǐng)生產(chǎn)環(huán)境的證書導(dǎo)入到你的開發(fā)機(jī)中和開發(fā)機(jī)綁定才可以使用xcode導(dǎo)出，詳情參閱：?
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

轉(zhuǎn)載于:https://my.oschina.net/anziguoer/blog/634450

總結(jié)

以上是生活随笔為你收集整理的Ionic Mac 环境配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。