Firefox OS Quick Start

Firefox OS平台给web开发人员希望多年的:移动环境专注于用HTML、CSS和JavaScript创建应用,本指南的目的是让你开始使用一个环境和基本应用架构,以便您可以创建下一个伟大的应用!

如果你想要跟随这个指南学习,你可以下载快速开始应用

应用结构

打包与托管应用程序

有两种类型的Firefox OS应用程序:打包和托管。打包应用程序本质上是一个zip,包含了所有的应用程序资源:HTML、CSS、JavaScript、图像、manifest等。托管应用程序运行在一个固定的域名的服务器上,就像一个标准的网站。两个应用程序类型需要一个有效的manifest。当到在Firefox市场上发布你的应用时,你要么以zip上传你的应用程序,要么提供的你托管应用程序的URL对于本指南,你将创建一个托管在本地的应用。

一旦你的程序准备发布在Firefox的市场,你可以打包成一个打包程序或以一个托管应用发布应用manifest每一个Firefox OS应用程序需要一个在应用根目录的manifest。manifest .webapp 文件会提供关于这个应用程序的重要信息,比如版本、名称、描述、图标位置、本地字符串、应用安装的来源,还有更多(只有名称和描述是必需的)简单的manifest包括应用程序模板,例如:

{

"version": "0.1",

"name": "你的应用",

"description": "你的可怕的开放Web应用",

"launch_path": "/index.html",

"icons": {

"16": "/img/icons/mortar-16.png",

"48": "/img/icons/mortar-48.png",

"128": "/img/icons/mortar-128.png"

},

"developer": {

"name": "你的名字",

"url": "http://yourawesomeapp.com"

},

"installs_allowed_from": ["*"],

"locales": {

"es": {

"description": "新的令人印象深刻的可执行开放Web",

"developer": {

"url": "http://yourawesomeapp.com"

}

},

"it": {

"description": "Il vostro nuovo fantastico Open Web App",

"developer": {

"url": "http://yourawesomeapp.com"

}

}

},

"default_locale": "en",

"permissions": {

"systemXHR": {}

}

}

更具体的细节可以在该项目接近完工时添加,是大多数Firefox OS应用所选择的。一个基本的manifert将开始
应用布局与设计

响应变化的设计已经变得越来越重要,更多的屏幕分辨率成为在不同的设备上的标准。即使你的应用程序的只有火狐浏览器操作系统的版本,重要的是,要记住Firefox OS可以安装在各种设备使用不同的屏幕分辨率。CSS提供了一种方式去适应设备:

/*以下是不同的CSS例子*/

/*基本桌面/屏幕宽度 */

@media only screen and (min-width : 1224px) {

/* style */

}

/* 传统iPhone宽度 */

@media  only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* style */

}

/* 装置设置在不同的方向 */

@media screen and (orientation:portrait) {

/* style */

}

@media screen and (orientation:landscape) {

/* style */

}
有很多JavaScript和CSS框架可用来帮助响应设计和移动应用开发(引导等),选择最适合你的应用程序和开发风格的框架。Mozilla的mortar是一个很好的工具。mortar对相应的设计有所帮助,但提供JavaScript工具来帮助在Firefox OS的模板开发,例如zepto.js(替代jQuery),和一个在Firefox OS模拟器安装你的应用的实用程序。这是mortar最基本的布局模板快速入门:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>我的App</title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width">

<!-- 把favicon.ico放在根目录 -->

<link rel="stylesheet" href="css/app.css">

</head>

<body>

<!-- 使用这个安装按钮本地安装,无需通过应用商店(见app.js) -->

<button id="install-btn">安装</button>

<!-- 在这里写你的应用 -->

<!-- 使用require.js,一个javascript模块系统,包括js文件。加载“init.js”,进而可以加载其他文件,所有由require.js处理的 http://requirejs.org/docs/api.html#jsfiles -->

<script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"></script>

</body>

