PhoneGap/cordvoa如何添加Media插件
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插件的更多相关文章
- Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flas
转自Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flash Player Chromium谷歌的开源浏览器将不再支持Netscape浏览器插件API,Adobe ...
- Emacs添加主题插件(Win系统)
Emacs添加主题插件(Win系统) */--> /* @licstart The following is the entire license notice for the JavaScri ...
- IntelliJ IDEA 添加junit插件
一.使用idea做junit测试需要添加junit插件 1.安装插件 File-->settings-->Plguins-->Browse repositories-->输入J ...
- atitit.MyEclipse10 中添加svn插件故障排除
atitit.MyEclipse10 中添加svn插件故障排除 删除\configuration \org.eclipse.update 不行... 二. 在configuration下的config ...
- JFinal 添加Druid插件
第一步:添加依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</a ...
- CORDOVA :添加cordova-plugin-file-opener2插件cordova打包报错
原文:CORDOVA :添加cordova-plugin-file-opener2插件cordova打包报错 最近在接触android项目,其中涉及到APP自动更新的问题,当新APP下载成功后需要打开 ...
- Android Studio 添加 Genymotion插件
原文:Android Studio 添加 Genymotion插件 1.下载Genymotion:官网地址,必须先注册才能下载,下载带有VirtualBox的版本 2.安装:安装时会连VirtualB ...
- Eclipse添加spring-tool-suite插件
Eclipse添加spring-tool-suite插件 步骤 1.help --> Eclipse Marketplace,在search框中搜索spring-tool-suite,点击右下角 ...
- Win7下安装VS2017、安装Qt5.10.1以及在VS2017添加qt插件
一.安装VS2017 1.下载VS2017 进入vs下载官网https://www.visualstudio.com/zh-hans/downloads/,选择所需要的vs版本,进行在线安装. 2.安 ...
随机推荐
- 【.net 深呼吸】细说CodeDom(8):分支与循环
有人会问,为啥 CodeDom 不会生成 switch 语句,为啥没生成 while 语句之类.要注意,CodeDom只关心代码逻辑,而不是语法,语法是给写代码的人用的.如果用.net的“反编译”工具 ...
- 前端框架 EasyUI (1)熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...
- .NET 基础 一步步 一幕幕[面向对象之构造函数、析构函数]
构造函数.析构函数 构造函数: 语法: //无参的构造函数 [访问修饰符] 函数名() :函数名必须与类名相同. //有参的构造函数 [访问修饰符] 函数名(参数列表):函数名必须与类名相同. 作用: ...
- 【原】实时渲染中常用的几种Rendering Path
[原]实时渲染中常用的几种Rendering Path 本文转载请注明出处 —— polobymulberry-博客园 本文为我的图形学大作业的论文部分,介绍了一些Rendering Path,比较简 ...
- 在 SAE 上部署 ThinkPHP 5.0 RC4
缘起 SAE 和其他的平台有些不同,不能在服务器上运行 Composer 来安装各种包,必须把源码都提交上去.一般的做法,可能是直接把源码的所有文件复制到目录中,添加到版本库.不过,这样就失去了与上游 ...
- 问题记录:EntityFramework 一对一关系映射
EntityFramework 一对一关系映射有很多种,比如主键作为关联,配置比较简单,示例代码: public class Teacher { public int Id { get; set; } ...
- 【需求设计1】VIP积分系统无聊YY
RT,想到什么就写什么呗,这是最简单的方式,顺便给自己做一个记录,反正自己记忆力也不太好.本文是仿陆金所的积分系统,自己YY的一套东西. 首先我想做一个VIP兑换投资卷的功能: 我们先来确定一些我知道 ...
- 微信网页开发之获取用户unionID的两种方法--基于微信的多点登录用户识别
假设网站A有以下功能需求:1,pc端微信扫码登录:2,微信浏览器中的静默登录功能需求,这两种需求就需要用到用户的unionID,这样才能在多个登录点(终端)识别用户.那么这两种需求下用户的unionI ...
- 代码的坏味道(21)——中间人(Middle Man)
坏味道--中间人(Middle Man) 特征 如果一个类的作用仅仅是指向另一个类的委托,为什么要存在呢? 问题原因 对象的基本特征之一就是封装:对外部世界隐藏其内部细节.封装往往伴随委托.但是人们可 ...
- Jqprint实现页面打印
好些项目需要实现页面打印,特别是一些后台管理类系统,下面介绍一款轻量级的打印插件: 1.实现页面打印要引入jQuery和Jqprint.点击下载Jqprint插件 <script languag ...