之前用Android原生写过一个录屏直播、点播的客户端，现打算将用的较多的点播功能移植到Ionic2项目里。正好熟悉下Cordova创建、调用和发布自定义插件的过程。
cordova-plugin-screenrecord
创建ScreenRecord插件
Cordova提供了cli工具plugman，官方文档
npm install -g plugman- 在ionic2项目下，
plugman create --name ScreenRecord --plugin_id com.unionpay.screenrecord --plugin_version 0.0.1 -
cd ScreenRecord，添加平台插件代码，我这里只需生成Android
plugman platform add platform_name android，
plugin项目的架构至此就搭建好了，
ScreenRecord
-src
--android
---ScreenRecord.java
---ScreenRecordService.java
-www
--ScreenRecord.js
plugin.xml
编写ScreenRecord插件
plugin.xml
cordova插件的配置文件，介绍关键的标签：
<js-module name="ScreenRecord" src="www/ScreenRecord.js">
<clobbers target="ScreenRecord"/>
</js-module>
指定js接口文件的路径
<platform name="android">
<config-file parent="/*" target="AndroidManifest.xml">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
</config-file>
<config-file parent="/*" target="res/xml/config.xml">
<feature name="ScreenRecord">
<param name="android-package" value="com.unionpay.screenrecord.ScreenRecord"/>
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"></config-file>
<source-file src="src/android/ScreenRecord.java"
target-dir="src/com/unionpay/screenrecord"/>
<source-file src="src/android/ScreenRecordService.java"
target-dir="src/com/unionpay/screenrecord"/>
</platform>
通过<config-file>标签可以将插件需要的权限注入到Ionic2安卓项目的AndroidManifest.xml中。Cordova还提供API - PermissionHelper，用于动态检测和申请权限，具体方法见http://cordova.apache.org/docs/en/latest/guide/platforms/android/plugin.html
<source-file>标签用于配置需注入的java文件和路径。
除这两种标签，plugin.xml还可以配置Android项目中可能用到的静态布局文件、依赖库等。
ScreenRecord.js
接口文件，通过cordova.exec实现与原生代码的交互。
var exec = require('cordova/exec');
var ScreenRecord = function(){
}
ScreenRecord.startRecord = function(options, filePath, success, error) {
exec(success, error, "ScreenRecord", "startRecord", [options, filePath]);
};
ScreenRecord.stopRecord = function(success, error) {
exec(success, error, "ScreenRecord", "stopRecord", []);
}
module.exports = ScreenRecord;
这里将方法对象ScreenRecord作为模块导出，方面Ionic2在ts文件中调用(在declaration.d.ts中声明全局变量ScreenRecord即可)。
cordova.exec方法需传入5个参数:
-
success, 成功回调方法 -
error， 错误回调方法 -
“service”， 对应Android的class名称 -
“action”, 对应原生代码中的方法 -
[/* arguments */]， 传给原生代码的参数数组
ScreenRecord.java
Cordova插件的Android代码要求至少有一个class继承CordovaPlugin，以及重写excute方法。
package com.unionpay.screenrecord;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.PermissionHelper;
import org.apache.cordova.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.File;
import android.Manifest;
import android.content.Intent;
import android.media.projection.MediaProjection;
import android.media.projection.MediaProjectionManager;
import android.util.Log;
import android.content.pm.PackageManager;
import com.unionpay.screenrecord.ScreenRecordService;
/**
* This class echoes a string called from JavaScript.
*/
public class ScreenRecord extends CordovaPlugin {
public final static String TAG = "ScreenRecord";
public MediaProjectionManager mProjectionManager;
public ScreenRecordService screenRecord;
public CallbackContext callbackContext;
public JSONObject options;
public String filePath;
public static final int PERMISSION_DENIED_ERROR = 20;
public static final int RECORD_AUDIO = 0;
protected final static String permission = Manifest.permission.RECORD_AUDIO;
public final static int SCREEN_RECORD_CODE = 0;
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
this.callbackContext = callbackContext;
if (action.equals("startRecord")) {
options = args.getJSONObject(0);
filePath = args.getString(1);
this.startRecord(callbackContext);
return true;
} else if (action.equals("stopRecord")) {
this.stopRecord(callbackContext);
return true;
}
return false;
}
······
省略了具体的业务代码，主要介绍重写execute方法。
结合之前的js接口代码，很快就能明白该方法的三个参数：
- action， 对应js中的action，用于匹配与js中哪个方法进行交互
- args， JSONArray格式的参数列表，例如我在startRecord方法中传入两个参数，一个json对象
options，一个String对象filePath。通过JSONArray的API祛除对应格式的值 - CallbackContext，该类提供两个方法,
callbackContext.success()对应js中的success回调，callbackContext.error()对应js中的error()回调
问题
在写录屏的原生代码时，用到了Intent和getActivity。实际编译后会报错，Cordova插件是无法直接引用这两个方法的，CordovaPlugin中声明了接口CordovaInterface对象cordova，通过该对象可以使用Intent与其他Activity交互。
mProjectionManager = (MediaProjectionManager) this.cordova.getActivity().getSystemService("media_projection");
Intent captureIntent = mProjectionManager.createScreenCaptureIntent();
cordova.startActivityForResult(this, captureIntent, SCREEN_RECORD_CODE);
ScreenRecordService
开启录屏进程的类，具体代码见git吧
Ionic2调试插件
在项目下输入命令ionic plugin add path/ScreenRecord
插件安装成功，ScreenRecord会出现在plugins目录下，项目代码也会被添加到android下。
调试过程中，若出现java代码导致的问题，可以直接修改platforms/android的代码，这样重新ionic build或ionic run可以看到修改后的效果。
若修改ScreenRecord下的代码，需要先移除插件，再安装。
ionic plugin remove com.unionpay.screenrecord，
ionic plugin add path/ScreenRecord
自定义Cordova插件的发布
- 创建
package.json
plugman createpackagejson /path/to/your/plugin
创建之前最好先将插件代码提交至git，json中需配置plugin的name，id，git repository等 - 登录npm
若已注册过npm账号，npm login然后输入用户名、密码以及邮箱
若没有，npm adduser，按照提示设置你的账号。 - 发布plugin
在插件根目录下npm publish .
如果npm之前有设置了淘宝镜像，会遇到错误no_perms Private mode enable...
通过npm config set registry https://registry.npmjs.org切换回官方地址。再执行上传命令。
总的来说，实现一个Cordova自定义插件并不难，而且cordova plugins库现有的插件已经很多，但为了具体的业务需求。自定义插件还是很有必要的。
网友评论