</html>复制代码随意修改mortar所提出的结构-上面的代码片段应该让你发展。请注意,所有JavaScript代码必须在单独的.js文件,没有内联,脚本是允许的。Web APIsJavaScript APIs 创建并伴随着设备的提高而提高,Mozilla的Web APIs努力将许多移动特性带到JavaScript API来。一个设备支持列表和状态可在Web APIs页面查看。当然,JavaScript特性仍是最好的:

//如果设备支持震动API

if(‘vibrate‘ in navigator) {

//震动一秒

navigator.vibrate(1000);

}

在这个非常基本的应用程序模板,我们将修改一个基于改变设备的电池状态的DIV的风格:

/ /创建电池指示器的监听器

(function() {

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, indicator, indicatorPercentage;

if(battery) {

indicator = document.getElementById(‘indicator‘),

indicatorPercentage = document.getElementById(‘indicator-percentage‘);

/ /设置监听器的变化

battery.addEventListener(‘chargingchange‘, updateBattery);

battery.addEventListener(‘levelchange‘, updateBattery);

/ /立即更新

updateBattery();

}

function updateBattery() {

/ /更新百分比宽度和文本

var level = (battery.level * 100) + ‘%‘;

indicatorPercentage.style.width = level;

indicatorPercentage.innerHTML = ‘Battery: ‘ + level;

/ /更新充电状态

indicator.className = battery.charging ? ‘charging‘ : ‘‘;

}

})();复制代码在上面的演示代码中,一旦你确认电池API支持,您可以对chargingchange和levelchange的监听器以更新元素的显示。查看WebAPI页面,经常保持更新设备API状态WebRT APIs(基础权限api)有许多需要权限的WebAPIs需要使用。应用程序可以在manifest.webapp注册许可请求:

//manifest中的一个新键值:"permissions"

//请求访问任意数量的api

//我们在这里请求

permissions to the systemXHR API"permissions": {

"systemXHR": {}

}

一旦在Firefox OS模拟器安装你的应用,打开应用设置,选择应用权限,选择您的应用,并根据需要启用权限。重要的是要注意,并不是所有的Web api都已经在Firefox OS模拟器实现。

工具&测试
测试是在支持移动设备方面是很重要的。有很多方式可用于测试Firefox OS应用:
Firefox OS模拟器
安装和使用Firefox OS模拟器是使你的应用运行起来最简单的方法。在安装模拟器后,访问Tools->Web Developer->Firefox OS Simulator menu。模拟器与JavaScript控制台会启动,这样你就可以在模拟器中调试你的应用!
单元测试
当在不同的设备和构建习惯上测试时,单元测试是极有价值的。jQuery的QUnit是热门的客户端测试工具,你可以使用任何你喜欢的测试工具集。
FirefoxOS设备上
自从Firefox OS是一个开源平台,代码和工具可以用来在你自己的设备上构建和安装Firefox OS。构建和安装说明上可以找到MDN。Firefox OS预览设备都将可以很快通过Geeksphone
应用提交和分布
如果你的应用是完整的,它可以提交到Firefox的市场。你的应用的manifest将被验证,你可以选择你的应用程序将支持哪些设备(如Firefox OS、Firefox桌面版、Firefox移动版、Firefox平板)。确认后,你可以添加更多关于你应用的细节(截图、描述、价格等等),并正式提交manifest到应用市场。如果批准了你的应用,就可以提供给世界上所有用户购买和安装。

时间: 2024-11-03 19:50:43

Firefox OS Quick Start的相关文章

firefox os 2.0版模拟器上QQ初体验

对于firefox os 爱好者而言,firefox os 手机迟迟没在中国上市会感到些许遗憾,但我们要相信firefox os 登陆中国是迟早的事,腾讯QQ已经登陆firefox os 应用市场,今天我们就从模拟器上感受一番腾讯QQ,想体验的爱好者们可以参考安装模拟器抢先体验一番! 下载安装QQ 安装. 安装完成 登陆界面; 聊天界面 喜欢的盆友快去试试吧!!!   编辑(5狐网)firefox os 2.0版模拟器上QQ初体验,布布扣,bubuko.com

firefox os 2.0版模拟器QQ初体验

