Phonegap+XCode Mac OS 環境搭建

本篇博文給大家介紹如何在Mac OS中配置Phonegap的開發環境。

配置各種開發環境：

1.Java JDK

jdk1.7.0_80

2.Android SDK

1.啟動Terminal終端工具
2.輸入cd ~/ 進入當前用戶的home目錄
3.創建：touch .bash_profile
4.打開並編輯：open .bash_profile
5、在文件中寫入以下內容：export PATH=${PATH}:/Users/sxpmg/Application/android-sdk-mac_x86/tools:/Users/sxpmg/Application/android-sdk-mac_x86/platform-tools 
其中：/Users/sxpmg/Application/android-sdk-mac_x86/tools不是固定的，它指向android SDK的tools目錄，/Users/sxpmg/Application/android-sdk-mac_x86/platform-tools指向android SDK的platform-tools目錄，也是根據具體情況而定。這只是我配置的時候所用的路徑而已。 
6、執行如下命令：source .bash_profile 
7、驗證：輸入adb回車。如果未顯示command not found，說明此命令有效，環境便亮設置完成。

具體怎么在Mac OS中配置環境變量，可參考：http://www.cnblogs.com/lee0oo0/archive/2013/06/10/3131341.html

3.Ant 打包工具

apache-ant-1.9.7
http://ant.apache.org/bindownload.cgi

4.Xcode （AndroidStudio）

5.Node.js

https://nodejs.org/en/

各種環境變量的配置

export PATH=${PATH}:/opt/apache-ant-1.9.7/bin

安裝Phonegap

啟動Terminal終端工具

Mac使用: sudo npm install -g phonegap

Mac使用: sudo npm install -g cordova

提醒：這段時間會比較長，我大概安裝了有20分鍾左右，所以這步需要大家耐心等待。

開始創建Phonegap的IOS應用程序

這步其實和Windows的創建步驟一致，只是build不一樣的平台而已。所以這邊就不細講了。

進入你要創建的項目目錄，然后創建phonegap項目。
$ cordova create hello com.example.hello HelloWorld
輸入完這個命令后cordova程序會幫你創建hello文件夾，里面就是這個phonegap環境了。
創建xcode項目文件。要編譯App肯定是要用xcode的，沒有安裝就去App Store下載吧。
$ cd hello
$ cordova platform add ios
之后你用finder進入子目錄就會看到platforms中得ios文件夾，接着你就運行里面項目編譯即可。

接下來講講前一篇博文沒講到的內容，如何調用很多系統的東西，比如攝像頭、系統信息、文件操作等等，或者第三方開發的插件？

Basic device information (Device API): (設備信息插件)

$ cordova plugin add org.apache.cordova.device
Network Connection and Battery Events:（網絡連接插件）

$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status
Accelerometer, Compass, and Geolocation:（陀螺儀）

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org.apache.cordova.device-orientation
$ cordova plugin add org.apache.cordova.geolocation
Camera, Media playback and Capture:（攝像頭拍照錄制等）

$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media
Access files on device or network (File API):（訪問文件）

$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org.apache.cordova.file-transfer
Notification via dialog box or vibration:（提醒）

$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibration
Contacts:（聯系人）

$ cordova plugin add org.apache.cordova.contacts
Globalization:

$ cordova plugin add org.apache.cordova.globalization
Splashscreen:

$ cordova plugin add org.apache.cordova.splashscreen
Open new browser windows (InAppBrowser):

$ cordova plugin add org.apache.cordova.inappbrowser
Debug console:

$ cordova plugin add org.apache.cordova.console

至此，Phonegap+XCode Mac OS下的開發環境就搭建完畢。祝各位順利完成環境的配置。

 

Thanks

Jack