PhoneGap/cordvoa如何添加Media外掛程式

標籤：

phonegap由2.7升級到3.7之前，只要引入一個cordova.js，就可以了。現在由於所用的外掛程式，都需要用模組的形式進行按需載入，自然就沒有以前那麼安逸了。

例如，如果要在安卓平台添加一個音頻處理外掛程式，除了要引入cordova.js之外，還要手動添加Media.js檔案。這裡有兩種方式，一種是通過官方推薦的方式，使用

nodejs的命令列進行添加，另一種則是把Media.js用模組的方式直接粘貼到cordova.js中。

第一種方式要先安裝nodejs,網上的教程都是基於nodejs+eclipse進行說明的。單是環境，我就搭了好半天，而且eclipse-SDK要FQ才能下載，照網上的教程，貌似還要會一點java才行。總之，我沒有成功，不過搞安卓的同事幫我測試成功了，產生了一堆的檔案。對於這種方式瞭解一下就好了，後面我會重點講第二種方式。

通過一系列的命令之後，nodejs給我們產生了一個重要的檔案，就是在assets中，產生了cordova_plugins.js這個檔案。這個檔案的內容格式如下：

cordova.define(‘cordova/plugin_list‘, function(require, exports, module) {module.exports = [    {        "file": "plugins/org.apache.cordova.media/www/MediaError.js",        "id": "org.apache.cordova.media.MediaError",        "clobbers": [            "window.MediaError"        ]    }
}

實際上，cordova.js在init方法中，會自動去檢查外掛程式列表(cordova/plugin_list),如果裡邊定義了外掛程式模組，那麼cordova會依照file指定的路徑去載入。這就是整個外掛程式機制的秘密所在。這種按需載入確實很好，不過配置過程實在很煩。雖然代碼精簡了，但是對技術開發人員的要求更高了，自少你要會nodejs的一些基礎知識才行，否則你連環境都搭不好，更不用說使用命令列操作了，坦白說，這種方式我不太接受。那除此之外，還有沒有別的更簡單的方式呢？經過我的研究，發現其實還是有的。於是，第二種方式就隆重出場了。

吼吼！，平複一下心情，go on ...

首先，我們看一下以前2.x版本的cordova.js（叫phonegap也行）,它是把外掛程式和cordova核心代碼整合在一起的。那麼我模仿它的方式把想要外掛程式粘進去，不就可以了嗎？一想到可以和nodejs那繁瑣的操作說拜拜就有點激動！

仔細對比，所有的模組，都是用cordova.define(‘cordova/模組名‘, function(require, exports, module) {}這樣的形式進行定義的。那麼，我只要把Media.js中的內容也這樣封裝一下，就可以整合進去了。這樣一來，連按需載入都省了。

cordova.define(‘cordova/plugins/Media‘, function(require, exports, module) {    //....此處的代碼從Media.js中粘進來}

 

可是光這樣子還不行，報錯了，說找不到plugin_list模組。這個簡單，直接做一個空的模組進去佔位就發好了。

cordova.define(‘cordova/plugin_list‘, function(require, exports, module) {    module.exports = []}

清除緩衝，用eclipse重新編譯，滿心歡喜的期待著安卓手機可以聽到美妙的音樂。可是我什麼也沒有聽到，仔細找原因，發現只define是不行的，還要調用一下才行。

如果是用外掛程式列表去自動載入的話，會自動註冊列表中的外掛程式，但是我這樣投機取巧的方式，顯然cordova是沒法發現的。只有我自己人為去觸發一下，這個操作也不難。

它自己就這麼幹過：window.cordova = require(‘cordova‘);於是我也照著寫一個：window.Media = require(cordova/plugins/Media‘);果然，就有聲音了。滿心歡喜了好長一段時間，直到測試部發郵件給我，說聲音播著播著就亂了。這下麻煩大了，我著實不知道是哪出了問題。只好又回到eclipse的工程模式中，仔細監測日誌。發現有一些綠色的提示資訊（console.log輸出：org.apache.cordova.media.Media沒有找到），當時沒有引起我的警覺，我一直以為是java那邊的問題，直到java那邊確認沒有問題之後，我才不得不檢查js的問題。好了，我就不轉彎子了，問題出來外掛程式名的定義上。

改成如下方式就好了：

cordova.define(‘org.apache.cordova.media.Media‘, function(require, exports, module) {    //....此處的代碼從Media.js中粘進來}

至此，eclipse中就沒剛才那行提示資訊冒出來了，播放結束之後，也有了回呼函數。完美收工。

我接著又加了一個org.apache.cordova.dialogs用於安卓上提供對話方塊，org.apache.cordova.console-via-logger 用於ios輸出日誌，都很成功。不過有一點需要注意，用“org.apache.cordova.xxx”定義的外掛程式名是用來給全域的require("org.apache.cordova.xxx")調用的，它會自動註冊外掛程式名，如果是模組內部用的私人模組，或者說是相依模組，那麼還是按照cordova.define(‘cordova/xxxx‘, function(require, exports, module) {}) 這種方式來寫。

例如org.apache.cordova.console-via-logger 這個外掛程式，有一個相依模組logger，那麼還是用路徑的形式定義，如：

define("cordova/plugin/logger", function(require, exports, module) {});

/************************日誌外掛程式**********************/    define("org.apache.cordova.console-via-logger", function(require, exports, module) {      //------------------------------------------------------------------------------      //內部使用的模組，用路徑方式定義，然後用路徑方式引入      var logger = require("cordova/plugin/logger");

 

那麼問題又來了，你會問，這個外掛程式名是哪裡得知的呢？開啟從git下載的外掛程式檔案，找到README.md ，裡就有一個# org.apache.cordova.media，我就是從這裡看到的。每個外掛程式檔案的說明中都有。

  

PhoneGap/cordvoa如何添加Media外掛程式