Firefox OS所有应用都采用HTML5的标准,只要会HTML、CSS、JS,开发APP是非常简单的,只是firefox os提供了一些针对移动设备的特性,如电话、短信、WIFI、3G网络等,但调用这些功能跟普通的JS组件一样,操纵JS对象即可。mozilla也在和 W3C进行协商,争取将这些新增的特性添加到HTML5标准里面去。
Firefox OS App的部署目前有两种方式
1.在gaia编译前,将你的App工程(App工程的目录结构下面会详细说明)放到gaia源码的apps或者test_apps目录,然后make
这种方式可以在模拟器里运行或者烧到B2G手机中运行你的应用
2.将你的App部署到web服务器,通过在线方式进行安装。但这样,你需要将你的应用发布到应用商店或者自己单独写一个供App安装的页面,让用户通过该页面安装你的应用。后面会有详细的说明。
接下来我们以一个超级简单的Demo来说明怎么开发Firefox OS App
1.新建一个文件夹testapp作为项目根目录(注意,文件夹名必须为小写字母)
2.在testapp目录下,新建index.html,代码如下
<!DOCTYPEhtml ><html ><head > <meta charset="utf-8"/></head ><body > helloFirefoxOS </body ></html >
3.在testapp目录下,新建manifest.webapp,代码如下
{ "name":"TestApp", "launch_path":"/index.html", "developer":{ "name":"chy", "url":"http://chyblog.sinaapp.com" }, "appcache_path":"/cache.manifest", "fullscreen":"true", "icons":{ "120":"/style/testApp.png" }, "permissions":[ ] }
4.添加应用的图标,在testapp目录下,新建style目录,添加一张png格式的图片,作为应用的图标,取名为testApp.png
5.部署,我们采用上面提到的第一种方式进行部署,将testapp放到gaia源码的test_apps下面,然后重新编译giai源码。编译完后运行模拟器,在你的Firefox os中,会看到你新增的应用
6.如果需要在线安装,首先需要把应用放到web服务器上,然后添加一个安装页面,源码如下
<!DOCTYPEhtml ><html ><head ><meta charset="UTF-8"/><title >onlineinstall </title ><script type="text/javascript">functioninstall(){ varrequest =window .navigator.mozApps.install("http://demos.chyblog.com/testapp/manifest.webapp");
request.onsuccess =function(){ //SavetheAppobjectthatisreturned varappRecord =this .result; alert('Installationsuccessful!') }; request.onerror =function(){ //DisplaytheerrorinformationfromtheDOMErrorobject
alert('Installfailed,error:'+this.error.name); }; } </script ></head ><body ><input type="button"value="installTestApp"onclick="install()"/><br >from:<a href="http://www.chyblog.com">http://www.chyblog.com
</a ></body ></html >
需要把
varrequest =window .navigator.mozApps.install("http://demos.chyblog.com/testapp/manifest.webapp");
中的地址http://demos.chyblog.com/testapp/manifest.webapp替换成你的app下面manifest.webapp文件访问的URL路径即可
部署好以后,使用B2G中的firefox浏览器访问该安装页面的URL地址,点击“install Test App”按钮,按照提示进行安装即可。也可使用演示页面,安装该应用
效果截图
源码下载:http://chyblog-chyblog.stor.sinaapp.com/wp-content/uploads/2012/09/testapp.zip
相关推荐
Firefox-OS-Boilerplate-App-gh-pages
[MDN搬运]Firefox OS开发的学习_02_app_manifest
一个最简单的firefox OS App的例子,详细内容请参见作者博文。
模拟器可以使用 Firefox OS 目前开发中的大多数功能。 Mozilla发布了Firefox OS Simulator 3.0正式版,带来了预览版里的所有功能,并且做出了更多的改进。安装好套件后,可以在 Firefox 主选单的【WEB开发者】-【 ...
Firefox OS的概览以及开发环境的介绍
Firefox OS开发入门——第一个app,如何创建一个可在Firefox OS中运行的App,并在模拟器中进行测试。
firefox os快速开发文档.英文语言
FIREFOX OS 概况和开发环境介绍文档,对于初步接触firefox os的人员可以看看。
[MDN搬运]Firefox OS开发的学习_04_在线及离线事件
[MDN搬运]Firefox OS开发的学习_03_使用App缓存 WEB APP缓存介绍,如何使用APP缓存使得应用能离线使用
firefox os 开发者文档对初学开发者是个不错的开发指导中文文档,对你学习firefox os 开发有一定的帮助!
火狐开发os移动操作系统demo代码文档示例 firefox 移动操作系统 代码和文档示例, 使用firefox 浏览器操作,需要安装 FireFox os Simulator,地址为: http://download.csdn.net/detail/kaixin5588/6592373
Firefox-OS-Boilerplate-App, 创建 Firefox 操作系统应用程序 Firefox 操作系统样板应用这是一个用于 Firefox 操作系统的演示应用程序,它基于 fxosstub插件,旨在作为一个简单的模板,用于启动应用程序的应用程序。...
学习firefox os开发的第一个例子
firefox os 开发文档 QEMU Emulator Firefox OS Desktop Firefox OS Simulator Firefox Nightly Firefox OS Device
该文档包含了HTML5的一些例子,包括Audio、canvas等简单demo。
Firefox OS 系统的简介; Firefox OS调试工具用法介绍; Firefox OS 中简单app 写法及部分API 介绍
从MDN搬运的Firefox OS开发文章,to be continue...
firefox插件开发教程firefox插件开发教程
这个文档是个人在开发100工具时总结出来的文档,部分内容摘自他人,只供学习