Android 平台 HTML5 应⽤用开发

范圣刚，princetoad@gmail.com, www.tfan.org

What we will learn?

1.PhoneGap技术架构2.Android开发环境搭建（PhoneGap和Eclipse/ADT的整合）

3.使⽤用Dreamweaver 6.0开发PhoneGap应⽤用（DW+PhoneGap Build）

4.编写⼀一个简单的应⽤用5.使⽤用模拟器/设备进⾏行测试和部署

Android平台开发环境配置•可以选择的平台：Windows, Mac OS X, Linux

•构建：Eclipse plug-in / Command-line tools

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

•安装JDK

安装PhoneGap框架 - 下载

http://phonegap.com/download

⺫⽬目录结构和安装路径

lib⺫⽬目录下针对每个平台有⼀一个单独的⺫⽬目录

因为Windows平台对路径⻓长度有限制，建议放到分区的根⺫⽬目录下。如:C:/phonegap

JDK的安装

•Oracle⺴⽹网站

• Apple Developer

https://developer.apple.com/downloads/index.action

安装Android SDKhttp://developer.android.com/sdk/index.html

SDK安装/ADT安装/Eclipse配置•安装SDK Starter package

•安装ADT（建议下载下来使⽤用Archive⽅方式安装）

•给Eclipse配置SDK⺫⽬目录

•选择对应的Android API版本从Android⾃自动下载安装

•创建AVD（虚拟设备）

新的Eclipse项⺫⽬目

项⺫⽬目设置

创建assets/www⺫⽬目录

拷⻉贝PhoneGap⽀支持⽂文件

lib/android/cordova-2.0.0.js assets/www/cordova-2.0.0.js

lib/android/cordova-2.0.0.jar libs/cordova-2.0.0.jar

lib/android/xml res/xml

JS⽂文件

jar包

配置⽂文件

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

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(“!le:///android_asset/www/index.html”);【指⽰示程序加载应⽤用的启动HTML⽂文件】

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

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" >

AndroidManifest.xml中⾃自动翻转⽀支持的配置

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale

创建index.html⽂文件

运⾏行结果

模拟器

HTC⼿手机

DW + PhoneGap Build

• http://build.phonegap.com

•注册Build账号

•设置证书....(for iOS)

•可以免费host⼀一个Private的项⺫⽬目，其他SAAS收费（类似github）

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

PhoneGap Build Setting

SDK路径

Site > PhoneGap Build Service

下载

发布⽤用的QR Code

直接启动模拟器测试

PhoneGap Build

•创建⼀一个PhoneGap Build项⺫⽬目

• Build Issue处理

•应⽤用测试•调试模式

Thank you！