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，我就是从这里看到的。每个插件文件的说明中都有。