Mac下安裝ionic和cordova,并生成iOS項(xiàng)目
字?jǐn)?shù)562閱讀855評(píng)論0喜歡1
為了開發(fā)HTML5,除了最新使用React Native等之外,目前首選的為穩(wěn)定的ionic+Angularjs來(lái)開發(fā)iOS和android.
Ionic(ionicframework一款接近原生的HTML5移動(dòng)App開發(fā)框架 會(huì)html css js就可以開發(fā)app
博客地址: http://blog.img421.com/macxia-an-zhuang-ioniche-cordova-bing-yun-xing-iosxiang-mu/
ionic中文教程講解的很清楚,此網(wǎng)站翻譯了一些原官網(wǎng)文檔,而且也有諸多例子,讓我們能夠更好的學(xué)習(xí).本教程講述一下ionic员凝、cordova安裝的具體內(nèi)容.
1. 安裝npm 、node.js
1.1 打開`終端(Terminal)`,分別輸入以下內(nèi)容:
npm -v
node -v
如果npm或者node可能并非最新版本或者沒(méi)有安裝,可以到nodejs官網(wǎng)下載最新版本.
下載好后雙擊下載的pkg包默認(rèn)安裝即可娩怎。
2.安裝ionic和cordova
2.1因?yàn)槟承┰?國(guó)內(nèi)的網(wǎng)絡(luò)安裝ionic和cordova 會(huì)出現(xiàn)錯(cuò)誤,因此要跳過(guò)某些墻勿决。采用淘寶NPM鏡像梗搅。打開終端直接輸入以下命令即可。
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
2.2 通過(guò)淘寶NPM鏡像就可以安裝ionic和cordova包.
輸入在終端中以下內(nèi)容:
sudo cnpm install -g cordova ionic
**ps:等待時(shí)間可能會(huì)長(zhǎng),請(qǐng)耐心等候**
輸出以上內(nèi)容即可安裝成功。
2.3 安裝成功以后,要查看安裝的包內(nèi)容是否全部都已安裝.運(yùn)行命令:
ionic info
上圖中所顯示的Not installed代表未安裝,安裝方式即為紅色給出的內(nèi)容,照著內(nèi)容安裝即可以.
**ps:不安裝的情況下就是不能在此環(huán)境下編譯等,但是對(duì)于瀏覽器運(yùn)行無(wú)影響.**
`ios-sim`代表模擬器運(yùn)行環(huán)境,
`ios-deploy`代表真機(jī)運(yùn)行環(huán)境食棕。
**ps:博主只安裝了模擬器環(huán)境**
3. 項(xiàng)目
3.1 項(xiàng)目生成
終端運(yùn)行
//進(jìn)入桌面
cd ./Desktop
//生成demo_1文件項(xiàng)目
ionic start demo_1
如果創(chuàng)建`iOS`應(yīng)用,`終端`運(yùn)行:
cd demo_1
ionic platform add ios (可能會(huì)需要sudo)
ionic build ios
ionic emulate ios? //模擬器運(yùn)行
生成的iOS應(yīng)用會(huì)在`platforms`文件夾中顯示呐萌。
上傳中...
可以有三種方式開始一個(gè)ionic項(xiàng)目：
$? ionic start myApp tabs# 創(chuàng)建帶有top欄和bottom欄的示例項(xiàng)目
$? ionic start myApp sidemenu# 創(chuàng)建帶有左側(cè)帶有menu欄的示例項(xiàng)目
$? ionic start myApp blank#創(chuàng)建空白項(xiàng)目
再執(zhí)行下面命令就可以再瀏覽器查看效果了：
$? ionic sserve
確保你已經(jīng)安裝了xcode馁痴，執(zhí)行以下命令就可以再模擬器看到效果了：
$ sudo npm install -g ios-sim
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
確保你已經(jīng)配置好android的開發(fā)環(huán)境，執(zhí)行以下命令就可以再模擬器看到效果了：
$ cd myApp
$ ionic platform add android //這行可能會(huì)報(bào)錯(cuò)
$ ionic build android
$ ionic emulate android
android基礎(chǔ)環(huán)境 JAVA 肺孤、ADT (Android SDK tools) （該過(guò)程不詳細(xì)敘述）
配置環(huán)境變量sudo vim ~/.bash_profile或者sudo vim .profile
export? PATH=${PATH}:/Users/adsage/work/adt/sdk/platform-tools:/Users/adsage/work/adt/sdk/tools
ANDROID_HOME=$HOME/work/adt/sdk
export ANDROID_HOME
使環(huán)境變量生效source .bash_profile
將android SDK目錄權(quán)限設(shè)置為可寫
chmod -R 777 sdk/
brew update &&brew install ant
－ 使用android SDK manager 下載android的API 和鏡像（當(dāng)然也可以離線下載）
－ 使用Android Virtual manager 創(chuàng)建android的虛擬機(jī)
sudo npm install -g cordova ionic
