webapp應用---cordova.js 3.7.0外掛程式安裝總結

標籤：

今天是2014年的最後一天，年終總結什麼的就不寫了。記錄一下今天的工作內容。如果不知道phoneGap,那麼就不需要往下看了，phoneGap現在已經叫cordova了,叫什麼不重要，重要的是它對web行動裝置 App的開發很重要，如果你正在尋找關於cordova.js 外掛程式安裝方面的工作，那麼本文或許對你有用。

         cordoval.js目前最新的版本是3.7.0,較之前的2.xxx系列，最大的變化是把功能進行了外掛程式化，或者說是模組化也行。這樣做的好處呢是開發人員可以按需載入自己的功能外掛程式，減小檔案體積，同時也在代碼方面做了一些最佳化，提升了效率。外掛程式化的管理方式，方便進行擴充。

         看到有這麼多的好處，我們就動心了，直接升級到了3.7.0。可是在升級的過程中，卻遇到了不少的問題。這次改造的前端工作，就由我一人全全負責了。從官網下載下來的cordova.js核心檔案分成了ios,android等多個版本，而且每個版本都不含有任何外掛程式，比如網路攝影機，讀檔案，播放音頻等等。所以，改造的第一項工作就是把我們項目中需要的功能外掛程式全部載入上去。

        首先提一下我們項目需要用到的外掛程式有播放音頻，訊息提示，輸出日誌等。我先是去官網看了一下外掛程式的說明和用法，可是看了半天，也沒有找到怎麼用的方法，那些外掛程式的說明寫的實在是太簡單了。沒辦法，只有去百度了，可是百度來百度去，全是一些過時的用法，難怪別人說查技術資料用百度不靠普。好不容易，找了幾篇看上去還算粘邊的文章，滿心歡喜的照著做了一通，現在想想全是走了彎路。所以這裡就不引用它們的教程了。

       其實現在回過頭來看，只要弄懂一個外掛程式的用法，其它的就觸類旁通了。就拿音頻外掛程式來說吧。cordova.js 採用了 amd 這種規範，比如定義一個模組用define,調用一個模組用reqiure, 那麼要掛載一個外掛程式，肯定要先有一個音頻模組。這個在官方的github上有了，直接下載下來，找到對應平台的js檔案就行，只是呢添加這個模組有兩種方式，一種呢是通過在index.html中用script標籤引入的方式，另一種是通過直接在cordova.js中粘貼外掛程式的js源碼。我選擇的是後一種，但是直接粘貼之後發現，在android真機上調用外掛程式播放聲音的時候，eclipse的日誌上有錯誤提示說Media未定義。於是我就納悶了，仔細看了一下Media.js的源碼，大至是這樣的：

 (function(){


  這裡是cordova.js的範圍
  
  .................

var utils = require(‘cordova/utils‘),                exec = require(‘cordova/exec‘);            var mediaObjects = {};            /**             * This class provides access to the device media, interfaces to both sound and video             *             * @constructor             * @param src                   The file name or url to play             * @param successCallback       The callback to be called when the file is done playing or recording.             *                                  successCallback()             * @param errorCallback         The callback to be called if there is an error.             *                                  errorCallback(int errorCode) - OPTIONAL             * @param statusCallback        The callback to be called when media status has changed.             *                                  statusCallback(int statusCode) - OPTIONAL             */            var Media = function(src, successCallback, errorCallback, statusCallback) {                // successCallback optional               ................   module.exports = Media;

這裡其實只要把Media前面的var去掉，就可以把Media提升為全域變數，但是當時我居然沒有看出來。不過這樣也不是一個好的解決方案，因為cordova的核心功能都是用

define定義的，我這樣直接添加功能代碼，顯然與作者的外掛程式化思想是相背離的。於是呢，我就參考以前版本的寫法，用define進行了定義。變成如下這個樣子：

 define("cordova/plugin/Media", function(require, exports, module) {  var Media = function
....

module.exports = Media;
});

可是問題又來了，這樣做還是只是定義一件外掛程式而已，怎麼去調用它呢？其實真的很簡單，直接在cordova.js末尾，也就是 cordova = require(‘cordova‘)後面加一個Media=require(‘cordova/plugin/Meida‘);就可以了。當時我怎麼就沒有想到呢。可能是太過相信cordova的外掛程式機制了，它還沒有這麼智能。不過呢，這還沒有完，想想ios我們也是要相容的，所以ios平台對應的代碼也要加上。cordova為什麼不把各個平台通用的部分提出來呢？這樣的話，對於相容多個平台的情況，cordova的體積又可以大大減小了。

吐糟歸吐糟，後繼的工作還是要做好，陸續把其它的外掛程式也補上。不過呢，我要在此多說一句，別只顧著複製粘貼，有些內容需要根據實際情況進行修改一下。比如console.log這個外掛程式，用define進行封裝的時候，為了統一，最好都寫成

define("cordova/plugin/xxx")的形式，這樣維護的時候一看就明白了. 還有一個好處就是可以方便外掛程式機制進行自動化載入，不過這個好處我還沒有研究透，等看懂源碼再細說。另外還有一個坑，有一處代碼調用了require("cordova/plugin_list")這樣的代碼，但是卻沒有看到定義的地方,比如說define("cordova/plugin_list"),雖然在eclipse上編譯安裝的時候，產生apk沒有問題，真機上也正常用行了，但是java那邊的兄弟說在服務端打包的時候會報錯，說找不到plugin_list.js這個檔案。所以需要補上這個定義：

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

大致就是這麼一個東東，具體的代碼我不記得了，反正github上是有的下的。

最後呢，關於這個require/define的用法，我專門抽出來，然後進行了一些簡化，方便大家直觀的理解它的運行原理，如果覺得好，還可以在自己的項目中直接使用。

項目地址： https://github.com/bjtqti/mini-require

好了，總算寫完了。掌聲送給自己！

webapp應用---cordova.js 3.7.0外掛程式安裝總結