1. Android 平台 HTML5 应⽤用开发
范圣刚，princetoad@gmail.com, www.tfan.org

2. What we will learn?
1.PhoneGap技术架构
2.Android开发环境搭建（PhoneGap和Eclipse/ADT
的整合）
3.使⽤用Dreamweaver 6.0开发PhoneGap应⽤用（DW
+PhoneGap Build）
4.编写⼀一个简单的应⽤用
5.使⽤用模拟器/设备进⾏行测试和部署

3. Android平台开发环境配置
• 可以选择的平台：Windows, Mac OS X, Linux
• 构建：Eclipse plug-in / Command-line tools

4. 准备⼯工作
• 下载并安装PhoneGap框架
• 安装JDK

5. 安装PhoneGap框架 - 下载
http://phonegap.com/download

6. ⺫⽬目录结构和安装路径
lib⺫⽬目录下针对每个平台有⼀一个单独的⺫⽬目录
因为Windows平台对路径⻓长度有限制，建议放到分区的根⺫⽬目录下。如:C:/phonegap

7. JDK的安装
https://developer.apple.com/downloads/index.action
• Oracle⺴⽹网站
• Apple
Developer

8. 安装Android SDK
http://developer.android.com/sdk/index.html

9. SDK安装/ADT安装/Eclipse配置
• 安装SDK Starter package
• 安装ADT（建议下载下来使⽤用Archive⽅方式安装）
• 给Eclipse配置SDK⺫⽬目录
• 选择对应的Android API版本从Android⾃自动下载安
装
• 创建AVD（虚拟设备）

10. 新的Eclipse项⺫⽬目

11. 项⺫⽬目设置

12. 创建assets/www⺫⽬目录

13. 拷⻉贝PhoneGap⽀支持⽂文件
JS⽂文件 lib/android/cordova-2.0.0.js assets/www/cordova-2.0.0.js
jar包 lib/android/cordova-2.0.0.jar libs/cordova-2.0.0.jar
配置 lib/android/xml res/xml
⽂文件

14. 更新后的项⺫⽬目⺫⽬目录

15. Android project -> PhoneGap project
• MainActivity.java
• 导⼊入PhoneGap类库：import org.apache.cordova.*; (2.0.0以前是com.phonegap.*)
• 将MainActivity由从Activity扩展改成DroidGap；【把项⺫⽬目改成PhoneGap项⺫⽬目】
• 去掉原先的import android.app.Activity; 【已经不需要Activity了】
• 将setContentView(R.layout.activity_main)改成super.loadUrl(“file:///android_asset/
www/index.html”);【指⽰示程序加载应⽤用的启动HTML⽂文件】

16. 修改AndroidManifest.xml⽂文件
• 增加⽀支持的屏幕尺⼨寸设置；
• 设置屏幕翻转和键盘隐藏变化设置；
• 增加⽤用户权限设置；

17. AndroidManifest.xml中权限和屏幕⽀支持的配置
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="15" />
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >

18. AndroidManifest.xml中⾃自动翻转⽀支持的配置
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale

19. 创建index.html⽂文件

20. 运⾏行结果
HTC⼿手机
模拟器

21. DW + PhoneGap Build
• http://build.phonegap.com
• 注册Build账号
• 设置证书....(for iOS)
• 可以免费host⼀一个Private的项⺫⽬目，其他SAAS收费
（类似github）

22. Adobe PhoneGap Build
可以使⽤用github账号登陆

24. PhoneGap Build Setting
SDK路径

25. Site > PhoneGap Build Service
下载
直接启动模拟器测试
发布⽤用的QR Code

26. PhoneGap Build
• 创建⼀一个PhoneGap Build项⺫⽬目
• Build Issue处理
• 应⽤用测试
• 调试模式

27. Thank you！