Cordova custom android plugin, cordova plugin development Android articles (primary entry)

[mode] is the args of the execute method, that is, the parameters.

It is important to note that java is case sensitive.

voice.js

cordova.define("com.justep.cordova.plugin.voiceManager", function(require, exports, module) { var cordova = require('cordova'), exec = require('cordova/exec');

module.exports = {

Mode: {

NORMAL: 0, // normal playback mode

CALL: 1, // handset mode

},

setPlayMode:function(mode,onSuccess,onError){

exec(onSuccess, onError, "voiceManager", "setPlayMode", [mode]);

}

};

});

Add configuration in cordova_plugins.js

module.exports = []内:

{

"file": "plugins/com.justep.cordova.plugin.voiceManager/www/voice.js",

"id": "com.justep.cordova.plugin.voiceManager",

"pluginId": "com.justep.cordova.plugin.voiceManager",

"clobbers": [

"navigator.voiceManager"

]

}

注意如果添加到末尾,要把上一个”,”删除掉。}后面不要有”,”

module.exports.metadata ={}内:

"com.justep.cordova.plugin.voiceManager": "1.0.0"

注意最后一条不能有","而之前的条目,必须在每一行结尾写","

在config.xml增加配置(preference标签内)

VoiceManager.java、voice.js、config.xml位置如图,cordova_plugins.js在 assets\www下。

33615b464c61ae97dab689b586df13ea.png

添加了这些文件后,插件的代码就完成了,但是现在无法完成测试,因为index.js还没有添加对“voiceManager”插件的引用。现在修改一下index.js文件

增加了:

require(“cordova!com.justep.cordova.plugin.voiceManager”);   —>引用cordova插件voiceManager

var voiceManager= navigator.voiceManager;

voiceManager.setPlayMode(navigator.voiceManager.Mode.CALL,success,fail);  —>点击call按钮,调用setPlayMode,并传参navigator.voiceManager.Mode.CALL,将播放模式改为听筒模式

voiceManager.setPlayMode(navigator.voiceManager.Mode.NORMAL,success,fail);—>点击normal按钮,调用setPlayMode,并传参navigator.voiceManager.Mode.NORMAL,将播放模式改为外放模式

define(function(require){

var $ = require("jquery");

var justep = require("$UI/system/lib/justep");

require("cordova!com.justep.cordova.plugin.voiceManager");

var voiceManager= navigator.voiceManager;

var Model = function(){

this.callParent();

};

function success(){

alert("成功");

}

function fail(){

alert("失败");

}

Model.prototype.callBtnClick = function(event){

voiceManager.setPlayMode(navigator.voiceManager.Mode.CALL,success,fail);

};

Model.prototype.normalBtnClick = function(event){

voiceManager.setPlayMode(navigator.voiceManager.Mode.NORMAL,success,fail);

};

return Model;

});

启动WeX5的tomcat服务器

374c2dbd2a1674c444d8808f569a5add.png

在Android studio运行App

c17b5401d7b5f6ed318f7d5c415956ed.png

运行后可以在手机上顺序看到WeX5的欢迎页面和index.w页面

23c773109cfa11c0b2c4700c17dcff72.png2026096515285ff0f8a4f81c0adda151.png

初次播放音频,音乐外放播放,点击call,音频从听筒播放,点击normal,音频外放播放。成功响应,页面会弹出alert。

9b2559ce7983776f9ce18f3cf0c019e9.png

至此,开发工作基本完成了,但事实上我们还没有做出一个标准的cordova插件。我们只是做了一个“本地App”,还需要把我们开发的东西剥离出来形成标准的cordova插件。

在此之前,我们再回顾一下开发流程和调用流程。

开发流程:写页面->以页面为基础生成“本地App”->将“本地App”platform下的android导入到Android Studio->写java文件,js文件,在config.xml和cordova_plugins.js写配置->补全

页面js调用->启动tomcat,启动应用测试

调用流程:

1、 index.js引用插件require(“cordova!com.justep.cordova.plugin.voiceManager”),调用插件方法voicemanager.setPlayMode(navigator.voiceManager.Mode.CALL,success,fail)。调用插件

