摘要:HTML/JavaScript的优势自不必说,但却也并非完美,相比之下,原生App占内存更少、响应更快。本文详解了HTML5移动开发框架PhoneJS的使用全过程,通过它,能够让Web应用在移动设备的浏览器上像原生App一样运行。

移动App开发框架可谓是数不胜数,而如今,基于HTML5的框架也变得越来越多。这些新一代的开发工具让开发者们无需精通原生SDK和Objective-C、Java等编程语言,即可直接进行移动应用开发。

为什么HTML5会如此大受开发者欢迎?

HTML5之所以被广泛应用,其中一条非常重要的原因就是BYOD的出现。BYOD来袭意味着开发者不需要再局限于某个单一平台,因为用户希望在他们日常使用的设备上都能运行这些App。通过HTML5,开发者可以在一个代码库的基础上开发适用于不同设备的App,其体验与原生App基本无异。不需要重复编程,也无需使用多重语言或SDK。现代Web浏览器的发展使HTML5能够实现跨平台、适用于不同设备的解决方案,这些方案与“原生”App体验极为相似,往往很难分清它究竟是原生开发还是使用HTML开发。

多平台支持、投放市场时间以及维护成本低,HTML/JavaScript的优势还远不止于此。在缓解WinRT、Chrome OS、Firefox OS和Tizen等新兴技术所带来的长期风险方面,HTML的能力无出其右。简单来说就是,HTML/JavaScript就是唯一一个能够让应用跨平台的编程语言。

当然,HTML/JavaScript也并非没有缺点。相比HTML5 App,Native App所占用内存更少、响应更快。但只要在Web应用能够正常运行的所有情况中,你也可以做出一点让步,创建一个移动Web App,或从单一代码库为应用商店、多平台打包应用。而这个时候使用HTML JavaScript移动开发框架PhoneJS是最好不过的了,本文详细讲解了PhoneJS使用全过程,接下来,就让我们一起来看看吧。

HTML5应用开发框架PhoneJS:移动App开发新选择

PhoneJS是一个通用、灵活、高效的跨平台HTML5移动App开发框架,适配PhoneGap,是一个单页应用(SPA,single page application)框架,带有视图管理和URL导航。其布局引擎允许开发者在视图中设置抽象导航,如此一来,同一款App就可以根据不同的平台或因素进行调整。PhoneJS包含了iOS、Android、Windows Phone 8等当今最流行的移动平台内置的一整套触屏优化UI组件。

如果开发者想要进一步了解PhoneJS开发原理,以及创建、发布App的方法,可以登陆App Store、Google Play或Windows Store下载其Demo应用Tip Calculator,也可以登陆GitHub下载该应用的完整源码。

PhoneJS布局与导航

TipCalculator是一个使用HTML5构建的单页应用。起始页是带有标准元标签、index.html以及CSS和JavaScript资源链接。它包含有一个JavaScript文件index.js的脚本引用,内有配置PhoneJS应用框架逻辑的代码:

  1. TipCalculator.app = new DevExpress.framework.html.HtmlApplication({
  2. namespace: TipCalculator,
  3. defaultLayout: "empty"
  4. });

在本段代码中,我们必须要指定App的默认布局。在这个例子中,我们使用了最简单的空布局,而其更高级的布局还能为交互式导航风格提供完整支持。

PhoneJS采用了许多服务器方框架支持的固定布局方法,包括Ruby on Rails和ASP.NET MVC。想要了解关于视图和布局的详细信息,可点击链接查看PhoneJS在线文档。

手把手教学:详解HTML5移动开发框架PhoneJS的更多相关文章

  1. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  2. video详解 HTML5中的视频:

    一.video 视频的方法.属性.事件详解 方法:play() 播放  pause() 暂停  属性:currentTime播放到当前的时间   duration视频的总时长 事件:ended 播放完 ...

  3. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  4. 详解HTML5中的进度条progress元素简介及兼容性处理

    一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...

  5. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  6. 详解HTML5中的<aside>元素与<article>元素

    <aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...

  7. 详解 HTML5 中的 WebSocket 及实例代码-做弹幕

    原文链接:http://www.php.cn/html5-tutorial-363345.html

  8. html 06-HTML5详解

    06-HTML5详解 #HTML5的介绍 #Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2 ...

  9. 最全html5 meta设置详解 (转)

    meta 详解,html5 meta 标签日常设置   <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...

随机推荐

  1. 精通 Oracle+Python,第 6 部分:Python 支持 XML

    无可辩驳的是,XML 现在是软件中信息交换的实际标准. 因此,Oracle 数据库附带了各种与 XML 相关的增强和工具,它们统称为 Oracle XML DB.XML DB 包含一系列嵌入到数据库中 ...

  2. wpf数据自动树结构

    在项目中,时常会遇到存在上下级关系的数据.在呈现方面,按照传统方法,不得不组装TreeNode之后添加到TreeView 中,已实现树形数据的显示.如果项目中需要多处使用树,毫无疑问这将存在巨大的代码 ...

  3. System.Reflection.Assembly.GetEntryAssembly()获取的为当前已加载的程序集

    今天在使用System.Reflection.Assembly.GetEntryAssembly()获取程序集时,发现获取的程序集不全.原来是因为C#的程序集为延迟加载,此方法只获取当前已加载的,未加 ...

  4. clang: error: invalid deployment target for -stdlib=libc++ (requires iOS 5.0 or later)

    低于5.0版本的不支持设置成 或 在Xcode中做如下配置 静态库工程也要做同样设置

  5. Two-phase Termination模式

    停止线程是一个目标简单而实现却不那么简单的任务.首先,Java没有提供直接的API用于停止线程.此外,停止线程时还有一些额外的细节需要考虑,如待停止的线程处于阻塞(等待锁)或者等待状态(等待其它线程) ...

  6. LA 3904

    一道DP题: 一共有三种砖,1*2,2*1,2*2,然后要你铺满整个n*2的地板,求不重复的铺法数: 方法: 首先计算了不考虑对称的情况,然后计算只考虑对称的情况: 所以结果就是(不考虑对称数+只考虑 ...

  7. QT内置的ICON资源

    QT内置的ICON资源保存在QStyle类里. 可以通过成员函数 QStyle::standardIcon 来获取. 保存的icon有: enum QStyle::StandardPixmap Thi ...

  8. R语言 典型相关分析

    1.关键点 #典型相关分析##典型相关分析是用于分析两组随机变量之间的相关程度的一种统计方法,它能够有效地揭示两组随机变量之间的相互(线性依赖)关系#例如 研究生入学考试成绩与本科阶段一些主要课程成绩 ...

  9. IE 弹出"Unable to do xml/xsl" Processing

    解决方法:

  10. SD卡中FAT32文件格式快速入门(图文详细介绍)

    说明: MBR :Master Boot Record ( 主引导记录) DBR :DOS Boot Record ( 引导扇区) FAT :File Allocation Table ( 文件分配表 ...