之前用Android原生寫過一個(gè)錄屏直播、點(diǎn)播的客戶端，現(xiàn)打算將用的較多的點(diǎn)播功能移植到Ionic2項(xiàng)目里。正好熟悉下Cordova創(chuàng)建、調(diào)用和發(fā)布自定義插件的過程。
cordova-plugin-screenrecord
創(chuàng)建ScreenRecord插件
Cordova提供了cli工具plugman，官方文檔
npm install -g plugman- 在ionic2項(xiàng)目下，
plugman create --name ScreenRecord --plugin_id com.unionpay.screenrecord --plugin_version 0.0.1 -
cd ScreenRecord，添加平臺(tái)插件代碼，我這里只需生成Android
plugman platform add platform_name android，
plugin項(xiàng)目的架構(gòu)至此就搭建好了，
ScreenRecord
-src
--android
---ScreenRecord.java
---ScreenRecordService.java
-www
--ScreenRecord.js
plugin.xml
編寫ScreenRecord插件
plugin.xml
cordova插件的配置文件，介紹關(guān)鍵的標(biāo)簽：
<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>標(biāo)簽可以將插件需要的權(quán)限注入到Ionic2安卓項(xiàng)目的AndroidManifest.xml中。Cordova還提供API - PermissionHelper，用于動(dòng)態(tài)檢測(cè)和申請(qǐng)權(quán)限，具體方法見http://cordova.apache.org/docs/en/latest/guide/platforms/android/plugin.html
<source-file>標(biāo)簽用于配置需注入的java文件和路徑。
除這兩種標(biāo)簽，plugin.xml還可以配置Android項(xiàng)目中可能用到的靜態(tài)布局文件、依賴庫(kù)等。
ScreenRecord.js
接口文件，通過cordova.exec實(shí)現(xiàn)與原生代碼的交互。
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;
這里將方法對(duì)象ScreenRecord作為模塊導(dǎo)出，方面Ionic2在ts文件中調(diào)用(在declaration.d.ts中聲明全局變量ScreenRecord即可)。
cordova.exec方法需傳入5個(gè)參數(shù):
-
success, 成功回調(diào)方法 -
error， 錯(cuò)誤回調(diào)方法 -
“service”， 對(duì)應(yīng)Android的class名稱 -
“action”, 對(duì)應(yīng)原生代碼中的方法 -
[/* arguments */]， 傳給原生代碼的參數(shù)數(shù)組
ScreenRecord.java
Cordova插件的Android代碼要求至少有一個(gè)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;
}
······
省略了具體的業(yè)務(wù)代碼，主要介紹重寫execute方法。
結(jié)合之前的js接口代碼，很快就能明白該方法的三個(gè)參數(shù)：
- action， 對(duì)應(yīng)js中的action，用于匹配與js中哪個(gè)方法進(jìn)行交互
- args， JSONArray格式的參數(shù)列表，例如我在startRecord方法中傳入兩個(gè)參數(shù)，一個(gè)json對(duì)象
options，一個(gè)String對(duì)象filePath。通過JSONArray的API祛除對(duì)應(yīng)格式的值 - CallbackContext，該類提供兩個(gè)方法,
callbackContext.success()對(duì)應(yīng)js中的success回調(diào)，callbackContext.error()對(duì)應(yīng)js中的error()回調(diào)
問題
在寫錄屏的原生代碼時(shí)，用到了Intent和getActivity。實(shí)際編譯后會(huì)報(bào)錯(cuò)，Cordova插件是無(wú)法直接引用這兩個(gè)方法的，CordovaPlugin中聲明了接口CordovaInterface對(duì)象cordova，通過該對(duì)象可以使用Intent與其他Activity交互。
mProjectionManager = (MediaProjectionManager) this.cordova.getActivity().getSystemService("media_projection");
Intent captureIntent = mProjectionManager.createScreenCaptureIntent();
cordova.startActivityForResult(this, captureIntent, SCREEN_RECORD_CODE);
ScreenRecordService
開啟錄屏進(jìn)程的類，具體代碼見git吧
Ionic2調(diào)試插件
在項(xiàng)目下輸入命令ionic plugin add path/ScreenRecord
插件安裝成功，ScreenRecord會(huì)出現(xiàn)在plugins目錄下，項(xiàng)目代碼也會(huì)被添加到android下。
調(diào)試過程中，若出現(xiàn)java代碼導(dǎo)致的問題，可以直接修改platforms/android的代碼，這樣重新ionic build或ionic run可以看到修改后的效果。
若修改ScreenRecord下的代碼，需要先移除插件，再安裝。
ionic plugin remove com.unionpay.screenrecord，
ionic plugin add path/ScreenRecord
自定義Cordova插件的發(fā)布
- 創(chuàng)建
package.json
plugman createpackagejson /path/to/your/plugin
創(chuàng)建之前最好先將插件代碼提交至git，json中需配置plugin的name，id，git repository等 - 登錄npm
若已注冊(cè)過npm賬號(hào)，npm login然后輸入用戶名、密碼以及郵箱
若沒有，npm adduser，按照提示設(shè)置你的賬號(hào)。 - 發(fā)布plugin
在插件根目錄下npm publish .
如果npm之前有設(shè)置了淘寶鏡像，會(huì)遇到錯(cuò)誤no_perms Private mode enable...
通過npm config set registry https://registry.npmjs.org切換回官方地址。再執(zhí)行上傳命令。
總的來(lái)說，實(shí)現(xiàn)一個(gè)Cordova自定義插件并不難，而且cordova plugins庫(kù)現(xiàn)有的插件已經(jīng)很多，但為了具體的業(yè)務(wù)需求。自定義插件還是很有必要的。
