phonegap由2.7升级到3.7之前,只要引入一个cordova.js,就可以了。现在由于所用的插件,都需要用模块的形式进行按需加载,自然就没有以前那么安逸了。

例如,如果要在安卓平台添加一个音频处理插件,除了要引入cordova.js之外,还要手动添加Media.js文件。这里有两种方式,一种是通过官方推荐的方式,使用

nodejs的命令行进行添加,另一种则是把Media.js用模块的方式直接粘贴到cordova.js中。

第一种方式要先安装nodejs,网上的教程都是基于nodejs+eclipse进行说明的。单是环境,我就搭了好半天,而且eclipse-SDK要翻墙才能下载,照网上的教程,貌似还要会一点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插件的更多相关文章

  1. Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flas

    转自Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flash Player Chromium谷歌的开源浏览器将不再支持Netscape浏览器插件API,Adobe ...

  2. Emacs添加主题插件(Win系统)

    Emacs添加主题插件(Win系统) */--> /* @licstart The following is the entire license notice for the JavaScri ...

  3. IntelliJ IDEA 添加junit插件

    一.使用idea做junit测试需要添加junit插件 1.安装插件 File-->settings-->Plguins-->Browse repositories-->输入J ...

  4. atitit.MyEclipse10 中添加svn插件故障排除

    atitit.MyEclipse10 中添加svn插件故障排除 删除\configuration \org.eclipse.update 不行... 二. 在configuration下的config ...

  5. JFinal 添加Druid插件

    第一步:添加依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</a ...

  6. CORDOVA :添加cordova-plugin-file-opener2插件cordova打包报错

    原文:CORDOVA :添加cordova-plugin-file-opener2插件cordova打包报错 最近在接触android项目,其中涉及到APP自动更新的问题,当新APP下载成功后需要打开 ...

  7. Android Studio 添加 Genymotion插件

    原文:Android Studio 添加 Genymotion插件 1.下载Genymotion:官网地址,必须先注册才能下载,下载带有VirtualBox的版本 2.安装:安装时会连VirtualB ...

  8. Eclipse添加spring-tool-suite插件

    Eclipse添加spring-tool-suite插件 步骤 1.help --> Eclipse Marketplace,在search框中搜索spring-tool-suite,点击右下角 ...

  9. Win7下安装VS2017、安装Qt5.10.1以及在VS2017添加qt插件

    一.安装VS2017 1.下载VS2017 进入vs下载官网https://www.visualstudio.com/zh-hans/downloads/,选择所需要的vs版本,进行在线安装. 2.安 ...

随机推荐

  1. 【AR实验室】mulberryAR : ORBSLAM2+VVSION

    本文转载请注明出处 —— polobymulberry-博客园 0x00 - 前言 mulberryAR是我业余时间弄的一个AR引擎,目前主要支持单目视觉SLAM+3D渲染,并且支持iOS端,但是该引 ...

  2. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  3. 移动站应该尝试百度MIP的五个原因

    MIP是什么?MIP是百度在2016年提出的移动网页加速器项目. MIP能做什么?MIP能帮助站长和网站开发者快速搭建移动端页面. MIP怎么加速?MIP从前端渲染和页面网络传输两方面进行优化,杜绝页 ...

  4. Entity Framework 手动使用migration里面的up 和down方法。

    add-migration -IgnoreChanges 201606100717405_201606100645298_InitialCreate 执行这一句后 ,清空使用map生成的代码,个人不太 ...

  5. iOS微信里打开app,Universal Links

    这两天在弄分享,从第三方应用或者浏览器打开自己app的东西 传统的方式是通过URL Scheme的方式,但是iOS9以后又出了新的更完美的方式Universal Links. 传统的URL Schem ...

  6. java中Action层、Service层和Dao层的功能区分

    Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. DAO只 ...

  7. spring的BeanFactory加载过程

    ApplicationContext spring = new ClassPathXmlApplicationContext("classpath*:spring/applicationCo ...

  8. 面向对象相关知识点xmind

  9. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  10. 【干货分享】流程DEMO-付款申请单

    流程名: 付款申请单  业务描述: 包括每月固定开支.固定资产付款.办公用品付款.工资发放.个人所得税缴纳.营业税缴纳.公积金.社保缴纳和已签订合同的按期付款,最后是出纳付款,出纳核对发票. 流程发起 ...