本文共 3595 字，大约阅读时间需要 11 分钟。

由于受到安全的限制，应用跨域调用实现起来是比较麻烦的。传统的做法有服务器代理、jsonp接口等，但在firefox os中并不需要如此大费周折。在firefox os中已经提供了跨应用交互的机制，虽然目前来看并不是特别的方便，但已经可以实现基本的跨应用交互的App了。本文将以一个实际的DEMO来讲解B2G的跨应用调用。

概要介绍

本文将两个应用，应用一：Caller，应用二：Receiver

Caller中有一个Show Images的按钮，点击该按钮将启动Receiver,Receiver中提供了一些图片浏览的功能，在Receiver中选择图片后，点击Select按钮，将把图片传送到Caller中，并在Caller中展现该选择的图片

整体效果如下

Caller应用

Receiver应用

细节说明

Receiver

在Firefox OS中，要让应用可被其他应用调用，需要在该应用的manifest.webapp中进行声明。我们看一下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对哪些类型的请求响应，Receiver应用，可以响应名称为pick，type为image/png或者image/gif类型的响应。

returnValue是一个布尔类型的属性，为true时，声明该web activity需要返回数据给调用它的应用，false则不需要返回数据给调用者

disposition属性有两种可选值，window和inline，如果为window，则会以启动一个新应用的方式打开，如果为inline，则会临时启动一个画面显示该应用的界面。

在Receiver应用中，还需要用js编写响应调用的处理

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

以上了一个事件响应句柄，并将请求者的信息保存在全局变量activityRequest中

当用户点击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();   
  };  

由于两个应用的数据交互只能使用文本信息传递，这里将Receiver中的图片以base64文字编码的方式传给Caller，在Caller中，将该文本设置到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应用中，主要是触发Receiver调用的响应和接受返回数据的处理

Call首先创建一个activity请求，需要告诉system，请求的名称和类型。并请求成功返回和请求失败时的处理逻辑。而请求如何去调用，完全由system控制。创建请求的代码如下

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)'; };

需要强调的是，Caller和Receiver是两个独立的应用，两者之间的交互都是system app负责的。我们需要做的，就是声明web activity，触发请求和响应请求。

转载地址：https://blog.csdn.net/cui_shuang_xi/article/details/24691805 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！