Phonegap/cordvoa How to add media plugins

PhoneGap upgrade from 2.7 to 3.7, just introduce a cordova.js, it's ready. Now because the plug-ins used, all need to use the form of modules to load on demand, nature is not as comfortable as before.

For example, if you want to add an audio processing plug-in to the Android platform, add the Media.js file manually, in addition to introducing cordova.js. There are two ways, one is to use the official recommended way

The Nodejs command line is added, and the other is to paste the media.js in the form of a module directly into Cordova.js.

The first way to install Nodejs first, the online tutorials are based on nodejs+eclipse to explain. Environment alone, I took the long time, and eclipse-sdk to Fq to download, according to the online tutorial, it seems to be a bit of java. Anyway, I didn't make it, but my Android colleague helped me test it and generated a bunch of files. It's good to know this way, I'll focus on the second way.

After a series of commands, Nodejs generated an important file for us, that is, in assets, the Cordova_plugins.js file is generated. The contents of this file are formatted as follows:

function= [    {        "file": "Plugins/org.apache.cordova.media/www/mediaerror.js",         "id": "org.apache.cordova.media.MediaError",        "clobbers": [            "window. Mediaerror "        ]    }
}

In fact, in the Init method, Cordova.js automatically checks the plug-in list (cordova/plugin_list), and if a plug-in module is defined inside, the Cordova is loaded according to the path specified by file. This is the secret of the entire plug-in mechanism. This on-demand loading is really good, but the configuration process is really annoying. Although the code is streamlined, the requirements for the technology developers are higher, since less you will have to nodejs some basic knowledge, or you can not even the environment, let alone use the command line operation, frankly, this way I do not accept. Is there any other way that's easier than that? After my research, I found that there are still some. So, the second way is a grand appearance.

Yell, Roar! , calm down the mood, go on ...

First, let's take a look at the previous 2.x version of Cordova.js (called PhoneGap), which integrates the plug-in and Cordova core code together. So I imitate it in the way I want to stick in the plug-in, it is OK? A thought can and nodejs that tedious operation said goodbye to a little excited!

In careful comparison, all modules are defined in the form of Cordova.define (' cordova/module name ', function (require, exports, module) {}. Well, I just have to wrap up the contents of the media.js so that it can be integrated in. This way, even on-demand loading is saved.

function (Require, exports, module) {    //.... The code here sticks in from the Media.js }

But the light is not enough, error, said to find Plugin_list module. This simple, directly to do an empty module into the placeholder on the hair good.

function (Require, exports, module) {    = []}

Clear the cache, recompile with Eclipse, and look forward to hearing wonderful music from the Android phone. But I heard nothing, carefully find the reason, found that only define is not possible, but also to call the line.

If it is to use the plugin list to automatically load, it will automatically register the list of plugins, but I am so opportunistic way, obviously Cordova is impossible to find. It is not difficult for me to trigger the action myself.

It has done it himself: Window.cordova = require (' Cordova '); so I wrote one: window. Media = require (Cordova/plugins/media '); Sure enough, there's a sound. Filled with joy for a long time, until the test department sent me an e-mail, saying that the sound of sowing on the chaos. It's a lot of trouble, I really don't know what went wrong. Had to go back to Eclipse's engineering model and carefully monitor the logs. Found there are some green hints (Console.log output: Org.apache.cordova.media.Media not found), at that time did not arouse my vigilance, I always thought it was the Java side of the problem, until the Java side confirmed that there is no problem, I have to check the JS problem. Okay, I'm not Shing. The problem comes out of the definition of the plugin name.

It would be nice to change to the following way:

function (Require, exports, module) {    //.... The code here sticks in from the Media.js }

At this point, there is no hint of the message coming out of Eclipse, and after the playback, there is a callback function. Perfect.

And then I added another org.apache.cordova.dialogs. For Android, the dialog box is available, and Org.apache.cordova.console-via-logger is used for iOS output logs. One thing to note, however, is that the plug-in name defined with "Org.apache.cordova.xxx" is used to call the global require ("org.apache.cordova.xxx"), which automatically registers the plug-in name and, if it is a private module used inside the module, or a dependent module, it is written in the same way as Cordova.define (' cordova/xxxx ', function (require, exports, module) {}).

For example Org.apache.cordova.console-via-logger This plugin, there is a dependent module logger, then the form is defined as a path, such as:

function (Require, exports, module) {});

/* *********************** Log Plugin ********************* */     define (function(require, exports, module) {      //------------------ ------------------------------------------------------------      // internal modules, defined in path mode, Then using the path method to introduce      var logger = require ("Cordova/plugin/logger");

Then the question comes again, you will ask, where is this plugin name learned? Open the plugin file downloaded from git, find readme.md, there is a # Org.apache.cordova.media, I see from here. In the description of each plug-in file.

Phonegap/cordvoa How to add media plugins