最近在使用phonegap 經過各方摸索和閱讀各種資料碰到的問題都一一解決了,在這里寫個總結方便大家和自己以后查閱,第13步以后可以不用理會前面就足以生成並發布APP了
升級項目cordova ,現在是3.5.0版本
D:\projectName>cordova platform update android
- Phonegap的安裝,每一步都有相應的命令去檢查到底有沒有正確安裝 ,如果沒有后面編譯的時候也有足夠的提示信息提示哪里沒有安裝正確
環境 : WIN系統,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova)
1. 安裝JRE,設置JAVA_HOME,比如JAVA_HOME=C:\program\Java\jre6\bin, 具體如何設置可以查看JDK的設置
檢查:打java -version可查看java版本 如果確定裝了JDK 但是打java出現找不到命令 那就是PATH沒設置好了 在win7的環境變量里面設置 把JDK安裝目錄下的bin目錄 復制進去
2. Cordova支持Android 2.2, 2.3, and 4.x.
下載安裝SDK: http://developer.android.com/sdk/index.html
安裝Android SDK,比如安裝在c:\android-sdk\,需要把c:\android-sdk\tools和platform-tools添加到系統PATH環境變量中。
要不出后面第8步出錯誤:
[Error: The command `android` failed. Make sure you have the latest Android SDK installed, and the `android` command (inside the tools/ folder) added to your path. Output: ‘android’...... ]
3. 安裝Eclipse,要能支持Android項目。http://www.eclipse.org/downloads/
4. 安裝ant,並將ant.bat所在目錄加到path環境變量,如c:\apache-ant\bin\,http://ant.apache.org .
5. 安裝Node.js,安裝成功后,可在命令行輸入命令:node 或 npm . http://nodejs.org/ 。
(注:以下所有命令都在nodejs命令行窗口中輸入的)
6. 安裝PhoneGap工具集: 打開命令行,運行:npm install -g phonegap
7. 把盤符轉到想要創建項目的目錄,比如 c:\。
8. 創建App,運行:phonegap/cordova create hello com.vmeitime.hello HelloWorld
將在c:\hello下創建名為HelloWorld的項目,HTML5文件在C:\hello\www目錄里。
第一個參數hello表示項目文件夾名,在此文件夾下會生成www子目錄作為主頁面存入目錄,包括有css,js和img資源。 其中config.xml包括了重要的資源描述和項目配置信息.
第2個參數是可選的,com.vmeitime.hello表示項目包名; 第3個參數:HelloWord表示顯示的文本;
也可用-i 和-n 命令選項: c:\> phonegap create hello -n HelloWorld -i com.vmeitime.hello
c:\> phonegap create hello --name HelloWorld --id com.vmeitime.hello
當然,命令執行后,以上信息也可在后續開發中修改comfig.xml中的相應值。
9. 后續操作都要在創建的項目目錄下進行:cd hello
10. 運行build命令,輸入不同平台標識,生成不同平台下的相應文件。如下以android設備為例:
c:\hello> phonegap build android ,如果要build release 版本 :cordova build android –release(這里必須用cordova, 用phonegap無法生成release 版本)
要查看詳細(verbose)執行過程,可增加命令參數-V :
c:\hello> phonegap -V build android
之后可以看到C:\hello\platforms\android里出現Android項目。
11. 在模塊器或移動設備上測試App: c:\hello>phonegap install android
d:\projectName\platforms\android\ant-build>phonegap run android
也可用參數e專門指定運行在模塊器上: c:\hello>phonegap -e install android
12. build和運行(相當於上面build和install兩步驟操作):c:\hello>phonegap run android
也可用參數e專門指定運行在模塊器上:c:\hello>phonegap -e run android
13 對release版本進行簽名,首先你要先生成一個Keystore
這條命令是對release版本進行簽名 這樣才能發布到google play上去
d:\projectName \platforms\android\ant-build >jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore xx.keystore xx.apk mykey -storepass xx
storepass 是你keystore的密碼,mykey是你keystore的alias
可以用keytool -list -keystore myname.keystore 查看你keystore的具體信息
14簽名完后 你要發布到google play去 會提示你沒有進行zipalign
d:
cd D:\Enviroment\Android Software\SDK\sdk\tools
zipalign -f -v 4 "D:\ projectName\platforms\android\ant-build\project-release.apk" "D:\ projectName\platforms\android\ant-build\project.apk"
這樣終於可以生成一個可以發布到google play 的apk了
15 調試有3種方法
- 直接用命令phonegap run android
- 用AVDmanger
- 真機調試,可以把APK放到DROPBOX里然后直接安裝就可以了
Icon 和splashscreen
在3.5版本 config.xml要放在最上層的文件夾里 d:/project/config.xml
然后在config.xml加入這段
<platform name="android">
<icon src="res/android/icon.png" density="ldpi" />
<icon src="res/android/icon.png" density="mdpi" />
<icon src="res/android/icon.png" density="hdpi" />
<icon src="res/android/icon.png" density="xhdpi" />
</platform>
Splahscreen 要直接 去d:\projectNam\platforms\android\res 里面設置
__________________________________________________________________________________________
16. 打開Eclispe,導入項目C:\hello\platforms\android,HelloWorld。
17. 可能項目有一些錯誤,把Android Project Build Target設置為最高等級的API Level一般就能解決。
18. 然后就可以用Eclipse啟動項目了。
19. 可以用命令phonegap emulate android在模擬器里啟動項目,不過感覺比Eclipse麻煩,總是啟動一個新的模擬器。
用這個方法還要注意Android虛擬設備的版本,似乎至少是API Level 10,因為自動生成的AndroidManifest.xml里:
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="17" />
20. 可以用命令phonegap run android在真實設備上運行App。
21. 添加插件(需要先安裝git工具 https://help.github.com/articles/set-up-git):
PhoneGap 3.0 最需要關注的是完全的插件體系結構,所有的功能特性包括攝像頭等都是使用插件方式提供。也就是說新建項目后很多功能是無法使用的,你必須將其對應的插件添加到項目中。
例如在 cordova 中添加插件的方法是:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
而通過 phonegap 命令行工具的方法是:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
這意味着在開始 PhoneGap 項目時你要先考慮項目需要什么功能,然后通過命令行來添加這些功能。
1). 添加的插件都將放在C:\hello\plugins目錄下.
2). 同時會在所有平台下的config.xml文件中增加feature插件配置,如:C:\hello\platforms\<平台>\res\xml\config.xml)
3). 增加相應的插件java文件:C:\hello\platforms\android\src
4). 增加相應的插件js文件:C:\hello\platforms\android\assets\www\plugins
下面是完整的插件列表,我直接拷貝過來,可能會有變化:
Basic device information (Device API):
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
Network Connection and Battery Events:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
Accelerometer, Compass, and Geolocation:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Camera, Media playback and Capture:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
Access files on device or network (File API):
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
Notification via dialog box or vibration:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
Contacts:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
Globalization:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
Splashscreen:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
Open new browser windows (InAppBrowser):
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
Debug console:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
查看當前已安裝的插件: $ phonegap local plugin list
刪除指定的插件: $ phonegap local plugin remove org.apache.cordova.core.console
22自定義各平台資源(merges):
在www/merges/目錄下創建各平台不同的資源文件,如css,js,圖片等,引用相應的文件路徑時,不需要寫各平台路徑。如:
在www/index.html文件中添加自定義的css文件overrides.css如下:
<link rel="stylesheet" type="text/css" href="css/overrides.css" />
在www/merges/android/目錄下創建針對於android平台的overrides.css,(如果是ios,由是www/merges/ios/overrides.css文件。)
overrides.css文件中添加如下內容,覆蓋www/css/index.css文件中默認的12px文字大小樣式:
body { font-size:14px; }
這樣,在android平台下,顯示的文件是14px,其他平台下顯示的文字是12px;
也可添加各平台自定義的圖片資源,如 merges/ios/img/back_button.png, 在www/index.html頁面引用的寫法是img/back_button.png.
23. 遠程編譯:
默認情況下,是編譯本地安裝SDK環境的相應平台,生成目標在platforms。 但也可通過遠程編譯本地沒有安裝SDK(或已安裝SDK)的相應平台。也可遠程測試。
1). 首先,你要在PhoneGap Build網站(https://build.phonegap.com/) 上注冊賬號,並使用login命令登錄操作。
$ phonegap remote login -u iamreallyadog@gmail.com -p mYpASSw0RD
$ phonegap remote login --username iamreallyadog@gmail.com --password mYpASSw0RD
使用loginout命令退出登錄phonegap build.
$ phonegap remote logout
2). 遠程編譯:$ phonegap remote build ios
3). 要使用插件,你必須先添加插件到本地,然后再遠程編譯。如:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
$ phonegap remote build ios
4) $ phonegap remote install ios
# ...or...
$ phonegap remote run ios
5) 默認情況下是local本地編譯,如下兩命令是一樣效果:
$ phonegap local build ios
$ phonegap build ios
24. 更新phonegap到最新版本命令:c:\> npm update -g phonegap
22. 查看phonegap版本命令:
$ phonegap version
$ phonegap -v
25. 查看phonegap詳細信息命令:
$ npm info phonegap
26。安裝指定版本的phonegap命令:
c:\> npm install -g phonegap@2.9.0-rc1-0.12.2