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. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  2. 2015 西雅图微软总部MVP峰会记录

    2015 西雅图微软总部MVP峰会记录 今年决定参加微软MVP全球峰会,在出发之前本人就已经写这篇博客,希望将本次会议原汁原味奉献给大家 因为这次是本人第一次写会议记录,写得不好的地方希望各位园友见谅 ...

  3. 关于开启.NET在线提升教育培训的通知! - 可在此页面观看在线直播!

    年前在线公开课程通知: 近期在开启VIP课程,隔天讲一次,年前其它时间插空讲公开课,主题:设计模式系列 1:培训 - 大概不会讲的内容: 1:不讲系列. 2:不讲入门. 3:不讲我不懂的! 2:培训 ...

  4. DBSCAN密度聚类算法

    DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密度聚类算法,和K-M ...

  5. gitHub使用入门和github for windows的安装教程

    在看这篇教程之前我想大家也在搜索怎样使用gitHub托管自己的项目,在使用gitHub之前我也遇到过各种问题,在网上我也搜索了很多,但总觉得网上搜索到的东西很多很杂,有的根本不知道是在表达什么.在这过 ...

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

  7. Atitit.研发管理软件公司的软资产列表指南

    Atitit.研发管理软件公司的软资产列表指南 1. Isv模型下的软资产1 2. 实现层面implet1 3. 规范spec层1 4. 法则定律等val层的总结2 1. Isv模型下的软资产 Sof ...

  8. HashMap的工作原理

    HashMap的工作原理   HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间 ...

  9. 【教程】SQLite数据库修复

    SQLite 大家都知道,就不多说了. 有时候数据量大了,或者存储过程中出现异常,数据库就可能会出问题. 这是以前公司产品出现过的问题,导致软件都打不开了,我花了不少时间才解决的,趁现在有空贡献出来. ...

  10. python安装BeautifulSoup注意事项

    好久没有写爬虫了,最近用Python的BeautifulSoup4.Scrapy分别对以前写的spider进行优化,发现python3.5后这些库变化了很多,遇到了许多问题,在这里做一下总结. 切换环 ...