PhoneGap应用介绍.ppt

第13讲PhoneGap应用介绍 请到240FTP HTML5移动Web开发下载第13讲文件夹 主要内容 概述搭建平台 1 PhoneGap是什么 PhoneGap是一个基于HTML和JavaScript的应用开发平台 使用它可以构建本地应用 可以把PhoneGap看作一个正方形的webviewcontainer 它使用JavaScript编程接口实现用户在不同操作系统下的访问 可以利用传统的web开发技术 如HTML CSS JavaScript 开发用户接口 利用PhoneGap容器把它们部署到不同的应用环境和设备上 1 PhoneGap是什么 PhoneGap可以被用来开发跨平台的应用 这些平台包括AppleiOS GoogleAndroid WindowsPhone BlackBerry HPWebOS Symbian和Bada 可以通过链接 2 开发出的PhoneGap应用是什么样的形态 由于UI绘制引擎就是移动设备的内置web浏览器 所以PhoneGap应用的形态可能多种多样 可以使用标准的HTML CSS使它看起来就像一个简单的网页 也可以使用UI框架使它像jQueryUI KendoUI Sencha TwitterBootstrap或Skeleton 或者其它任意基于HTML CSS JS的用户框架接口 另外也可以采用CSS模式 主题使它看起来就像一个本地应用 如模仿iOS和Android的iUI 模仿BlackBerry的bbUI 2 开发出的PhoneGap应用是什么样的形态 PhoneGap应用可以是基于HTML的静态UIs 也可以是利用JavaScript开发具有动态效果和交互体验动态UIs 这取决于特定的应用 用户体验设计 受众目标以及指示PhoneGap应用如何出现的应用实例 使用PhoneGap应用 可以通过缩小放大操作放大或者缩小查看的内容 或者利用利用viewportmetadatatag锁定浏览内容的大小 可以利用常规浏览器的操作方式滚动浏览网页也可以像iScroll一样采用基于接触的滑动方式浏览网页 2 开发出的PhoneGap应用是什么样的形态 基于HTML CSS JavaScript你有许多方式可以创建用户接口 所以并没有一个典型的外观 如果你没有使用任何的CSS模式 那么用户接口各元素默认和使用的操作系统或者浏览器保持一致 包括按钮 链接 色彩以及亮度 这时PhoneGap应用和操作系统默认的浏览器一样运行 3 如何利用PhoneGap开发应用 利用PhoneGap开发应用非常简单 90 的PhoneGap应用只需要一个文本编辑器即可 PhoneGap也能很容易的与特定的设备整合形成开发环境 在开发PhoneGap应用应用时 一定要谨记你是在web浏览器实例中运行代码 是利用HTML和JavaScript开发应用而不是本地代码 因此不需要其它任何东西 实际上大部分开发都是利用HTML编辑器和Chrome浏览器实现的 当需要在设备上做测试的时候再切换到特定的设备环境 具体可以参考以各应用平台上的开发指导链接 iOS 4 如何调试PhoneGap应用 调试PhoneGap应用是PhoneGap开发过程中最棘手部分 只在物理设备上测试 并不能测试出所有的JavaScript异常 下面是一些具体的调式策略 1 尽可能利用桌面浏览器调试 由于PhoneGap应用是利用HTML CSS andJavaScript进行开发的 你可以利用HTML编辑器开发大部分应用然后利用桌面web浏览器调试 最新版本的web浏览器 包括Chrome IE Firefox Opera和Safari 都提供了丰富的调试功能 利用web浏览器开发工具 你可以检查HTMLDOM元素 检查CSS的模式 设置JavaScript断点 检查内存和JavaScript变量 通过下面链接可以获得更多更多关于桌面浏览器开发工具的信息 ChromeDeveloperTools 2 用调试 利用可以进行远程的基于设备的调试 利用Weinre调试工具你可以远程检查DOM 测试资源下载 检测网络使用 检测时间线以及控制台输出 如果你已经使用了上述列出的开发工具 就会发现它们看起来很相似 只是你不能在移动设备上设置断点 但是肯定比什么都没有强 3 利用iOS5进行远程web调试 利用iOS5模拟器实现远程调试只需要开通远程调试功能即可 然后利用iOS5桌面模拟器发布应用 一旦应用运行它就会打开一个本地Safari实例http localhost 9999 这将启动远程调试工具 完成断点设置和脚本测试 通过连接 5 如何部署PhoneGap应用 部署PhoneGap应用和创建移动设备web是一样的 唯一不同的就是PhoneGap应用程在本地初始化HTML设置而不是远程服务器 PhoneGap应用加载初始化的HTML 它可以用来申请服务器或者本地上的资源 由于PhoneGap是基于浏览器的 可以像浏览器一样运行 可以同时下载各种网页 但是一旦你下载或者关闭一个网页很可能丢失通过JavaScript脚本存储在内存中的数据 PhoneGap也支持单页浏览模式 建议用户使用单页浏览模式 单页浏览模式部署 单页浏览架构就是指只有一个HTML页基于数据和用户输入进行动态更新 你可以把它看做是客户 服务器模式 由一个客户应用和一个服务器组成 客户应用可以请求数据或者进行更新而不用重新加载web页 通过使用单页浏览模式你可以维护内存中的数据 通过如下链接可以了解更多关于单页模式的知识http en wikipedia org wiki Single page application 可以利用任意常见的JS架构如Angular Ember Backbone Mustache部署PhoneGap应用 6 如何使PhoneGap应用在移动设备和应用环境中运行 对每一个给定的平台而言 PhoneGap应用采用和本地应用相同的规则部署 必须遵守每一个应用平台的部署规则 可以利用每个平台的构建过程为这个平台编译可执行文件也可以利用进行编译 是可以为每个平台编译使用时具体平台的应用的服务 构建过程的输出是适用于一个特定平台的二进制文件 适用于iOS的IPA 适用于Android的APK 7 兼容性 有技术人员在知乎网抛出了 Titanium PhoneGap jQueryMobile Sencha谁能谈谈实际使用经验 的话题 感兴趣的可以看看 1 PhoneGap是比较底层的库 对表现层没有支持 所以用phoneGap开发需要再加上jQuery或XUI YUI这类UI层的东西 2 phoneGap主要的好处是学习成本不算高 缺点是速度慢 内存容易溢出 3 jQuery主要优势是微软支持 学习资料多 热度高 缺点是学习成本高 默认模板很难看 想做个性化修改特别麻烦 而且速度也因为兼容太多浏览器 连IE也兼容 这对移动应用多累赘啊 比较慢 基本上如果你的技术方案是phoneGap jQuery 最好不要做超过5页的产品设计 而且尽量不要做拍照 文字输入等互动功能 4 sencha主要的优势其实是云端服务支持 但对国内的人来说就享受不到了 5 Titanium是我们遇到的国外的HTML5工具效率最好的一个 因为他们把不少HTML和CSS代码预编译成了JavaScript 这点在开发Julia时我们也借鉴了 缺点是学习曲线比较高 当然如果你是JS熟手就容易很多 另一种观点 1 PhoneGap withjQTouch 可用API比较少 但可选UI样式比较多 2 TitaniumMobile 更多依靠JavaScript 因此开发意味比设计意味更重 相比来说 可用API更多一些 值得一提的是 需要使用它自己的桌面应用来编译和打包app 3 SenchaTouch 是一个HTML5 CSS3和JavaScript结合的WebApp开发框架 更多用来开发WebApp而不是提交到Appstore的源生应用 但能在Webkit浏览器里支持多种手势操作 jQueryMobile Sencha是实现移动应用的前端呈现 Sencha官方的说法是 提供移动平台的解决方案 实现的效果很接近NativeApp了 但是这个库很大 如果是要做WebApp的话还是可以用一用的 但是做MobileWebApp 性能也是一个都很大的问题 PhoneGap是比较出名的一个跨平台解决方案 但是PhoneGap并不支持UI设计 它仅仅是浏览器调用本机代码 比如获取地理位置 的一层接口 UI设计还需要别的JS类库支持 在Google的NexusOne 1G的CPU 上面测试 加载一个PhoneGap和jQueryTouch用时0 9秒左右 这仅仅是基础库的加载 应用本身的HTML CSS和JS代码还都没有计算 性能很成问题 性能 也就是运行速度是现有跨平台工具的首要问题 在iOS平台勉强过的去 在Android平台上比较惨 特别是一些比较老的低配置机型上 介绍一些开发PhoneGapwebapp优化经验 1 少用图片 特别是大面积的png图片 2 巧用 webkit transform属性 在iOS平台上 如果你的dom带有 webkit transform的3d属性 系统将开启硬件加速 你会发现你的动画帧率瞬间上了一个阶 3 尽量避免使用标签 容易造成未知的内存泄露 4 尽量简化dom树的层级 最后总之一句话 无论你使出浑身解数来优化 Webapp距离Native的性能差距还是一大截 慎用 2 搭建平台 phonegapdesktop appPhoneGapDeveloperApp见 phonegapdesktop app与手机客户端工具PhoneGapDeveloperApp 里面的视频PhoneGapwitheclipse见 PhoenGap3 4安装教程 里面的视频 1 phonegapdesktop app phonegapDesktop App 可以在不搭建andrid环境不配置androidsdk或者不搭建xcode环境 或者不安装node jsnpm的情况下就可以创建phoengap应用 PhonegapDesktop App 它绕过了全部SDK和必需的编译或代码签名 它通过WiFi与一台移动设备上的PhoneGap配对 这台服务器监控代码的变动 并把它们自动地发送到那台设备上 而不用执行本地编译或代码签名 2 phonegapdesktop app 解压缩文件 PhoneGap Desktop Beta 0 1 1 win zip 需要一点时间 localhost 3000取消随意修改代码 保存 会看的网页在自动更新 2 PhoneGapDeveloperApp 对于我们以前调试一款开发的phonegap应用我们需要每次都输入命令或者点击右键在手机上运行才能看到效果PhoneGapDeveloperApp改变了这一切它绕过了全部SDK和必需的编译或代码签名 它通过WiFi或者数据线与一台移动设备上的PhoneGap配对 这台服务器监控代码的变动 并把它们自动地发送到那台设备上 而不用执行本地编译或代码签名 3 PhoneGapwitheclipse 在安装PhoneGap开发环境之前 需要先安装以下框架 1 JavaSDK2 Eclipse3 AndroidSDK4 ADTPlugin5 PhoneGap一种方法 见 PhoenGap3 4安装教程 里面的视频一种方法 word文件 PhoneGap开发环境搭建 Eclipse doc 总有一种适合你的电脑