借助Apache Cordova构建混合移动应用程序

最新推荐文章于 2020-06-27 07:28:30 发布

upscoco

最新推荐文章于 2020-06-27 07:28:30 发布

阅读量396

点赞数

分类专栏： web 文章标签： web

web 专栏收录该内容

3 篇文章

订阅专栏

在该例子中，我们使用Apache Cordova部署混合应用程序，该应用程序使用了TicketMonster的现有HTML5移动前端，并与在JBoss A7或JBoss企业应用平台（EAP）上运行的TicketMonster部署环境的充分利用代表性状态传输协议（REST）的服务进行交互。

你已完成了为应用程序构建前端的工作，它还有了移动支持功能。现在你想提供用户们可以从应用程序商店下载的原生客户端应用程序。读完该教程后，你会明白如何重复使用现有的HTML5代码，借助Apache Cordova，针对每个目标平台开发原生的移动客户端程序。

你将学会如何：

•对现有的Web应用程序进行改动，好让应用程序可以作为一个混合移动应用程序来部署。

•借助Apache Cordova，开发面向安卓和iOS的原生应用程序。

什么是混合移动应用程序？

混合移动应用程序是用HTML5开发的――不像原生应用程序编译成针对特定平台的二进制代码。客户端代码完全由HTML、CSS和JavaScript组成，包装起来后安装在客户端设备上，完全像任何原生应用程序那样，然后在周围的原生外壳生成的浏览器进程里面执行。

除了封装浏览器进程外，原生外壳还允许访问原生设备功能，比如方向感应器、GPS、联系人名单等，应用程序则可以通过JavaScript库来使用这些功能。

改动应用程序以便远程访问

在我们让应用程序成为混合应用程序之前，需要对应用程序访问远程服务的方式做一些改变。请注意：这些变化已经实现在用户前端，我们在此为你显示了需要改动的代码。

在Web版本的应用程序中，客户端代码与服务器端代码一起部署，那样模型和集合（还有将执行REST服务调用的任何部分代码）可以使用相对应用程序根目录的URL：所有资源都由同一台服务器来提供，所以浏览器将进行正确的调用。这还尊重浏览器在默认情况下执行的同源策略，以防止跨站脚本攻击。

如果客户端代码与服务分开来部署，REST调用必须使用绝对URL（我们会在后面探讨给同源策略带来的影响）。此外，由于我们希望不必重新构建源代码，就能够将该应用程序部署到不同的主机上，所以它必须是可以配置的。

你已经在用户前端章节大体了解了这方面，我们在那个章节为移动版应用程序定义了configuration（配置）模块。

 src/main/webapp/resources/js/configurations/mobile.js  
...  
define("configuration", function() {  
    if (window.TicketMonster != undefined && TicketMonster.config != undefined) {  
        return {  
            baseUrl: TicketMonster.config.baseRESTUrl  
        };  
    } else {  
        return {  
            baseUrl: ""  
        };  
    }  
});  
...

该模块有一个baseURL属性，既可以设置代表相对URL的空字符串，也可以设置成前缀，比如域名，这取决于名为TicketMonster的全局变量是否早已被定义，它拥有贵阳电脑维修baseRESTUrl属性。

我们所有执行REST服务调用的代码都依赖该模块，因而基本REST URL可以在单单一个地方加以配置，并注入到整段代码中，正如下列代码实例所示：

 src/main/webapp/resources/js/app/models/event.js 
/** 
 * 事件模型的模块 
*/ 
define([ 
    'configuration', 
    'backbone' 
], function (config) { 
    /** 
     * 事件模块类定义 
     * 用于对单个事件执行CRUD（创建读取更新删除）操作 
     */ 
    var Event = Backbone.Model.extend({ 
        urlRoot: config.baseUrl + 'rest/events' // the URL for performing CRUD operations 
    }); 
    // 输出事件类 
    return Event; 
});