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...
Android平台开发环境配置• 可以选择的平台:Windows, Mac OS X, Linux• 构建:Eclipse plug-in / Command-line tools
准备⼯工作• 下载并安装PhoneGap框架• 安装JDK
安装PhoneGap框架 - 下载     http://phonegap.com/download
⺫⽬目录结构和安装路径           lib⺫⽬目录下针对每个平台有⼀一个单独的⺫⽬目录因为Windows平台对路径⻓长度有限制,建议放到分区的根⺫⽬目录下。如:C:/phonegap
JDK的安装         https://developer.apple.com/downloads/index.action• Oracle⺴⽹网站• Apple Developer
安装Android SDK       http://developer.android.com/sdk/index.html
SDK安装/ADT安装/Eclipse配置• 安装SDK Starter package• 安装ADT(建议下载下来使⽤用Archive⽅方式安装)• 给Eclipse配置SDK⺫⽬目录• 选择对应的Android API版本从Android⾃...
新的Eclipse项⺫⽬目
项⺫⽬目设置
创建assets/www⺫⽬目录
拷⻉贝PhoneGap⽀支持⽂文件JS⽂文件   lib/android/cordova-2.0.0.js    assets/www/cordova-2.0.0.jsjar包    lib/android/cordova-2.0.0.jar ...
更新后的项⺫⽬目⺫⽬目录
Android project -> PhoneGap project• MainActivity.java  •   导⼊入PhoneGap类库:import org.apache.cordova.*; (2.0.0以前是com.phoneg...
修改AndroidManifest.xml⽂文件• 增加⽀支持的屏幕尺⼨寸设置;• 设置屏幕翻转和键盘隐藏变化设置;• 增加⽤用户权限设置;
AndroidManifest.xml中权限和屏幕⽀支持的配置    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="15" />	    ...
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 SettingSDK路径
Site > PhoneGap Build Service                                下载                直接启动模拟器测试               发布⽤用的QR Code
PhoneGap Build• 创建⼀一个PhoneGap Build项⺫⽬目• Build Issue处理• 应⽤用测试• 调试模式
Thank you!
Android 平台 HTML5 应用开发
Upcoming SlideShare
Loading in...5
×

Android 平台 HTML5 应用开发

171

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
171
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Android 平台 HTML5 应用开发

  1. 1. Android 平台 HTML5 应⽤用开发范圣刚,princetoad@gmail.com, www.tfan.org
  2. 2. What we will learn?1.PhoneGap技术架构2.Android开发环境搭建(PhoneGap和Eclipse/ADT 的整合)3.使⽤用Dreamweaver 6.0开发PhoneGap应⽤用(DW +PhoneGap Build)4.编写⼀一个简单的应⽤用5.使⽤用模拟器/设备进⾏行测试和部署
  3. 3. Android平台开发环境配置• 可以选择的平台:Windows, Mac OS X, Linux• 构建:Eclipse plug-in / Command-line tools
  4. 4. 准备⼯工作• 下载并安装PhoneGap框架• 安装JDK
  5. 5. 安装PhoneGap框架 - 下载 http://phonegap.com/download
  6. 6. ⺫⽬目录结构和安装路径 lib⺫⽬目录下针对每个平台有⼀一个单独的⺫⽬目录因为Windows平台对路径⻓长度有限制,建议放到分区的根⺫⽬目录下。如:C:/phonegap
  7. 7. JDK的安装 https://developer.apple.com/downloads/index.action• Oracle⺴⽹网站• Apple Developer
  8. 8. 安装Android SDK http://developer.android.com/sdk/index.html
  9. 9. SDK安装/ADT安装/Eclipse配置• 安装SDK Starter package• 安装ADT(建议下载下来使⽤用Archive⽅方式安装)• 给Eclipse配置SDK⺫⽬目录• 选择对应的Android API版本从Android⾃自动下载安 装• 创建AVD(虚拟设备)
  10. 10. 新的Eclipse项⺫⽬目
  11. 11. 项⺫⽬目设置
  12. 12. 创建assets/www⺫⽬目录
  13. 13. 拷⻉贝PhoneGap⽀支持⽂文件JS⽂文件 lib/android/cordova-2.0.0.js assets/www/cordova-2.0.0.jsjar包 lib/android/cordova-2.0.0.jar libs/cordova-2.0.0.jar配置 lib/android/xml res/xml⽂文件
  14. 14. 更新后的项⺫⽬目⺫⽬目录
  15. 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. 16. 修改AndroidManifest.xml⽂文件• 增加⽀支持的屏幕尺⼨寸设置;• 设置屏幕翻转和键盘隐藏变化设置;• 增加⽤用户权限设置;
  17. 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. 18. AndroidManifest.xml中⾃自动翻转⽀支持的配置android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale
  19. 19. 创建index.html⽂文件
  20. 20. 运⾏行结果 HTC⼿手机 模拟器
  21. 21. DW + PhoneGap Build• http://build.phonegap.com• 注册Build账号• 设置证书....(for iOS)• 可以免费host⼀一个Private的项⺫⽬目,其他SAAS收费 (类似github)
  22. 22. Adobe PhoneGap Build 可以使⽤用github账号登陆
  23. 23. PhoneGap Build SettingSDK路径
  24. 24. Site > PhoneGap Build Service 下载 直接启动模拟器测试 发布⽤用的QR Code
  25. 25. PhoneGap Build• 创建⼀一个PhoneGap Build项⺫⽬目• Build Issue处理• 应⽤用测试• 调试模式
  26. 26. Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×