Rormix 是一个探索新兴音乐视频的平台。音乐视频按类型和类似的商业艺术家进行标记，方便用户发现新的音乐视频。

Rormix 应用使用 PhoneGap 开发，并在 iOS 和 Android 上发布。从第一行代码到应用商店提交，开发仅用了一个多月的时间。而 Firefox OS 版本仅用了一位开发者一天就完成了！

下面列出了一些我们在开发过程中学到的东西

我应该针对哪些屏幕尺寸进行开发？

当您开发一个开放式网络应用时，您可以将其安装在桌面浏览器、Android Firefox 浏览器或 Firefox OS 设备上。

如果您想在一个应用中支持所有这些平台，响应式设计是必不可少的（您也可以只选择要支持的平台）。当前的 Firefox OS 手机 分辨率为 320×480。它们的像素密度为 1，因此无需生成特殊的图形。

返回按钮？

iOS 设备没有返回按钮，Android 设备有硬件返回按钮，那么 Firefox OS 呢？它有一个软件返回按钮，您可以在构建 应用清单 时选择隐藏或显示它。返回按钮可以隐藏在屏幕底部，但可能难以按下。

我建议您在应用中内置一个返回按钮，并隐藏默认按钮，以便于应用导航。

//jQuery example
$('.backbutton').click(function(){
    history.go(-1);
});

有状态设计

由于 Firefox OS 中存在返回按钮，因此您需要构建一个有状态的应用程序，以便在用户按下返回按钮时返回到相应的状态。
实现此功能的一种简单方法是使用各种使用片段标识符加载不同状态的 JS 框架（例如 Sammy JS）。

//jQuery example

//Sammy app
var app;

$(function(){

    app = Sammy(function() {
        this.get('#/', function() {
            //Load default content
        });
        this.get('#/trending', function() {
            //Get trending content
        });
        this.get('#/fresh', function() {
            //Get fresh content
        });
    });
});

//Load the default content on app load
app.run('#/');


//Go to fresh content
$('.freshbutton').click(function(){
    app.setLocation('#/fresh');
});

创建菜单

为 Firefox OS 制作菜单的技巧是使用 CSS3 变换来提高速度，同时也要保持简单，以限制菜单出现时的重绘循环。Firefox OS 手机的参考像素宽度与所有 iPhone 相同（截至撰写本文时），像素高度与 iPhone 5 之前的 iPhone 相同，因此，如果您有一个适用于 iOS 的设计，那么您就万事俱备了。

添加一些 Firefox OS 风格

有一套 设计指南，可以帮助您了解 Firefox OS 平台的配色方案等。它们还详细说明了如何制作应用图标、使用的字体等。

提交您的应用

构建完应用后，您可以选择提交方式。您可以将其 打包 为 zip 文件

zip -r package.zip *

您可以将此 zip 文件发送到 应用商店，或者您可以 自行托管。

另一种选择是简单地 托管代码 作为网页（而不是将其压缩为 zip 文件），并使用 少量额外的 JS 提示用户将应用下载到手机上。

附注：使用 PhoneGap/Cordova 和 HTML5

构建网络应用可以让您快速轻松地构建跨平台应用。更棒的是，使用响应式设计，所有这些都可以在一个项目中完成。先进的工具和工作流程（例如 Sass 和 Yeoman）使开发应用变得更加容易。

PhoneGap/Cordova 从 3.4 版本 开始支持 Firefox OS（更多信息请参阅 为 Firefox OS 构建 Cordova 应用）。使用 PhoneGap 最大的优势在于您只需为所有应用维护一个代码库。我们都知道有些浏览器存在一些小问题，PhoneGap 具有内置的合并机制，允许您将平台特定的代码与主代码分开，并在构建应用时将其合并。

PhoneGap 还有一个 大量库 用于访问 手机的原生属性（例如原生对话框），并且此代码在所有平台上都是相同的，最大程度地减少了重复代码。

PhoneGap 最棒的一点是您可以创建自己的插件，轻松利用移动设备的功能，并在 JS 和原生移动代码之间轻松切换。

联系方式
@pixelcodeUK