开发Cordova插件

一、搭建环境

请参考​​《Cordova创建项目、编译、安装》​​

二、创建项目:

创建命令：cordova create [文件名] [包名]

~/Desktop/Cordova$ cordova create MyCordovaCamera com.cs.cameraCreating a new cordova project.~/Desktop/Cordova$ lsMyCordovaCamera

三、在Cordova项目中添加Android平台

1、进入刚刚创建的Cordova项目

~/Desktop/Cordova$ cd MyCordovaCamera

2、在Cordova项目中添加Android平台

~/Desktop/Cordova/MyCordovaCamera$ cordova platform add android

以上是创建Cordova项目，用来测试我们开发的cordova插件用的。下面开始进行插件开发的步骤介绍。

四、安装plugman插件

~$ sudo npm install -g plugman

五、创建一个插件

创建命令：

plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]

我们插件创建在cordova项目的上一级目录：

~/Desktop/Cordova/MyCordovaCamera$ cd ..~/Desktop/Cordova$ plugman create --name CSCamera --plugin_id com.cs.camera --plugin_version 1.0.0~/Desktop/Cordova$ lsCSCamera MyCordovaCamera

下面是创建好的插件目录：

创建完插件后，目录如上图所示，其src目录是空的。version='1.0' encoding='utf-8'?>CSCamera

六、编写生成的插件中的安卓代码

1、打开插件目录CSCamera中的src目录，发现目录是空的，这里需要手动添加android目录。 2、然后在android目录里创建一个java文件，创建一个类继承CordovaPlugin。

上面两步可以通过以下命令来自动完成，推荐这样做，命令要在插件目录下执行：

plugman platform add --platform_name [platform] // platform 只能写ios或者android

~/Desktop/Cordova/CSCamera$ plugman platform add --platform_name android

生成的Java文件CSCamera.java如下：

package com.cs.camera;import org.apache.cordova.CordovaPlugin;import org.apache.cordova.CallbackContext;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;/** * 这个类回显一个从javascript调用的字符串。 */public class CSCamera 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."); } }}

插件的安卓代码已经完成了。 给插件添加完平台配置后，plugin.xml配置文件也随之增加了平台的配置信息：

七、配置plugin.xml

在android目录下创建xml目录：

~/Desktop/Cordova/CSCamera/src/android$ mkdir xml

创建camera_provider_paths.xml文件

~/Desktop/Cordova/CSCamera/src/android/xml$ touch camera_provider_paths.xml

文件内容为：

这是为了解决在高版本的android系统中，不能再直接通过file://的方式来获取文件的问题。

八、编写CSCamera.js文件

这个js文件，在我们创建了插件后会自动生成：

var exec = require('cordova/exec');exports.toast = function (arg0, success, error) { exec(success, error, 'CSCamera', 'coolMethod', [arg0]);};

注意：

CSCamera：是plugin.xml中配置的feature的namecoolMethod是对应名为CSCamera的java类中的方法，这也是为什么要求feature的name的值要和java类名一致的原因。toast：是在外部使用时调用的方法，对使用者是可见的。

九、修改CSCamera.java类

改动其实不是很多，就是加了Toast.makeText(cordova.getActivity(),“Hello world”,Toast.LENGTH_LONG).show()。如果我们成功调用了插件，那么就会打印这句话。

public class CSCamera extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("coolMethod")) {// 对应toastPlugin.js中exec方法的第4个参数 String message = args.getString(0); Toast.makeText(cordova.getActivity(),"Hello world",Toast.LENGTH_LONG).show(); 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."); } }}

十、配置package.json

在package.json配置该插件信息，没有这个文件，我们添加插件时会出现错误！进入插件目录，执行 npm init：

~/Desktop/Cordova/CSCamera$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install --save` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.name: (CSCamera) CSCameraSorry, name can no longer contain capital letters.name: (CSCamera) cscameraversion: (1.0.0) description: This is a camera plugin which will be provided the ability of take picture for H5 App.entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /home/kyun/Desktop/Cordova/CSCamera/package.json:{ "name": "cscamera", "version": "1.0.0", "description": "This is a camera plugin which will be provided the ability of take picture for H5 App.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}Is this ok? (yes)

初始化完成后，就会在插件的根目录下，生产一份package.json文件。

十一、安装插件到cordova项目

cordova plugin add [插件路径] cordova plugin remove [插件的包名]

以上两个命令都要在cordova项目的根目录执行。添加插件就是把我们做好的插件，添加到Android项目的assets目录中，因此

每次修改了插件内容的话都需要移除并重新添加。

安装插件：

~/Desktop/Cordova/CSCamera$ pwd/home/kyun/Desktop/Cordova/CSCamera~/Desktop/Cordova/CSCamera$ cd ..~/Desktop/Cordova$ lsCSCamera MyCordova MyCordovaCamera sample~/Desktop/Cordova$ cd MyCordovaCamera~/Desktop/Cordova/MyCordovaCamera$ cordova plugin add /home/kyun/Desktop/Cordova/CSCameraInstalling "com.cs.camera" for androidAdding com.cs.camera to package.json

添加后，就会在MyCordovaCamera项目的插件目录里有这个插件：

添加插件出现的错误，请参考​​《cordova项目添加插件出错CordovaError: Could not determine package name from output》​​ 移除插件也很方便：

~/Desktop/Cordova/MyCordovaCamera$ cordova plugin remove com.cs.camera

当你反复进行上面两个操作时，可能会报错，小技巧：再保存一下plugin.xml文件，再来进行添加插件操作。

十二、调用插件

打开cordova项目，找到index.html是这个h5 App的入口，我们可以在里面测试我们的插件是否被调用：

注意：尽量避免直接在HTML标签上注册事件，因为那可能会失败。在一些浏览器如chrome上，它会认为这是一种不安全的操作，于是乎，事件就会被屏蔽掉。推荐的做法是在js代码里注册事件。所以我们把上面“测试插件”按钮的事件放在js/index.js文件里注册：

document.getElementById('test_plugin').onclick = function(){ cordova.plugins.CSCamera.toast("成功了",function(success){ alert(success); },function(err){ alert(err); });};

编译cordova项目，然后安装测试。致此，自定义开发插件的基本过程就是这样大家可以试着做一下。 最快的安装测试方式：（1）用USB数据线连接手机和手提电脑；（2）把手机的调试模式打开；（3）在Cordova项目的根目录下，运行命令：

~/Desktop/Cordova/MyCordovaCamera$ cordova run android

这样Cordova项目在编译完成后，会直接在手机上运行起来。注意不要打开其他模拟器和连接多台手机，否则你就要特别使用–target参数来指定运行在哪台设备上了。 查看连接到电脑上的设备：

~$ adb devicesList of devices attached6cd18d00 device

指定运行设备：

~/Desktop/Cordova/MyCordovaCamera$ cordova run android --target 6cd18d00

不过，当只连了一台设备时，就会默认为这一台，不需要特别指定。

谢谢阅读。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。