首页 > 代码库 > Firefox OS Quick Start
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="http://www.mamicode.com/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="http://www.mamicode.com/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到应用市场。如果批准了你的应用，就可以提供给世界上所有用户购买和安装。