实际的写法是navigator.voiceManager.setPlayMode,不要漏看var voiceManager= navigator.voiceManager;

navigator.voiceManager是在cordova_plugins.js配置的插件的clobbers属性,require调用的是pluginId属性。

2、voice.js接收index.js的请求,voice.js的头要声明cordova.define(“com.justep.cordova.plugin.voiceManager” ……

com.justep.cordova.plugin.voiceManager是cordova_plugins.js配置的插件id属性。

index.js调用的setPlayMode就是voice.js的名字为setPlayMode的function。

voice.js通过exec(onSuccess, onError, “voiceManager”, “setPlayMode”, [mode]) 能调用VoiceManager,因为VoiceManager在config.xml配置了VoiceManager的位置和代号,代号就是voiceManager。

cordova_plugins.js配置voice.js,config.xml配置VoiceManager.java,以及全流程的调用关系必须记清楚,否则开发遇到问题会多花费几倍的时间。

2.4 整合代码为标准的cordova插件

开发完插件后,了解到写一个cordova插件有四个关键的文件,java文件,js文件,config.xml和voice.js,config.xml。整合代码为标准cordova插件也是操作这几个文件。

下图为cordova插件的目录结构,VoiceManager和voice.js都是之前写好的文件,建好这样的结构放到对应位置即可。

cfc9a568bdd35ca946ef44599d1117bd.png

需要注意的是:

voice.js的头并没有之前cordova.define(“com.justep.cordova.plugin.voiceManager”

完整的文件是这样的:

var cordova = require('cordova'), exec = require('cordova/exec');

module.exports = {

Mode: {

NORMAL: 0, // 正常外放模式

CALL: 1, // 听筒模式

},

setPlayMode:function(mode,onSuccess,onError){

exec(onSuccess, onError, "voiceManager", "setPlayMode", [mode]);

}

};

plugin-ex.xml和plugin.js.xdoc是WeX5特有的文件,作用是写插件的名字,描述和类描述、方法描述。直接贴出写法,不难理解。

plugin-ex.xml

音频控制插件

通过参数调节手机播放音频

plugin.js.xdoc

/**

@name com.justep.cordova.plugin.voiceManager

@class

@model Native

@category EventClass

@description 选择设备音频的播放模式,可选听筒模式和外放模式

@declareVar navigator.voiceManager

*/

/**

@name com.justep.cordova.plugin.voiceManager.setPlayMode

@function

@param {Str} mode 参数

@param {Function} onSuccess 执行成功回调函数

@param {Function} onError 执行失败回调函数

@returns {void}

@description 当设置mode(字符串)为“CALL”时,则为听筒模式,如果为“NORMAL”时,则为外放模式

*/

plugin.xml是cordova的配置文件,贴出源码并解释重要配置的含义,需要注意的是,本次工程非常简单,并没有用到资源文件(图片、布局文件、Activity等),如果需要那些资源,也要在plug.xml里配置。plugin.xml的意义就是把插件所需要的资源按着规定的格式写好,工程调用插件的时候会按着这些配置到指定位置寻找资源并整合到工程对应的位置里。

xmlns:android="http://schemas.android.com/apk/res/android"

id="com.justep.cordova.plugin.voiceManager"

version="1.0.0">

voiceMode

Switch audio playback mode

target-dir="src/com/justep/cordova/plugin/voicemanager" />

需要注意的是,开发多个平台的时候,暴露给js调用的命名要统一,才能保证一次开发,多平台调用。

在WeX5的Native–>plugins创建好插件目录,并拷入对应的文件,写好配置文件,就可以用平台生成“本地App”了。生成“本地App”的方法在前面已经详细描述过。参考

贴了很多图,写了很多文字介绍了一个很简单的cordova插件开发方法,就是希望没有做过cordova插件的同学能在看完这篇文章后对cordova插件开发有比较清晰的理解,也能更快速有效的使用WeX5进行cordova开发。

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325692240&siteId=291194637