为Firefox OS创建Cordova应用

最新推荐文章于 2024-09-03 07:06:17 发布

_Nemon_

最新推荐文章于 2024-09-03 07:06:17 发布

阅读量954

点赞数

分类专栏：杂货

杂货专栏收录该内容

4 篇文章 0 订阅

订阅专栏

http://mozilla.com.cn/post/60074/

请注意，除了如下和大家分享的Cordova整合之外，Mozilla还想告知大家，在3月初，Adobe PhoneGap的下个发布中，将会支持Firefox OS。

如果你已经在使用PhoneGap创建应用，你可以快速轻松的将你现有的应用移植到Firefox OS中。我们觉得这简直太棒了，因此成立了一个“Phones for PhoneGap Apps”项目，专注于那些使用PhoneGap和/或Cordova创建的应用。如果你有一个非常棒的PhoneGap应用，我们非常乐于提供设备给你！

Cordova是一个流行的Apache基金会开源项目，提供一系列的设备API让移动应用开发者可以从JavaScript直接触及原生设备功能，例如照相机或是加速器。HTML5应用可以通过框架被封装成一个原生应用，并且可以从支持平台的应用商店中来安装，包括iOS, Android, Blackberry, Windows Phone，现在也包含了Firefox OS。Cordova也是Adobe PhoneGap旗下的一款软件。

在过去的几个月里，Mozilla同Cordova团队一同工作，将Firefox OS整合到Cordova框架中，让Cordova应用可以发布在Firefox OS平台中。不过这是一个持续性的项目，将从Cordova的3.4版本开始支持。在这篇博客里，我们来和大家讲解如何来使用这些新功能。

在Cordova中创建和打造一款Firefox OS应用

Cordova网站为大家讲述了如何安装软件。请注意安装流程需要Node.js，并且可以从命令行中执行。

 
        $ sudo npm install -g cordova

Cordova一旦安装完毕，就可以使用Cordova创建命令来创建一个应用。（命令参数在上面的Cordova文档链接中可以找到。）

 
        $ cordova create hello com.example.hello HelloWorld

这里将会创建一个叫做hell的牡蛎，在包含整个项目和在hello/www目录下的一个基本的Web应用。为了生成一个Firefox OS应用，接下来需要添加一个适当的平台。

 
        $ cd hello 
       
        $ cordova platform add firefoxos

和其他支持的平台一样，这时你需要运行一个创建（build）命令来生成在这个平台中的输出。由于Firefox OS是一个基于HTMl5的操作系统，在进行和生成应用中无需编译步骤。唯一需要的步骤就是一个准备好的声明来封装这个应用。

 
        $ cordova prepare firefoxos

这些是从一个Cordova项目生成一款简单Firefox OS应用的一些基本步骤。项目的输出将会在hello/platforms/firefoxos/www目录中。

调试应用

在其他大多数Cordova平台中，你需要使用模拟或是运行命令来测试一款应用。在Firefox OS中，你目前需要使用应用管理器（App Manager）这款基本的工具来调试和访问一款Firefox OS应用。这款工具提供了很多功能，包括JavaScript调试和在连接设备时实时编辑CSS。

上面的连接阐述了如何安装和开始使用应用管理器。应用管理器一旦开始运行，你可以点击添加封装应用（Add Packaged App）按钮，选择 hello/platforms/firefoxos/www 目录，点击开始按钮。

这样就可以把一个基本的应用添加到应用管理器中。你会注意到这时候还没有图标。这是因为框架整合并不能实时提供，只有一个空架子的manifest.webapp被创建出来了。从这里你可以更新或是调试这款应用。请注意在更新中间，在这个步骤时必须要运行一个cordova prepare firefoxos命令来封装应用并将它放置到platforms/firefoxos/www目录下。下图是Cordova HelloWorld应用在调试中的截图。

Firefox OS Manifest

Firefox OS应用是完全的HTML5应用，这在manifest文件中有所描述。这个manifest文件指向一些工件，例如图标，开始页等这些将在应用中被使用的内容。另外，manifest控制应用中所需的特权级别和设备的特殊API。关于manifest的文档请访问MDN。

有了Cordova的默认整合，一个通用的manifest会被创建并放在platforms/firefoxos/www目录中。在大多数情况下，这个还不够，你将至少需要为应用提供一个图标。如果没有一个至少128×128像素大小的图标，应用管理器将会提示。不过这并不妨碍你来测试自己的应用，但是在你向Firefox Marketplace中上传应用时会有影响。manifest可以在一个简单的文本编辑器中进行创建，或是可以在应用管理器中修改manifest。下面是一个manifest.webapp的实例：

 
        { 
       
        "name" 
        :  
        "My App" 
        , 
       
        "description" 
        :  
        "My elevator pitch goes here" 
        , 
       
        "launch_path" 
        :  
        "/" 
        , 
       
        "icons" 
        : { 
       
        "128" 
        :  
        "/img/icon-128.png" 
       
        }, 
       
        "developer" 
        : { 
       
        "name" 
        :  
        "Your name or organization" 
        , 
       
        "url" 
        :  
        "http://your-homepage-here.org" 
       
        }, 
       
        "default_locale" 
        :  
        "en" 
       
        }

