手把手教学:详解HTML5移动开发框架PhoneJS

发送到手机
使用"扫一扫"即可发送至手机

移动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应用框架逻辑的代码:

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

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


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

为了在SPA中配置视图导航,我们必须要在index.js中添加一行代码:

TipCalculator.app.router.register(":view", { view: "home" });

该语句是用来注册一个从URL检索视图名称的简单导航。主视图采用默认,每一个视图在其HTML文件中定义,并链接到主App页面index.html:

<link rel="dx-template" type="text/html" href="views/home.html" />

PhoneJS ViewModel(视图模型)

在程序中使用视图模型可以带来很多好处,一个视图模型代表着视图所使用的数据和操作。每一个视图都有一个具备与视图本身相同的基名称,以及给视图返回视图模型的功能。而对于Home视图,则通过views/home.js脚本来定义创建相应视图模型的Home功能。

TipCalculator.home = function(params) {  
      ...  
};

在此,我们举一个非常简单的计算小费的例子。在小费计算算法中使用了三个输入参数:账单总额、分摊人数及小费百分比。这些变量被定义为会绑定相应的UI部件的可见函数。而可见函数的功能就是由PhoneJS的视图模型中的Knockout.js提供的。

初始化home变量:

var billTotal = ko.observable(),  
      tipPercent = ko.observable(DEFAULT_TIP_PERCENT),  
      splitNum = ko.observable(1);

小费计算的结果由四个值表示:totalToPay、totalPerPerson、totalTip、tipPerPerson。每个值都是相互作用的计算值,只要其中任何一个值发生变动,程序便会自动进行重算。这便是标准的Knockout.js功能。

var totalTip = ko.computed(...);  
var tipPerPerson = ko.computed(...);  
var totalPerPerson = ko.computed(...);  
var totalToPay = ko.computed(...);

接下来,我们再举一个视图模型中业务逻辑实现的例子,对可度量值totalToPay进行更深入的研究。应付总额往往会四舍五入取整数。为此,我们要设定roundUp、roundDown两个参数来调整roundMode值。由于roundMode与totalToPay的可度量值有关,因此也会直接导致totalToPay进行重新计算。

var totalToPay = ko.computed(function() {  
      var value = totalTip() + billTotalAsNumber();  
      switch(roundMode()) {  
           case ROUND_DOWN:  
                if(Math.floor(value) >= billTotalAsNumber())  
                      return Math.floor(value);  
                return value;  
           case ROUND_UP:  
                     return Math.ceil(value);  
           default:  
                     return value;  
}  
});

一旦视图内的输入参数发生改变,程序就应立即禁用取整功能,以便用户查看精确数额。我们通过对UI度量值的变更来实现这一功能:

billTotal.subscribe(function() {  
      roundMode(ROUND_NONE);  
});  
tipPercent.subscribe(function() {  
      roundMode(ROUND_NONE);  
});  
splitNum.subscribe(function() {  
      roundMode(ROUND_NONE);  
});

以上只是典型的视图模型的一个非常简单的例子,如果想要查看完整的视图模型可详看home.js。

PhoneJS视图

再看来看看view/home.html中的视图标记,根div元素代表一个视图的&ldquo;home&rdquo;命名,里面是一个包含&ldquo;content&rdquo;占位符标记的div。

<div data-options="dxView : { name: 'home' }">  
      <div data-options="dxContent : { targetPlaceholder: 'content' }">  
            ...  
      </div>  
</div>

位于视图顶端的工具栏:

<div data-
bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }">
</div>

工具栏下方是一个自定义控件。在此,我们使用两个能够被PhoneJS编译通过的特殊CSS类:dx-fieldset和dx-field。控件包含一个显示账单总额的文本框,以及小费百分比、就餐人数的两个滑块。

<div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup',min: 0 }">  
</div>  
<div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div>  
<div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div>

通过编辑器下方的两个按钮,我们可以对账单总额进行取整,而剩下的视图就用来显示计算结果。

<div class="round-buttons">  
      <div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div>  
      <div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div>  
</div>  
<div id="results" class="dx-fieldset">  
      <div class="dx-field">  
            <span class="dx-field-label">Total to pay</span>  
            <span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span>  
      </div>  
      <div class="dx-field">  
            <span class="dx-field-label">Total per person</span>  
            <span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span>  
      </div>  
      <div class="dx-field">  
            <span class="dx-field-label">Total tip</span>  
            <span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span>  
      </div>  
      <div class="dx-field">  
            <span class="dx-field-label">Tip per person</span>  
            <span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span>  
      </div>  
</div>

至此,就是使用PhoneJS开发一个简单的App的全过程,简单直接,一目了然。

启动、调试、发布

和HTML5应用一样,启动、调试一款PhoneJS App,必须对包含HTML和JavaScript源的文件夹及其它所需资源在Web服务器上进行部署。由于PhoneJS无服务器端组件,因此使用哪种Web服务器并没有什么区别,只要支持通过HTTP协议访问所需文件资源即可。一旦部署成功,你可以在设备或模拟器上打开App,当然,也可以在桌面浏览器上输入URL进行访问。

如果想要通过桌面浏览器查看在智能手机或平板电脑上的运行效果,就必须重新设置浏览器的UserAgent(用户代理)属性。幸好现在许多浏览器都为开发者提供了相关的开发工具,操作也就变得非常简单。


当然,如果不想修改UserAgent设置,也可以使用Ripple Emulator来模拟不同设备的运行效果。


到现在,你已经开发出一个在移动设备浏览器上能够像原生App一样运行的Web App。现代移动浏览器提供了本地存储、定位API和照相机接口。因此,对于创建像原生一样的Web App而言,已经是万事俱备了。

PhoneJS+PhoneGap:Web+Native,打造混合型App

如果你想创建的并不仅仅只是一款Web App,而是能够上架App Store的应用。你就可以通过PhoneGap创建一款混合型应用。

对于大多数开发者而言,PhoneGap并不陌生,它是一个让你用普通的Web技术编写出能够轻松调用API和进入应用商店的HTML5应用开发平台,也是唯一一个支持7个平台的开源移动框架。使用PhoneGap需要具备目标平台的SDK,但无需知晓原生开发具体细节,开发者只需提供相应的HTML、CSS、JS文档,并设定App名称、版本、图标等属性即可。


想要发布App,还必须在相应的开发门户网站完成开发者身份注册,除此之外,还必须具备各个平台的SDK当然。如果不想麻烦的话,还可通过PhoneGapBuild服务来解决这一问题。总而言之,如果你想要自己的Web应用拥有原生App的外观和体验,PhoneJS会是你最好的选择。当然,如果想要更进一步的话,还通过PhoneGap,开发一款融合Web和Native的混合型应用。

(编译/钱仪雯、唐小引 责编/翟方庆)

文章来源:DZone

手把手教学:详解HTML5移动开发框架PhoneJS

手把手教学:详解HTML5移动开发框架PhoneJS

分享: