首页 > 代码库 > webapp应用---cordova.js 3.7.0插件安装总结
webapp应用---cordova.js 3.7.0插件安装总结
今天是2014年的最后一天,年终总结什么的就不写了。记录一下今天的工作内容。如果不知道phoneGap,那么就不需要往下看了,phoneGap现在已经叫cordova了,叫什么不重要,重要的是它对web移动应用的开发很重要,如果你正在查找关于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插件安装总结