请确认manifest是创建或者复制到project/www文件夹中。后面的cordova prepare 命令将会覆盖自动生成的manifest，变成你应用专属的manifest。

开始编码

当开始创建一个Cordova应用时，开始的代码生成包啊看index.html, css/index.css, img/logo.png和 js/index.js文件。index.hml中index.js的初始代码如下：

 
        <script type= 
        "text/javascript" 
        > 
       
        app.initialize(); 
       
        </script>

初始化功能主要为onDeviceReady事件设置了事件触发器，意味着Cordova框架已经加载并且准备好。生成的代码对Firefox OS来说已经足够，除非你想要执行一个特权应用（Privileged apps）。特权应用是在应用市场中署名的应用，需要使用更多敏感的API，例如联系人API。查看封装应用文档活动更多细节。对于特权应用，代码好像违反CSP限制，这是由于内联脚本标记（inline script tag）。这时需要移除内联脚本，在js/index.js中使用window.onload事件初始化应用。

应用实例

为了测试和调试Cordova/Firefox OS整合，我们开发了一个应用实例。这款应用可以在Github上找到。它展示了设备专属插件的使用。下面展示的图片和代码片段都来自这个应用实例。如果你想要check out代码并且在上面加工，首先创建一个Cordova项目然后check到project/www目录下。然后就可以运行 cordova prepare firefoxos来封装应用。运行和调试在本文的上部分已经提到过了。

设备APIs

Cordova使用一个插件架构来执行设备API，例如加速器，地理定位或是联系人。这些API和Firefox OS Web APIs以及Web活动非常相似，在Cordova网站中都有详细描述。如下是当前插件执行在Firefox OS中的情景和一个告诉大家如何将它们包含在自己的应用中的简要的描述。你可以通过在Apache网站中查看Jira来一直看到Firefox OS平台中插件开发的当前状态。

提醒API

提醒API（notification API）用来提醒你的应用给用户，通过两个插件执行：org.apache.cordova.dialogs 和org.apache.cordova.vibration。目前我们已经执行了提醒，确认，提示和震动功能。要使用这些功能，将这些插件通过下面这些命令添加到你的项目中：

 
        $ cordova plugin add org.apache.cordova.dialogs 
       
        $ cordova plugin add org.apache.cordova.vibration

要获得Firefox OS中对应的弹出框样式，你需要添加一个notification.css文件到自己的项目中。添加完对话插件后，更改到project/plugins/org.apache.cordova.dialogs/www/firefoxos目录，复制notification.css文件到你的project/www/css文件夹中。将CSS文件链接到index.html的头元素中。

 
        <link rel= 
        "stylesheet"  
        type= 
        "text/css"  
        href= 
        "css/notification.css"  
        />

现在可以使用这些提醒功能了。

 
        function  
        onPrompt(results) { 
       
        alert( 
        "You selected button number "  
        + 
       
        results.buttonIndex + 
       
        " and entered "  
        + results.input1); 
       
        } 
       
        navigator.notification.vibrate(500); 
       
        navigator.notification.prompt( 
       
        'Enter Name' 
        ,  
        // message 
       
        onPrompt,  
        // callback to invoke 
       
        'Prompt Test' 
        ,  
        // title 
       
        [ 
        'Ok' 
        ,  
        'Exit' 
        ],  
        // buttonLabels 
       
        'Doe, Jane'  
        // defaultText 
       
        );

指南针API

指南针API（compass API）是使用org.apache.cordova.device-orientation插件来执行的。这个插件执行compass getCurrentHeading 和watchHeading功能。要使用它只需简单运行如下插件和命令：

 
        $ cordova plugin add org.apache.cordova.device-orientation

插件添加好之后，就可以使用来获得或是观察头功能来获得指南针信息了。

 
   
        function  
        onSuccess(heading) {     
        var  
        element = document.getElementById( 
        'heading' 
        );    myHeading = (heading.magneticHeading).toFixed(2);    console.log( 
        "My Heading = " 
        + myHeading);} 
        function  
        onError(compassError) {    alert( 
        'Compass error: '  
        + compassError.code);} 
        var  
        options = {    frequency: 500};watchID = navigator.compass.watchHeading(onSuccess, onError, options); 
       
 
 

加速器API

加速器可以通过使用org.apache.cordova.device-motion插件访问x,y,z方向的加速数据来获得。这个插件执行getCurrentAcceleration和watchAcceleration功能。

要使用这些功能，需要在项目中添加device-motion插件，具体执行方法如下：

 
        $ cordova plugin add org.apache.cordova.device-motion

