HTML+CSS+JS 开发 Firefox OS 应用编程实战_只为firefox编写css规则 json文件-CSDN博客

也许你听说过Firefox OS或者Boot to Gecko（B2G），它是什么？一个OS！一个完全开源的、基于Firefox渲染引擎（Gecko）的操作系统，这意味着其应用将可以使用现代Web技术开发：HTML、CSS和JavaScript。目前这个项目叫做Gaia，一个小型的、基于Boot to Gecko技术的手机操作系统，但实际上并不限于手机——它已经被移植到了Raspberry Pi上了。

下面是一个关于Firefox OS的应用开发实践，只需要开发者有基本的HTML、CSS、JavaScript知识就可以了。

我没有Firefox手机怎么办？

当然没问题，最简单的方式是在计算机上运行一个模拟器。首先需要下载并安装Firefox Nightly（编者注：其实最新版Firefox已经支持该模拟器），之后拖拽安装该插件，最后打开相应链接就可以了。

一旦下载、安装完成，你看到的会是这样：

如果这个选项卡没有打开，你可以从菜单中装载它：Tools -> Web Developer -> Firefox OS Simulator。继续点击Stopped链接，Firefox OS就出现了。

解锁后你可以随便看看，已经预装了很多应用——其中我最喜欢的是CrystalSkull，非常绚丽，让人神魂颠倒……不好意思，跑题了。

你需要注意，目前Firefox OS和Gaia仍在开发中（该平台上大部分应用也是如此），所以如果出现了小的错误请容忍它。

所以，开始吧！

如果我们回到Firefox的插件安装页面，将会看到有两种为模拟器安装应用的选项，你可以通过本地应用或者URL链接。我们将会选择前者，所以，开始创建文件吧！

我们这里要开发的应用叫做Pocket Kitten，将会随机展示一张小猫的照片，每次点击设备的时候将会切换另一张小猫的图片。首先创建一个文件夹存放应用程序，再在其中创建两个子文件夹，一个用于存放CSS文件（样式），另一个用于存放JavaScript(js)。接下来创建第一个文件，manifest.webapp，以json格式编写应用相关的数据（如果你需要使用Web API的话还需要申请权限）。

```
{
```
"name": "Pocket Kitten",
"description": "Calm yourself with a kitten",
"launch_path": "/index.html",
"developer": {
"name": "Ruth John",
"url": "http://www.rumyra.com"
},
"icons": {
"120": "/style/icons/pocket-kitten@2x.png",
"60": "/style/icons/pocket-kitten.png"
},
"orientation": "portrait-primary"
}

我们还需要为应用创建一个icon。实际上是两个：第二个是为Retina屏幕准备的，是第一张图片分辨率的两倍。

简单起见，这里开发的是一个单页App，所以接下来创建我们唯一的HTML文件，index.html。我们所需要做的就是在HTML文件顶部设置应用名，并添加一只小猫的图片。

```
<!DOCTYPE html> 
```
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<title>Pocket Kitten</title>
<link rel="stylesheet" type="text/css" href="style/pocket-kitten.css"/>
<script defer type="application/javascript" src="js/pocket-kitten.js"></script>
</head>
<body role="application">
<section role="region">
<header aria-level="1">
<h1>Pocket Kitten</h1>
</header>
<figure class="show-kitten">
<div>
<img id="kitten-image" src="/style/images/fetching.gif" alt="A picture of a kitten" />
<span></span>
</div>
<figcaption>Tap to see a new little kitty</figcaption>
</figure>
</section>
</body>
</html>

在Firefox中打开index.html文件，接下来我们将在浏览器中开发Pocket Kitten。如果我们将视图设置得和模拟器一样，将可以在添加CSS同时看到应用的样式。打开菜单Tools -> WebDeveloper -> Responsive Design View，从下拉列表中选择320x480。

接下来编写一些CSS文件，设计应用的样式。Gaia开发团队已经为我们提供了一个模式库——Gaia building blocks，实际上，利用开放的网络技术，我们可以把应用变成任何样子，这简直太棒了！

因为这个例子比较小，所以只有一个CSS文件：style/pocket-kitten.css：

```
html, body { 
```
margin: 0;
padding: 0;
font-size: 10px;
font-family: "Georgia", serif;
line-height: 1;
overflow: hidden;
}
section[role="region"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
background: url(images/document_bg.png);
overflow-x: hidden;
overflow-y: scroll;
background-image:
-moz-linear-gradient(top, rgba(141,186,196,0.5) 30%, rgba(178,220,230,0.5)),
url('images/gray_jean.png')
;
}
header {
text-align: center;
color: white;
padding: 1px 0px;
background-image:
-moz-linear-gradient(top, rgba(9,64,72,0.7), rgba(0,44,52,0.7)),
url('images/classy_fabric.png')
;
}
h1 {
font-weight: normal;
font-size: 24px;
font-style: italic;
text-shadow: 2px 2px 2px black;
}
.show-kitten div {
margin: 20px auto;
height: 320px;
width: 240px;
overflow: hidden;
position: relative;
background:transparent url('images/fetching.gif') no-repeat left top;
border-radius: 10px;
box-shadow:
0px 0px 1px 4px rgba(222,249,255,1),
0px 0px 2px 4px rgba(0,0,0,0.5),
1px 1px 2px 4px rgba(0,0,0,0.5),
inset 0px 0px 2px 2px rgba(0,0,0,0.4)
;
}
/*box-shadow doesn't render on image, so hacking a covering span*/
.show-kitten div span {
height: 320px;
width: 240px;
position: absolute;
top: 0px;
left: 0px;
box-shadow: inset 0px 0px 2px 2px rgba(0,0,0,0.4);
border-radius: 10px;
}
.show-kitten figcaption {
font-size: 18px;
color:rgba(0,44,52,1);
text-shadow: 1px 1px 1px white;
margin: 20px 0px;
text-align: center;
}

也许你已经注意到了，CSS文件里有三张背景图片，其中两个是背景纹理，另外一个是小猫照片的占位图：

在加入这些样式/图片文件后，你可以在浏览器中刷新Pocket Kitten来预览其样式。

现在先预览一下它在模拟器中的样子吧：

返回模拟器插件tab，点击‘Running’来停止模拟器；
点击Add Directory按钮，浏览Place Kitten文件夹并选择manifest.webapp file文件；
点击open，Pocket Kitten应用就被添加到模拟器屏幕中了；
接下来重新启动模拟器将会看到Pocket Kitten应用图标；
点击运行。

接下来需要添加触摸/点击操作来切换图片的功能。这需要创建一个JavaScript文件：pocket-kitten.js，将其保存在js文件夹中。这里我将使用一个外部Web Service——placekitten.com，可以根据URL中不同的参数提供不同的小猫图片，这意味着当用户没有数据连接时无法使用，需要返回相应的提示信息。

下面来看看用户没有数据连接时的警告应该怎么写：