摘要: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 StoreGoogle PlayWindows 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. ul ol dl

    1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...

  2. oracle sqlldr控制文件模板

    Sqlldr userid=lgone/tiger control=a.ctl LOAD DATA INFILE 't.dat' // 要导入的文件 // INFILE 'tt.date' // 导入 ...

  3. 配置并学习微信JS-SDK(1)

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 微信JS-SDK ...

  4. freeswitch 拨号时添加自定义变量

    Using Channel Variables in Dialplan Condition Statements Channel variables can be used in conditions ...

  5. CSS and JavaScript Bundling and Minification in ASP.NET 4.5

    ASP.NET 4.5 includes a new feature to minify and bundle CSS and JavaScript within your web applicati ...

  6. 配置nginx支持thinkphp框架

    因为nginx本身没有支持pathinfo,所以无法使用thinkphp框架,不过我们可以在配置里进行修改使其能够正常使用thinkphp. 1.修改配置支持pathinfo vi /etc/ngin ...

  7. 编译hadoop版的hello,world

    cd ~/src mkdir classes javac -classpath ~/hadoop-/hadoop--core.jar WordCount.java -d classes jar -cv ...

  8. ARCI--做事情的重要方法论

    很多朋友都可能碰到这样的情况,有一个任务曾经开会讨论过,目标,时间,参与人都有提到,但是最终就是不了了之,没有下文了,而且后面想起来,要追究责任的时候,发现似乎都没有责任,无从追究.如果这种情况出现, ...

  9. 不用找了,比较全的signalR例子已经为你准备好了.

    这几天想着将一个winform的工具上线到web上,因为对时时性的要求比较高,找朋友咨询了一下推荐了SignlarR 框架,比较强大.昨天才看到,今天研究了一下将里面的例子都拿出来共享. 最全的参考: ...

  10. Codeforces 731D Funny Game

    Description Once upon a time Petya and Gena gathered after another programming competition and decid ...