接下来可以使用如下类似代码来监测加速器的数值：

 
   
        var  
        options = {    frequency: 100};watchIDAccel = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); 
        function  
        onSuccess(acceleration) {   
        var  
        acX = acceleration.x.toFixed(1) * -1;   
        var  
        acY = acceleration.y.toFixed(1);   
        var  
        acZ = acceleration.z.toFixed(1);   
        var 
        vals = document.getElementById( 
        'accvals' 
        );   
        var  
        accelstr =  
        "<strong>Accel X: </strong>"  
        + acX +  
        "<br>"  
        +  
        "<strong>Accel Y: </strong>"  
        + acY +  
        "<br>"  
        +  
        "<strong>Accel Z: </strong>"  
        + acZ;  vals.innerHTML = accelstr;} 
        function  
        onError() {  alert( 
        'Could not Retrieve Accelerometer Data!' 
        );} 
       
 
 

还可以像这样监测设备方向时间和获得alpha, beta和gamma方向数值：

 
        function  
        deviceOrientationEvent(eventData) {     
        //skew left and right    var alpha = Math.round(eventData.alpha);    //front to back - neg back postive front    var beta = Math.round(eventData.beta);    //roll left positive roll right neg    var gamma = Math.round(eventData.gamma);    console.log("beta = " + beta + " gamma = " + gamma);}window.addEventListener('deviceorientation', deviceOrientationEvent);

照相机API

照相机API（camera API）用来从相册或是设备的照相机中获得一张照片。这个API执行org.apache.cordova.camera插件。要使用这个特性，需要在项目中添加这个插件。

 
        $ cordova plugin add org.apache.cordova.camera

在Firefox OS执行这个插件的使用，getPicture功能将会触发一个Web活动，运行用户选择图片在哪里获得。类似如下代码可以用来执行getPicture功能：

 
   
        navigator.camera.getPicture( 
        function  
        (src) {     
        var  
        img = document.createElement( 
        'img' 
        );    img.id =  
        'slide' 
        ;    img.src = src;  },  
        function  
        () {}, {      destinationType: 1}); 
       
 
 

联系人API

联系人API用来创建或是获得设备上的联系人，执行org.apache.cordova.contacts插件。要使用这个功能，需要运行下面的命令：

 
        $ cordova plugin add org.apache.cordova.contacts

需要访问联系人的应用必须是在manifest文件中被许可特权的。详见本文的“The Firefox OS Manifest”部分了解如何为自己的应用创建一个manifest。这个API需要在manifest中添加如下许可：

 
   
        "permissions" 
        : {   
        "contacts" 
        : {     
        "access" 
        :  
        "readwrite" 
        ,    
        "description" 
        :  
        "creates contacts"   
        }} 
       
 
 

详见manifest文档。另外，还需要改变manifest中应用的类型为privileged。

 
        "type" 
        :  
        "privileged" 
        ,

Manifest改好后，可以按照如下代码来添加联系人：

 
        // create a new contact objectvar contact = navigator.contacts.create();var name = new ContactName();name.givenName = fname;name.familyName = lname;contact.name = name;contact.save(onSuccess, onError);

地理位置API

地理位置（geolocation API）用来从设备的GPS模块获得位置，时间和速度值，需要执行org.apache.cordova.geolocation设备插件。

 
        $ cordova plugin add org.apache.cordova.geolocation

你可以在Firefox OS中使用这个API获得设备的经度、纬度和时间戳，但是它在manifest文件中有额外要求。

 
   
        "permissions" 
        : {     
        "geolocation" 
        : {       
        "description" 
        :  
        "Marking out user location"     
        }} 
       
 
 

添加了这个许可后，应用可以提示用户允许获得GPS数据。可以使用getCurrentPosition来一次性读取GPS或是watchPosition来获得间隔性的更新。

 
   
        var  
        onSuccess =  
        function  
        (position) {    console.log( 
        'Latitude: '  
        + position.coords.latitude +  
        '\n'  
        +      
        'Longitude: '  
        + position.coords.longitude +  
        '\n' 
        ); }; 
        function  
        onError(error) {    console.log( 
        'Error getting GPS Data' 
        );}navigator.geolocation.getCurrentPosition(onSuccess, onError); 
       
 
 

请不要忘记，在你的应用做好之后，提交到火狐应用市场（Firefox Marketplace）！

_Nemon_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为Firefox OS创建Cordova应用

http://mozilla.com.cn/post/60074/请注意，除了如下和大家分享的Cordova整合之外，Mozilla还想告知大家，在3月初，Adobe PhoneGap的下个发布中，将会支持Firefox OS。如果你已经在使用PhoneGap创建应用，你可以快速轻松的将你现有的应用移植到Firefox OS中。我们觉得这简直太棒了，
复制链接

扫一扫