供firefox os 爱侣.firefox os 手机迟迟没有感到些许遗憾在中国上市会,但是,我们必须相信firefox os 登陆中国是迟早的事,腾讯QQ已经登陆firefox os 应用市场,今天我们就从模拟器上感受一番腾讯QQ,想体验的爱好者们能够參考安装模拟器抢先体验一番! 下载安装QQ 安装. 安装完毕 登陆界面; 聊天界面 喜欢的盆友快去试试吧.! !   编辑(5福克斯电视网) 版权声明:本文博主原创文章,博客,未经同意不得转载.

firefox os 开发模拟器1.4版本安装开发详解

首先在使用firefox os 模拟器的时候必须先下载firefox 浏览器,这个是众多web开发者必备的工具,下载地址firefox 浏览器 ,在最新的官方版本是1.5版的模拟器,但是现在还不是很稳定,所以暂时就以较稳定的1.4版本做为蓝本供开发者交流学习,下载地址firefox os 模拟器 ,接下了就是图文教程,教你一步一步安装1.4版的firefox os 模拟器,开始新的firefox os开发之旅! 编辑(5狐网)--更多资料教程请到Firefox os 论坛(5狐网) 连接地址:h

firefox os 手机开发之设备调用

1)话筒 权限:telephony api:navigator.moztelephony 链接参考:https://wiki.mozilla.org/WebAPI/WebTelephony 2) 扬声器 权限:audio channels选项:["normal", "content",""notification", "alarm", "telephony","ringer"]

firefox os 会不会是未来移动平板及电视之星

随着2013年第一款firefox os 手机问世以来.Firefox os 系统手机已经经历过几次系统的更新,如今最新版本号的firefox os 为2.0版本号,只是如今的最新版本号还不是非常稳定,须要进一步的优化升级!尽管firefox os 手机经历了多次更新升级.但国内用户却对firefox os 这款手机操作系统知之甚少,接下来就为大家普及一下firefox os 的相关知识. Firefox os 是有Mozilla公司开发的基于web的一款移动操作系统,这款操作系统底层也沿用了安

firefox os 该设备呼叫移动开发

1)话筒 权限:telephony api:navigator.moztelephony 参考链接:https://wiki.mozilla.org/WebAPI/WebTelephony 2) 扬声器 权限:audio channels选项:["normal", "content",""notification", "alarm", "telephony","ringer"]

如何让你的安卓手机瞬间变Firefox os 畅玩firefox os 应用

Firefox os 手机迟迟不能在国内大面积上市,现在能买到的Firefox os手机国内就一款Firefox os ZET OPEN C ,但这款手机配置确实还不如人意,价格方面也不实惠,对于我们火狐os爱好者来说真的是一种煎熬的等待与选择,但今天我想告诉你其Firefox os 离我们并不远了,今天我就以图文的方式教大家如何在我们已有的android 手机设备上玩firefox os应用!!! 首先我们去手机里的任意安卓应用市场上下载Firefox os浏览器并安装! 下载 安装并打开 点

Android灭亡论之Firefox OS操作系统出现

今天是2014年7月1日,过几天就要到深圳实训去了,实训核心内容是Android开发.虽然Android如今非常火,但作为程序员的我们必须时刻保持清醒的头脑.我虽不是什么预言家,但最近接触的Android项目,却让我真实的感受到Android操作系统正在走向灭亡的道路...来看看是什么操作系统可能会灭亡Android吧:Firefox OS,专案名称为Boot to Gecko.是由谋智公司(Mozilla Corporation)主导研发的开放源代码移动操作系统,采用Linux核心,应用于智能

Linux和Ubuntu环境下B2G(Firefox OS)安装、编译、测试教程集合

1在ubuntu上测试Firefox OS(B2G)系统 Firefox OS,项目代号为"Boot 2 Gecko",是一个开放的完全基于WEB标准的智能手机操作系统,由Mozilla公司开发.Firefox OS 底层属于Linux,开放的Web技术,而不是特定于平台的原生API,用HTML5 编写应用程序.Firefox OS 每日构建版目前可在电脑桌面上试用. 安装过程非常简单,下面是详细的步骤说明: 点 这里 下载 ... 2在 ubuntu系统上建立b2g系统(翻译) 你已