Firefox OS App開(kāi)發(fā)及部署
Firefox OS所有應(yīng)用都采用HTML5的標(biāo)準(zhǔn)，只要會(huì)HTML、CSS、JS，開(kāi)發(fā)APP是非常簡(jiǎn)單的，只是firefox os提供了一些針對(duì)移動(dòng)設(shè)備的特性，如電話、短信、WIFI、3G網(wǎng)絡(luò)等，但調(diào)用這些功能跟普通的JS組件一樣，操縱JS對(duì)象即可。mozilla也在和 W3C進(jìn)行協(xié)商，爭(zhēng)取將這些新增的特性添加到HTML5標(biāo)準(zhǔn)里面去。
Firefox OS App的部署目前有兩種方式
1.在gaia編譯前，將你的App工程（App工程的目錄結(jié)構(gòu)下面會(huì)詳細(xì)說(shuō)明）放到gaia源碼的apps或者test_apps目錄，然后make
這種方式可以在模擬器里運(yùn)行或者燒到B2G手機(jī)中運(yùn)行你的應(yīng)用
2.將你的App部署到web服務(wù)器，通過(guò)在線方式進(jìn)行安裝。但這樣，你需要將你的應(yīng)用發(fā)布到應(yīng)用商店或者自己?jiǎn)为?dú)寫(xiě)一個(gè)供App安裝的頁(yè)面，讓用戶(hù)通過(guò)該頁(yè)面安裝你的應(yīng)用。后面會(huì)有詳細(xì)的說(shuō)明。
接下來(lái)我們以一個(gè)超級(jí)簡(jiǎn)單的Demo來(lái)說(shuō)明怎么開(kāi)發(fā)Firefox OS App
1.新建一個(gè)文件夾testapp作為項(xiàng)目根目錄（注意，文件夾名必須為小寫(xiě)字母）
2.在testapp目錄下，新建index.html，代碼如下
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- </head>
- <body>
- hello Firefox OS
- </body>
- </html>
3.在testapp目錄下，新建manifest.webapp，代碼如下
- {
- "name": "Test App",
- "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.添加應(yīng)用的圖標(biāo)，在testapp目錄下，新建style目錄，添加一張png格式的圖片，作為應(yīng)用的圖標(biāo)，取名為testApp.png
5.部署，我們采用上面提到的第一種方式進(jìn)行部署，將testapp放到gaia源碼的test_apps下面，然后重新編譯giai源碼。編譯完后運(yùn)行模擬器，在你的Firefox os中，會(huì)看到你新增的應(yīng)用
6.如果需要在線安裝，首先需要把應(yīng)用放到web服務(wù)器上，然后添加一個(gè)安裝頁(yè)面，源碼如下
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8"/>
- <title>online install</title>
- <script type="text/javascript">
- function install() {
- var request = window.navigator.mozApps.install("http://demos.chyblog.com/testapp/manifest.webapp");
- request.onsuccess = function() {
- // Save the App object that is returned
- var appRecord = this.result;
- alert('Installation successful!')
- };
- request.onerror = function() {
- // Display the error information from the DOMError object
- alert('Install failed, error: ' + this.error.name);
- };
- }
- </script>
- </head>
- <body>
- <input type="button" value="install Test App" onclick="install()"/><br>
- from:<a href="http://www.chyblog.com">http://www.chyblog.com</a>
- </body>
- </html>
需要把
- var request = window.navigator.mozApps.install("http://demos.chyblog.com/testapp/manifest.webapp");
中的地址http://demos.chyblog.com/testapp/manifest.webapp替換成你的app下面manifest.webapp文件訪問(wèn)的URL路徑即可
部署好以后，使用B2G中的firefox瀏覽器訪問(wèn)該安裝頁(yè)面的URL地址，點(diǎn)擊“install Test App”按鈕，按照提示進(jìn)行安裝即可。也可使用演示頁(yè)面，安裝該應(yīng)用
效果截圖
源碼下載：http://chyblog-chyblog.stor.sinaapp.com/wp-content/uploads/2012/09/testapp.zip
