由于受到安全的限制，WEB應(yīng)用跨域調(diào)用實現(xiàn)起來是比較麻煩的。傳統(tǒng)的做法有服務(wù)器代理、jsonp接口等，但在firefox os中并不需要如此大費周折。在firefox os中已經(jīng)提供了跨應(yīng)用交互的機(jī)制，雖然目前來看并不是特別的方便，但已經(jīng)可以實現(xiàn)基本的跨應(yīng)用交互的App了。本文將以一個實際的DEMO來講解B2G的跨應(yīng)用調(diào)用。

概要介紹

本文將開發(fā)兩個應(yīng)用，應(yīng)用一：Caller，應(yīng)用二：Receiver

Caller中有一個Show Images的按鈕，點擊該按鈕將啟動Receiver,Receiver中提供了一些圖片瀏覽的功能，在Receiver中選擇圖片后，點擊Select按鈕，將把圖片傳送到Caller中，并在Caller中展現(xiàn)該選擇的圖片

整體效果如下

Caller應(yīng)用

[[60720]]

Receiver應(yīng)用

細(xì)節(jié)說明

Receiver

在Firefox OS中，要讓應(yīng)用可被其他應(yīng)用調(diào)用，需要在該應(yīng)用的manifest.webapp中進(jìn)行聲明。我們看一下Receiver的manifest.webapp文件

{  
     "name": "Receiver",  
     "launch_path": "/index.html",  
     "developer": {  
         "name": "chyblog",  
         "url": "http://www.chyblog.com"  
     },  
     "icons": {  
         "120": "/style/icons/Receiver.png"  
     },  
     "permissions": [  
         "background",  
         "backgroundservice",  
         "attention",  
         "contacts",  
         "settings",  
         "desktop-notification"  
     ],  
     "activities": {  
         "pick": {  
             "filters": {  
                 "type": ["image/png", "image/gif"]  
             },  
             "returnValue": true,  
             "disposition": "inline"  
         }  
     }  
 }  

其中activities屬性聲明了一個web activity，取名為pick，其中filters屬性告訴system對哪些類型的請求響應(yīng)，Receiver應(yīng)用，可以響應(yīng)名稱為pick，type為image/png或者image/gif類型的響應(yīng)。

returnValue是一個布爾類型的屬性，為true時，聲明該web activity需要返回數(shù)據(jù)給調(diào)用它的應(yīng)用，false則不需要返回數(shù)據(jù)給調(diào)用者

disposition屬性有兩種可選值，window和inline，如果為window，則會以啟動一個新應(yīng)用的方式打開，如果為inline，則會臨時啟動一個畫面顯示該應(yīng)用的界面。

在Receiver應(yīng)用中，還需要用js編寫響應(yīng)調(diào)用的處理代碼

navigator.mozSetMessageHandler('activity', webActivityHandler);  
 
var activityRequest;  
 
var webActivityHandler = function(request) {  
    activityRequest = request;  
 
    document.getElementById('button').disabled = '';  
    document.getElementById('cancelButton').disabled = '';  
 };  

以上代碼注冊了一個事件響應(yīng)句柄，并將請求者的信息保存在全局變量activityRequest中

當(dāng)用戶點擊Select按鈕后，將把圖片信息傳送給Caller。代碼如下

function select() {  
    if (!activityRequest) {  
        alert('There are no any pending activity request.');  
        return;  
    }  
 
    // Return the request  
    activityRequest.postResult({  
        type : 'image/png',  
        text : getBase64Image(selectedImg)  
    });  
    activityRequest = null;  
 
    // close app, currently useless,  
    // see https://bugzilla.mozilla.org/show_bug.cgi?id=789392 
    window.close();  
};  

由于兩個應(yīng)用的數(shù)據(jù)交互只能使用文本信息傳遞，這里將Receiver中的圖片以base64文字編碼的方式傳給Caller，在Caller中，將該文本設(shè)置到backgroundImage中，即可顯示，獲取圖片的base64編碼的代碼如下

function getBase64Image(imgSrc) {  
    var img = new Image();  
    img.src = imgSrc;  
    var canvas = document.createElement("canvas");  
    canvas.width = img.width;  
    canvas.height = img.height;  
    var ctx = canvas.getContext("2d");  
    ctx.drawImage(img, 0, 0);  
    var dataURL = canvas.toDataURL("image/png", 0.2);  
    return dataURL;  
} 
 

Caller

Call應(yīng)用中，主要是觸發(fā)Receiver調(diào)用的響應(yīng)和接受返回數(shù)據(jù)的處理

Call首先創(chuàng)建一個activity請求，需要告訴system，請求的名稱和類型。并注冊請求成功返回和請求失敗時的處理邏輯。而請求如何去調(diào)用，完全由system控制。創(chuàng)建請求的代碼如下

 var a = new MozActivity({
     name : 'pick',
     data : {
         type : 'image/png'
     }
 });

 a.onsuccess = function() {
     reopenApp();
     document.getElementById('showImg').style.backgroundImage = "url(" + this.result.text + ")";
     document.getElementById('result').textContent = 'well done';
 };

 a.onerror = function() {
     reopenApp();
     document.getElementById('showImg').style.backgroundImage = "";
     document.getElementById('result').textContent = '(canceled)';
 };

需要強調(diào)的是，Caller和Receiver是兩個獨立的應(yīng)用，兩者之間的交互都是system app負(fù)責(zé)的。我們需要做的，就是聲明web activity，觸發(fā)請求和響應(yīng)請求。

源碼下載：http://chyblog-chyblog.stor.sinaapp.com/wp-content/uploads/2012/10/webActivity.zip