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到应用市场。如果批准了你的应用,就可以提供给世界上所有用户购买和安装。