PhoneGap学习.docx

PhoneGap学习一、PhoneGap的基本概念21. 什么是PhoneGap22. PhoneGap的优势和劣势23. PHONEGAP开发需要的基本知识24. jQuery Mobile：PHONEGAP的得力助手3二、PhoneGap API4三、环境的配置与部署111. 安装SDK + PhoneGap112. 新项目设置113. Hello World154. 部署161、部署到模拟器162、部署到设备185、完成19四、难度评估19一、PhoneGap的基本概念1. 什么是PhoneGap PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能包括地理定位，加速器，联系人，声音和振动等。2. PhoneGap的优势和劣势优势：l 跨平台：一次开发，多个平台共用。现主要包括了android，iOS，Apple iOS, Google Android, Palm, Symbian, BlackBerry等。WP7等平台也在逐步兼容中。l 降低开发门槛。对于很多WEB开发人员来说，熟悉Objective-C语言和Java语言都是比较痛苦的事情。有了PhoneGap就不用担心这些了。用熟悉的Web前端技术就可以开发出很专业的手机应用程序。l 提供强大的硬件访问控制。比起传统的Web程序，PhoneGap提供了一些列的JS 的类，可以直接访问硬件。比如加速，相机，指南针，GPS，文件访问等，可以让你用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。l 方便的安装和使用。PhoneGap的架构很复杂，但对于大多数开发者来说，只用很简单的配置就可以搭好环境。只用专注写好自己的Web页面，拷贝进去就可以了。劣势：l 运行速度慢：程序的载入和UI界面的反应都比原生的程序慢，因为它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。l 不适合部分程序。如果你的程序需要3D功能，或者对界面刷新有较高的要求，这样的程序现在来说还只是用原生的语言会比较好。3. PHONEGAP开发需要的基本知识l HTML：做为最基本的Web开发，HTML知识必不可少。现在很多移动终端已经支持HTML5了，所以最好学会HTML5相关的知识；l CSS：定义的页面的样式等等，不用CSS，你的页面会很难控制定位和样式等等。建议能掌握CSS3的相关知识，能写出更好的界面；l JavaScript：后台的交互都由JavaScript实现，读写数据库，载入Google Map等等；l PhoneGap的类库：都是JavaScript的库，使用很简单，有详细文档，可以参考官网：/l 基本的平台知识：比如要做iPhone的程序，就要知道XCode怎么安装，怎么编译，怎么获取授权证书，真机调试等等，要做android程序就要会搭建Ecllipse开发环境等等。会简单使用这些平台后，就可以安装PhoneGap的平台了，可以参考：/start4. jQuery Mobile：PHONEGAP的得力助手开发PhoneGap的程序，jQuery Mobile不是必备，但是有了jQuery Mobile，可以使你的程序美观很多。jQuery Mobile其实是一堆的样式集和JAVA事件。比如写一个按钮，iOS和android的是不同的，用HTML做出来的往往很丑。一般的处理方式是重新定义按钮的样式，使它变得更像手机平台上的按钮。jQuery Mobile为你提供了这一套框架，你可以通过很简单的属性设置就可以做出跟手机平台下车差不多的按钮，相当方便。二、PhoneGap API三、环境的配置与部署1. 安装SDK + PhoneGap下载并安装Eclipse下载并安装ADT插件。下载并安装Android SDK。下载最新版本的PhoneGap并解压，我们将使用其中的Android目录。2. 新项目设置o 启动Eclipse，然后在菜单“File”下选择“New Android Project”。o 在项目根目录下，创建两个新目录:o /libso /assets/www复制phonegap.js（从PhoneGap解压缩后的Android目录中）到/assets/www。复制phonegap.jar（从PhoneGap解压缩后的Android目录中）到/libs。复制xml整个目录（从PhoneGap解压缩后的Android目录中，包括一个plugins.xml）到/res。对Eclipse的src文件夹中的主要Java文件进行少量调整：（如下图）o 将class的继承由Activity改为DroidGapo 将setContentView()替换为super.loadUrl(file:/android_asset/www/index.html);o 添加import com.phonegap.*;o 移除import android.app.Activity;在这里你可能会遇到Eclipse找不到phonegap-1.3.0.jar的错误。在这种情况下，右键单击/libs文件夹找到Build Paths/ Configure Build Paths。然后在Libraries标签页中添加phonegap-1.0.0.jar到项目中。如果Eclipse不是很稳定，你需要点击F5刷新一次项目。右键单击AndroidManifest.xml并选择Open With Text Editor。将下面的权限设置拷贝到versionName之后:（如下图）在AndroidManifest的activity标签中添加android:configChanges=orientation|keyboardHidden。(如上图)3. Hello World在“/assets/www”目录中新建文件“index.html”，并粘贴如下代码：PhoneGapHello World4. 部署1、部署到模拟器右键单击项目节点选择Run As，然后点击Android Application。Eclipse将要求你选择一个合适的AVD，如果没有设置的话，你需要创建一个AVD。AVD的设置：1、依次选择“Windows” “AVD Manager”，如下图所示：2、单击上图所示的“New.”按钮，弹出“Create new AVD”对话框。在对话框中设置所要创建的AVD的名称、API版本、SD卡的大小及AVD的皮肤，单击“Create AVD”按钮完成AVD的创建。创建成功的AVD将会显示在Android SDK and AVD Manager的列表中。3、选中刚创建的AVD，点击右边的“Start.”按钮，将会启动所选的AVD。在本文档中，将启动名为“Hello”的AVD，启动后的虚拟设备界面如下：问题：在左侧没有显示手机界面？猜测：电脑配置不够，无法运行！2、部署到设备确认设备已经勾选USB debugging选项，并已将设备连接到电脑。（设置 应用程序 开发)右键单击项目节点选择Run As，点击Android Application。5、完成四、难度评估1、硬件要求Android SDK当前并没有官方版本的最低安装硬件需求，若要在Windows、Linux或Mac OS X平台下顺利使用Android仿真器，来仿真 Android手机的话，建议最好至少拥有这样的配备：处理器速度2.0 GHz以上；内存2 GB以上。目前，我的机子的配备:处理器速度1.6