自定义Cordova插件详解
小编:管理员 527阅读 2022.09.13
在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识。
那Cordova插件的基础要点是什么呢?其实就是把原生代码调用方法映射为js的统一接口,供H5使用而已.
Cordova 自定义插件的官方文档
二、观察现有应用结构打开任意一个基于Cordova技术的hybird app的开发目录,添加过平台(android、ios等)和安装过插件的话,你会发现结构大致是这样子的:
├── platforms | ├── android | ├── ios | └── ... ├── plugins | ├── org.apache.cordova.device | └── ... ├── config.xml └── www复制
这里的 platforms 是我们应用支持的平台目录,plugins是我们安装的插件目录,config.xml 是应用的配置信息(应用名称、描述等),www 是我们的 web 工程目录。
三、使用plugman开发Cordova插件也就是说,如果我们创建一个新的插件并安装,也会添加到plugins目录中,同时修改其它文件信息。那下一步就来开始进行验证。
一个独立插件的目录基本结构是这样的:
MyToast ├── src | ├── android | | └── MyToast.java | ├── ios | └── ... ├── www | └── MyToast.js └── plugin.xml复制
src存放的是各平台的原生代码,plugin.xml为插件描述及配置文件,www是web工程目录(其实主要就是MyToast.js这个js中间件),我们可以手动创建这几个目录及文件,然而这并不是一个好的方式,因为效率不高,推荐的方式是使用plumam。 1、首先安装plumam命令行工具
npm install -g plugman
2、安装完之后,创建plugin
使用plumam创建插件的命令是:
plugman create --name pluginName--plugin_id pluginID--plugin_version version[--path path] [--variable NAME=VALUE]
参数说明:
pluginName:插件名称,如MyToast; pluginID:插件id, 如:org.demo.mytoast; version:版本号, 如:0.0.1; path:插件存放的绝对或相对路径; variable NAME=VALUE:扩展参数,如说明或作者,如woodstream
于是命令行中敲入以下代码:plugman create --name MyToast --plugin_id org.demo.mytoast --plugin_version 0.0.1这样将会在当前目录创建一个MyToast插件,进入插件目录,打开plugin.xml查看,注意以下内容及说明:
plugin - id:插件唯一标识 - version:版本号 - js-module src:js中间件相对文件地址(www目录下的那个js) name:模块名称 clobbers/merges target:H5通过它调用js中间件方法(ts调用方法的前缀) - platform name:对应平台android | ios source-file src:类名 tartget-dir:插件文件复制到到原生项目位置 feature name:js中间件通过它调用原生方法(包名) uses-permission:相关原生权限复制
也就是说,我们可以写这样一个插件,不写一句原生代码,只是为了设置权限和拷贝文件。
等你消化完plugin.xml文件后,敲入命令进入插件目录:cd MyToast添加支持平台plugman platform add --platform_name androidplugman platform add --platform_name ios这样,就会分别创建src/android/MyToast.java和src/ios/MyToast.m两个文件,这里只演示android的代码,所以打开MyToast.java观察:
public class MyToast extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("coolMethod")) { String message = args.getString(0); this.coolMethod(message, callbackContext); return true; } return false; } private void coolMethod(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } } }复制
其中execute是必须的方法,是和www目录中的MyToast.js关联打交道用的,至于MyToast.js和MyToast.java怎么关联,是由Cordova解释plugin.xml处理的,内部细节不需要知道,只需按方法格式编写即可。CallbackContext为回调上下文,coolMethod为可选的默认生成的示例方法,一般里面就写原生的代码,我们把它改成我们想要的:showToast,然后补充基本的一些原生代码,最后文件变成这样:
public class MyToast extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("showToast")) { String message = args.getString(0); this.showToast(message, callbackContext); return true; } return false; } private void showToast(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { Activity activity = this.cordova.getActivity(); android.widget.Toast.makeText(activity, message, Toast.LENGTH_SHORT).show(); callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } } }复制
然后再打开www/MyToast.js修改如下:
//showToast为安装后js调用的方法名,参数可以为任意多个 exports.showToast = function(msg, success, error) { //"showToast"为给MyToast.java判断的action名 exec(success, error, "MyToast", "showToast", [msg]); };复制
3、创建package.json文件 本来执行完上述步骤,一个插件就完成了的,但后来的Cordova版本要求添加一个package.json来管理插件,而plumam没有给我们创建这样一个文件,于是我们手动创建,借助npm init命令创建package.json。里面的参数从plugin.xml拿过来便是:
{ "name": "MyToast", "version": "0.0.1", "description": "demo", "cordova": { "id": "com.demo.mytoast", "platforms": [ "android" ] }, "keywords": [], "author": "demo", "license": "MIT" }复制
这样一个插件就开发完成了。
四、安装已开发完成的插件如果没有现成的项目,可以创建一个新的cordova项目来测试:cordova create hello com.example.hello HelloWorld然后像平常添加插件一样,运行如下命令:(add 后面为插件所在本地或网络路径):cordova plugin add /Users/cordova/MyToast如果已有项目且是ionic项目,则命令前追加上ionic:ionic cordova plugin add /Users/cordova/MyToast
在ionic2或以上使用时,打开任意一个ts文件,在头部声明如下:declare let cordova: any;然后调用即可:cordova.plugins.MyToast.showToast("hello"); //后两个success, error参数省略不写
五、其他命令删除插件:ionic cordova plugin remove XXXXX(你的plugin_id)查看已安装插件ionic cordova plugin list
相关推荐
- Cordova 什么是Cordova? Cordova是用于使用HTML,CSS和JS构建移动应用的平台。我们可以认为Cordova是一个容器,用于将我们的网络应用程序与本机移动功能连接。默认情况下,Web应用程序不能使用本机移动功能。这就是Cordova进来的地方。它为网络应用和移动设备之间的连…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…