Firefox OS应用程序入门

最新推荐文章于 2017-08-16 14:08:12 发布

dingshi7798

最新推荐文章于 2017-08-16 14:08:12 发布

阅读量168

点赞数

文章标签：操作系统 javascript 移动开发 ViewUI

欢迎使用Firefox OS应用开发教程。在深入研究主题之前，我将重点介绍关于FireFox OS的存在以及为什么Web开发人员必须考虑为此OS开发应用程序的几点。

什么是FireFox OS？

FireFox OS是一种移动操作系统，它是Mozilla的“ Boot to Gecko”项目的结果。毫无疑问，它基于Linux内核和Firefox的Gecko渲染引擎。该操作系统是完全开源的，因此不属于专有权利的束缚。 FireFox OS的用户界面是一个具有内置功能的Web应用程序，可以启动和显示各种其他Web应用程序。与移动操作系统领域的其他巨头（例如Android，iOS）不同，它瞄准的是新兴市场。它还旨在为终端用户提供低价智能手机的优越功能。

为什么要为FireFox OS构建应用程序？

我们必须首先了解的是，FireFox OS通过使Web开发人员与设备的本机功能紧密交互来赋予其真正的力量。这意味着开发Firefox应用程序所需的全部就是HTML和JavaScript等Web技术。开发人员可以使用的强大API通过大量使用设备来轻松创建强大的应用程序。

现在，我们了解了有关此OS的应用程序的更多信息，让我们了解Firefox OS应用程序的类型。

包装形式：

这些应用程序基本上是.zip存档文件，其中包含应用程序使用的资源（例如HTML，CSS和JavaScript文件）。用户将必须像其他任何移动OS应用程序一样下载并安装它。开发人员可以通过Firefox市场将更新推送给用户。也可以自行更新应用程序。

托管：

托管应用程序主要从服务器运行，就像具有给定域名的网站一样。该应用程序的所有文件都托管在服务器上。由于应用程序资源位于服务器上，因此开发人员可以更好地控制托管的应用程序。

在本教程中，我们将逐步开发一个打包的应用程序，该应用程序将列出用户的待办事项。

Modus Operandi将为FireFox OS开发应用程序

1.开发环境设置

每个Firefox OS应用程序（打包或托管）都需要在项目的根目录中有一个名为manifest.webapp强制性文件。这是一个JSON文件，可向操作系统提供有关该应用程序的信息（例如名称，描述，作者，图标等）。在本教程中，我们将使用以下简单的manifest.webapp 。

{
  "version": 1.0,
  "name": "ToDo App",
  "description": "App to make a note of to-do tasks",
  "launch_path": "/index.html",
  "developer": {
    "name": "Preetish",
    "url": "http://Preetish.Me"
  },
  "icons": {
    "512": "/img/icon-512.png",
    "128": "/img/icon-128.png"
  },
  "default_locale": "en"
}

要了解有关清单文件的更多信息，可以查看文档。清单文件可以由清单验证器验证。 API也可以用于验证。

在我们的项目根目录中，创建manifest.webapp文件以及以下目录：

css
js
lib
img

最后，您需要安装Firefox OS仿真器以完全设置开发环境。安装后，可以从Firefox浏览器菜单的“开发人员”部分访问模拟器。

开发人员工具选项

模拟器启动后，您将看到Firefox OS屏幕，如下图所示。

Firefox OS模拟器

2. Web API和Web活动

通过网络技术访问移动设备功能始终是一个压倒性的问题。 Mozilla通过提供对联系人，电源管理，摄像头，FM，蓝牙硬件等管理和控制设备功能的访问权限，提供了广泛的JavaScript API来解决此问题。这些功能称为WebAPI ，作为开发人员，您必须检查在Mozilla开发人员网络上发布它们。

对于网络活动，由应用程序执行的操作是通过从一个应用程序到另一应用程序的一系列任务分配来完成的。例如，如果应用程序需要打开PDF文件，它将要求用户选择他或她已经用于打开PDF文件的应用程序。打开特定文件后，它将返回给调用方或源应用程序。

您可以参考MDN上的Web活动参考和Mozilla Hacks上的Web活动简介以获取更多信息。

3.编写示例应用

我们将使用AngularJS开发此待办事项应用程序。下载Angular源并将其复制到我们项目的lib目录中。接下来，在根目录中创建index.html 。将以下代码复制到文件中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Todo List App</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>
  <body>
    <div ng-app="todoApp">
      <h2>Todo</h2>
      <div ng-controller="TodoController">
        <span>{{remaining()}} of {{todos.length}} remaining</span>
        [ <a href="" ng-click="archive()">archive</a> ]
        <ul class="unstyled">
          <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </li>
        </ul>
        <form ng-submit="addTodo()">
          <input type="text" ng-model="todoText"  size="30"
                 placeholder="add new todo here">
          <input class="btn-primary" type="submit" value="add">
        </form>
      </div>
    </div>
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

接下来，在css目录中创建style.css并复制以下代码：

.done-true {
  text-decoration: line-through;
  color: grey;
}

接下来，在js目录中创建app.js并复制以下代码。

angular.module('todoApp', [])
  .controller('TodoController', ['$scope', function($scope) {
    $scope.todos = [
      {text:'Todo Item 1', done:true},
      {text:'Todo Item 2', done:false}];

    $scope.addTodo = function() {
      $scope.todos.push({text:$scope.todoText, done:false});
      $scope.todoText = '';
    };
   
    $scope.remaining = function() {
      var count = 0;
      angular.forEach($scope.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };

    $scope.archive = function() {
      var oldTodos = $scope.todos;
      $scope.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) $scope.todos.push(todo);
      });
    };
}]);

4.测试应用

为了测试我们的应用程序，我们将使用Firefox OS模拟器。在Firefox中，转到“工具”>“开发人员”>“ FireFox OS仿真器”。接下来，单击“添加目录”按钮并导航到manifest.webapp文件以进行加载。

如果一切操作正确，您应该可以在笔记本电脑/台式机上直接看到模拟的应用程序。您可能需要在屏幕上滚动才能访问该应用程序。

应用选择屏幕

单击屏幕上显示的应用程序以访问您的应用程序。

待办事项应用程序在行动

完成该应用程序后，创建整个根目录文件的.zip存档，并使用验证器对其进行完整的测试。

查看WebIDE测试工具，该工具可让您通过USB将桌面Firefox连接到兼容设备。此外，它使您可以将应用程序直接推送到设备并在它们运行时对其进行调试。

5.发布应用

分发Firefox OS应用程序非常容易。它可以作为自发布的应用程序托管在您自己的服务器上。但是，为了获得更大的覆盖范围和可见性，可以将其推向Firefox市场。清单文件通过验证后，即可提交有关该应用程序的其他信息（例如操作系统支持，价格，屏幕截图）。用户可以购买您的应用程序，对其进行评分并提供反馈。