mac環境下node.js和phonegap/cordova創建ios和android應用
引用百度百科的一段描述:PhoneGap是一個用基于HTML，CSS和JavaScript的，創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以調用.?查看更多
使用前提:
已經安裝xcode
已經安裝python 2.7?(3.0一下版本)
已經安裝node 0.10.*(本環境是 0.10.28)
上面的安裝方法你可以在本博客搜索
cordova和phonegap是什么關系?
PhoneGap的代碼已經貢獻給了Apache軟件基金會（ASF），并且改名為 Apache Cordova.
這個名字來源于溫哥華的科爾多瓦街（Cordova Street），它是創建PhoneGap時Nitobi公司的所在地.
所以上面這2個東西其實是一個東西.下面就全部統一成 cordova
安裝 cordova 環境
sudo?npm?install?-g?cordova
經過幾分鐘的下載編譯,成功了.....
這時你就可以創建app相關項目了,命令如下:
$?cordova?create?sansiyueapp $?cd?sansiyueapp
一個app相關的空項目就算建好了.接著我們來創建 ios 和 android 相關應用.
ios版:
$?cordova?platform?add?ios
非常順利,你可以在Finder中看到 sansiyueapp 目錄 platforms文件夾下看到 ios 文件夾,已經創建成功,你可以用xcode開發這個項目.
android版:(稍微做一點心理準備,也許你也會碰到下面的坑)
$?phonegap?run?android 或者 $?cordova?platform?add?android
上面的2種命令方式是一致的,選擇其中一種運行即可
上面的錯誤大致是在生產安卓應用的時候,沒有找到android_home 環境變量的支持.因為我的環境已經安裝了jdk ,如果你發現和上面的錯誤不一樣,請按照下面的幾個步驟排查
需要如下環境支持:
JDK、Android SDK、Apache Ant
對應下載地址:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
http://developer.android.com/sdk/index.html
http://ant.apache.org/bindownload.cgi
因為我的環境之前安裝了jdk,所以這里忽略了.....
apache_ant安裝:
根據上面提供的地址進入下載頁,中間靠下的位置可以看到下面列出的3個壓縮包,你可以下載任意一個,我是用的中間這個壓縮文件.
我把解壓出來的文件夾拷貝的 /usr/local/ 目錄下, (如果你Finder 中找不到此文字,在終端用命令拷貝)
$?cp?-rf?~/Download/apache-ant-1.9.4?/usr/local/
這里注意一下,為了讓你當前登錄帳號在未來的日子里有足夠權限訪問此文件夾,需要你用命令給此文件夾賦權限.
首先要知道你的 用戶名和所在的用戶組,如何知道? 系統偏好設置 --> 用戶與用戶組
第一步解鎖, 接著第二步在當前賬號 右鍵高級選項 ,見下圖:
紅框處的用戶名和群組需要你記下來,然后執行下面命令賦權限
chown?zhangzhi:staff?apache-ant-1.9.4
接著運行下面命令
ln?-s?apache-ant-1.9.4?ant
這時你/usr/local/目錄下會多出來一個 ant的文件快捷方式
接著寫一個 apache_ant 應用的全局變量:
$?nano?/etc/bashrc
紅框處的內容寫到文件中,保存退出.
export ANT_HOME=/usr/local/ant
export PATH=${PATH}:${ANT_HOME}/bin
這樣你的?apache_ant ?環境變量就配置好了.終端看下:
$?ant?-version
看到版本是 1.9.4,說明環境變量生效了.
Android SDK 安裝配置
還是上面貼出的官網地址:?http://developer.android.com/sdk/index.html? (或許你需要翻墻,如果你還沒有vpn,請點擊查看此博文)
我直接下載了?android-studio-ide-1641136.dmg 這個是google官方推出的IDE開發環境,集成了SDK,當然你可以不安裝IDE,只安裝SDK也可以,但是后面生成的app畢竟要編譯,虛擬機部署,所以你值的擁有此IDE
安裝很簡單,雙擊,把應用拖到Application 應用列表即可.
注意:?cordova 生成 android應用的時候需要 android_sdk 環境變量,但是安裝?android-studio 并不會自動寫入 sdk的環境變量,需要手動設置.
你查找 sdk所在目錄是 ?~/Library/Android/sdk 但是這個相對路徑是你當前登錄帳號映射的目錄,環境變量需要絕對路徑(也就是說root帳號也必須能找到此路徑)
所以環境變量需要切換root帳號查看 ?/Users/zhangzhi/Library/Android/sdk
$?nano?~/.bash_profile
寫入 環境變量 ?export ANDROID_HOME="/Users/zhangzhi/Library/Android/sdk"
生成 android 應用所需要的前提條件到此都齊了,萬事俱備只欠東風!
進入 sansiyueapp 目錄
zhangzhi@moke:~$?cd?sansiyueapp zhangzhi@moke:~/sansiyueapp$?cordova?platform?add?android Creating?android?project... Creating?Cordova?project?for?the?Android?platform:Path:?platforms/androidPackage:?com.phonegap.helloworldName:?Hello?WorldAndroid?target:?android-19 Copying?template?files... Project?successfully?created. cp:?no?such?file?or?directory:?/Users/zhangzhi/sansiyueapp/icon.png
OK,android應用生成也成功了.從Finder中查看目錄
xcode 打開ios項目,編譯運行模擬器如下:
android 應用模擬器截圖回頭補上.
