Mac下安裝ionic和cordova,并生成iOS項目
字數562閱讀855評論0喜歡1
為了開發HTML5,除了最新使用React Native等之外,目前首選的為穩定的ionic+Angularjs來開發iOS和android.
Ionic(ionicframework一款接近原生的HTML5移動App開發框架 會html css js就可以開發app
博客地址: http://blog.img421.com/macxia-an-zhuang-ioniche-cordova-bing-yun-xing-iosxiang-mu/
ionic中文教程講解的很清楚,此網站翻譯了一些原官網文檔,而且也有諸多例子,讓我們能夠更好的學習.本教程講述一下ionic、cordova安裝的具體內容.
1. 安裝npm 、node.js
1.1 打開`終端(Terminal)`,分別輸入以下內容:
npm -v
node -v
如果npm或者node可能并非最新版本或者沒有安裝,可以到nodejs官網下載最新版本.
下載好后雙擊下載的pkg包默認安裝即可。
2.安裝ionic和cordova
2.1因為某些原因,國內的網絡安裝ionic和cordova 會出現錯誤,因此要跳過某些墻。采用淘寶NPM鏡像。打開終端直接輸入以下命令即可。
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
2.2 通過淘寶NPM鏡像就可以安裝ionic和cordova包.
輸入在終端中以下內容:
sudo cnpm install -g cordova ionic
**ps:等待時間可能會長,請耐心等候**
輸出以上內容即可安裝成功。
2.3 安裝成功以后,要查看安裝的包內容是否全部都已安裝.運行命令:
ionic info
上圖中所顯示的Not installed代表未安裝,安裝方式即為紅色給出的內容,照著內容安裝即可以.
**ps:不安裝的情況下就是不能在此環境下編譯等,但是對于瀏覽器運行無影響.**
`ios-sim`代表模擬器運行環境,
`ios-deploy`代表真機運行環境。
**ps:博主只安裝了模擬器環境**
3. 項目
3.1 項目生成
終端運行
//進入桌面
cd ./Desktop
//生成demo_1文件項目
ionic start demo_1
如果創建`iOS`應用,`終端`運行:
cd demo_1
ionic platform add ios (可能會需要sudo)
ionic build ios
ionic emulate ios? //模擬器運行
生成的iOS應用會在`platforms`文件夾中顯示。
上傳中...
可以有三種方式開始一個ionic項目：
$? ionic start myApp tabs# 創建帶有top欄和bottom欄的示例項目
$? ionic start myApp sidemenu# 創建帶有左側帶有menu欄的示例項目
$? ionic start myApp blank#創建空白項目
再執行下面命令就可以再瀏覽器查看效果了：
$? ionic sserve
確保你已經安裝了xcode，執行以下命令就可以再模擬器看到效果了：
$ sudo npm install -g ios-sim
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
確保你已經配置好android的開發環境，執行以下命令就可以再模擬器看到效果了：
$ cd myApp
$ ionic platform add android //這行可能會報錯
$ ionic build android
$ ionic emulate android
android基礎環境 JAVA 、ADT (Android SDK tools) （該過程不詳細敘述）
配置環境變量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
chmod -R 777 sdk/
brew update &&brew install ant
－ 使用android SDK manager 下載android的API 和鏡像（當然也可以離線下載）
－ 使用Android Virtual manager 創建android的虛擬機
sudo npm install -g cordova ionic
