上周刚搞完ApiCould的自定义模块开发,这周又有一个新的需求Cordova插件开发,经过几天的奋斗,看了不少博客,总算搞出了Cordova的打印插件。在完成ApiCodld和Cordova插件后感觉这两个在插件开发步骤上差不了太多,这篇文章主要记录下自己的开发过程,方便以后使用。
一、环境
1、node.js、cordova
2、Android studio3.5.1、jdk1.8
二、开发准备
1、安装cordova,npm install -g cordova
2、创建项目:cordova create MyTestProgject
3、添加android:cordova platforms add android
项目结构如下,android工程在platforms里
三、开始开发 1、导入上面创建的cordova项目里的android工程 2、创建自己的插件类并继承CordovaPlugin,实现initialize、execute方法,execute方法就是你js里面执行的,我的插件如下
public class PrintlcPlugin extends CordovaPlugin { private final String TAG=PrintlcPlugin.class.getName (); private IPosApi mPosApi; private Context context; private CallbackContext callbackContext; @Override public void initialize(CordovaInterface cordova, CordovaWebView webView) { super.initialize (cordova, webView); Log.e (TAG, "initialize:"); context=cordova.getContext (); mPosApi=PosFactory.getPosDevice (context); } @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { this.callbackContext=callbackContext; switch (action) { case "initPrint": initPrint(callbackContext); break; case "resume": resumePrint (); break; case "pause": pausePrint (); break; case "setEncode": setEncode (args); break; case "setLanguage": setLanguage (args); break; case "printFeatureList": printFeatureList (); break; case "closePrint": closePrint (callbackContext); break; case "printText": printText (args); break; case "printQR": printQR (args); break; case "printBarcode": printBarcode (args); break; case "printCheckMark": printCheckMark (args); break; case "printFeedPaper": printFeedPaper (args); break; case "printBackPaper": printBackPaper (args); break; case "printImage": printImage (); break; case "startPrint": startPrint (); break; default: return false; } return false; } public void initPrint(CallbackContext callbackContext) { try{ Log.e (TAG, "initPrint: "); mPosApi.setPos (); mPosApi.setPrintEventListener (new OnPrintEventListener () { @Override public void onPrintState(int state) { switch (state) { case BarCode.ERR_POS_PRINT_SUCC: showToastShort ("print success"); break; case BarCode.ERR_POS_PRINT_FAILED: showToastShort ("print error"); break; case BarCode.ERR_POS_PRINT_HIGH_TEMPERATURE: showToastShort ("high temperature"); break; case BarCode.ERR_POS_PRINT_NO_PAPER: showToastShort ("no paper"); break; case 4: break; } } }); mPosApi.openDev (); callbackContext.success (0); }catch (Exception e){ callbackContext.error (1); } } public void resumePrint() { mPosApi.resume (); } public void pausePrint() { mPosApi.stop (); } public void setEncode(JSONArray args) { // Integer encode=args.optInt (0); try { Log.e (TAG, "setEncode:" + args.get (0)); } catch (JSONException e) { e.printStackTrace (); } // mPosApi.setEncode (encode); } public void setLanguage(JSONArray args) { Integer language=args.optInt (0); mPosApi.setLanguage (language); } public void printFeatureList() { mPosApi.printFeatureList (); } public void closePrint(CallbackContext callbackContext) { if (mPosApi != null) { mPosApi.closeDev (); PosFactory.Destroy (); callbackContext.success (0); }else{ callbackContext.success (1); } } public void printText(JSONArray args) { String text=args.optString (0); boolean bold=args.optBoolean (1); String align=args.optString (2); // 1 、2、3 String fontSize=args.optString (3);// 1、2、3 Integer concentration=args.optInt (4); Log.e (TAG, "text: " + text + " bold: " + bold + " align: " + align + " fontSize: " + fontSize + " concentration: " + concentration); TextData textData=new TextData (); textData.addConcentration (concentration); textData.addFont (BarCode.FONT_ASCII_12x24); textData.addTextAlign (align); textData.addCharBold (bold); textData.addFontSize (fontSize); textData.addText (text + "\n"); mPosApi.addText (textData); } public void printQR(JSONArray args) { String text=args.optString (0); Integer pix=args.optInt (1); Integer unit=args.optInt (2); Integer concentration=args.optInt (3); Log.e (TAG, "jsmethod_printQR: " + text + "" + pix + "" + unit + "" + concentration); QRBean qrBean=new QRBean (); qrBean.setConcentration (concentration); qrBean.setPix (pix); // 像素点 qrBean.setUnit (unit); // 单元大小也就是二维码的版本号,版本号越大二维码容量越大 qrBean.setLevel (49);// 这个不用改,这个是二维码的纠错级别 qrBean.setText (text); mPosApi.addQR (qrBean, ALIGN_MODE.ALIGN_CENTER); } public void printBarcode(JSONArray args) { String text=args.optString (0); Integer height=args.optInt (1); Integer width=args.optInt (2); Integer concentration=args.optInt (3); BarCodeBean barCodeBean=new BarCodeBean (); barCodeBean.setConcentration (concentration); barCodeBean.setBarType (BarCode.CODE128); barCodeBean.setHeight (height); barCodeBean.setWidth (width); barCodeBean.setText (text); mPosApi.addBarCode (barCodeBean, ALIGN_MODE.ALIGN_CENTER); } public void printCheckMark(JSONArray args) { mPosApi.addMark (); } public void printFeedPaper(JSONArray args) { boolean feedPaper=args.optBoolean (0); Integer Length=args.optInt (1); mPosApi.addFeedPaper (feedPaper, Length); } public void printBackPaper(JSONArray args) { Integer Length=args.optInt (0); mPosApi.addBackPaper (Length); } public void printImage() { } public void startPrint() { mPosApi.printStart (); } public void showToastShort(String str) { Toast.makeText (context, str, Toast.LENGTH_SHORT).show (); } }
3、编写插件js文件,这里的exec调的就是你插件类的那个execute,第一、第二参数successCallback,errorCallback返回状态有就传,没有就不传,第三个参数是你的插件类名,第四个参数是你的方法名,第五个参数是你方法需要的参数,有就传,没有就不传。
cordova.define( "cordova-plugin-printlc.PrintlcPlugin" , function(require, exports, module) { var exec = require('cordova/exec'); /** * Provides access to notifications on the device. */ module.exports = { initPrint:function(successCallback,errorCallback){ exec(successCallback, errorCallback, "PrintlcPlugin", "initPrint", []); }, printTest:function(){ exec(null, null, "PrintlcPlugin", "printTest", []); }, printText:function(text,bold,align,fontSize,concentration){ exec(null, null, "PrintlcPlugin", "printText", [text,bold,align,fontSize,concentration]); }, setEncode:function(encode){ exec(null, null, "PrintlcPlugin", "setEncode", [encode]); }, setLanguage:function(number){ exec(null, null, "PrintlcPlugin", "setLanguage", [number]); }, printFeatureList:function(){ exec(null, null, "PrintlcPlugin", "printFeatureList", []); }, printQR:function(text,pix,unit,concentration){ exec(null, null, "PrintlcPlugin", "printQR", [text,pix,unit,concentration]); }, printBarcode:function(text,height,width,concentration){ exec(null, null, "PrintlcPlugin", "printBarcode", [text,height,width,concentration]); }, printCheckMark:function(){ exec(null, null, "PrintlcPlugin", "printCheckMark", []); }, printFeedPaper:function(feedPaper,length){ exec(null, null, "PrintlcPlugin", "printFeedPaper", [feedPaper,length]); }, printBackPaper:function(length){ exec(null, null, "PrintlcPlugin", "printBackPaper", [length]); }, printImage:function(content,successCallback,errorCallback){ exec(null, null, "PrintlcPlugin", "printImage", [content]); }, startPrint:function(){ exec(null, null, "PrintlcPlugin", "startPrint", []); }, closePrint:function(successCallback,errorCallback){ exec(successCallback, errorCallback, "PrintlcPlugin", "closePrint", []); }, }; });
4、完成前面的步骤,我们就可以打插件包了 首先创建插件:plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]
调整下目录结构,得到以下,在src下新建android目录,把插件的java代码和引用jar包放在这儿,上面写的js文件放在www目录下
然后修改plugin.xml
<?xml version='1.0' encoding='utf-8'?> <plugin id="cordova-plugin-printlc" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>PrintlcPlugin</name> <js-module name="PrintlcPlugin" src="www/PrintlcPlugin.js"> <clobbers target="cordova.plugins.PrintlcPlugin" /> </js-module> <platform name="android"> <config-file parent="/*" target="res/xml/config.xml"> <feature name="PrintlcPlugin"><param name="android-package" value="org.apache.cordova.printlc.PrintlcPlugin"/></feature> </config-file> <config-file parent="/*" target="AndroidManifest.xml"></config-file> <source-file src="src/android/PrintlcPlugin.java" target-dir="src/org/apache/cordova/printlc"/> <source-file src="src/android/libs/mylibrary-release.aar" target-dir="libs"/> </platform> </plugin>
5、生成package.json这个文件包含我们插件的一些信息
cd到我们插件的根目录执行plugman create packagejson,一直yes就行。生成的json文件如下
{ "name": "printlcPlugin", "version": "1.0.0", "description": "", "cordova":{ "id":"cordova-plugin-printlc", "paltforms":[ "android" ] }, "main":"index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "moxiaomo", "license": "ISC" }
6、完成上面的步骤后我的打印插件就完成了,测试一下
首先添加插件cordova plugin add cordova-plugin-printlc,添加成功android工程会出现你的js文件和插件java文件,
libs目录下会自动导入引用的jar包,别忘了在build文件一添加引用jar的引用,另外res\xml\config.xml会添加插件
7、插件调用方式,在HTML中新建几个按钮,然后在assets文件下的js目录新建自己的js,内容如下
function initPrint() { cordova.plugins.PrintlcPlugin.initPrint(function(result){ alert("初始化成功"+result); // 0成功、1失败 },function(result){ alert("初始化失败"); }); } function printTest() { cordova.plugins.PrintlcPlugin.printText("123456789",false,1,1,35); // 文本、字符粗细、对齐方式(1、2、3)、字体大小(1、2、3)、浓度(25-39) cordova.plugins.PrintlcPlugin.printQR("123456",4,4,35); // 文本、px(QR Code pixel size n>=1 , n<=24)、Unit(QR Code Unin size 1≤n ≤16)、浓度(25-39) cordova.plugins.PrintlcPlugin.printBarcode("123456"); // 文本、height、width(1-4)、浓度(25-39) cordova.plugins.PrintlcPlugin.printCheckMark();//检测黑标 printFeedPaper(); cordova.plugins.PrintlcPlugin.startPrint(); // 开始打印 } function closePrint() { cordova.plugins.PrintlcPlugin.closePrint(function(result){ alert("关闭成功"+result);// 0成功、1失败 },function(result){ alert("关闭失败"); }); } document.getElementById("btn_init" ).addEventListener("click", initPrint); document.getElementById("btn_test" ).addEventListener("click", printTest); document.getElementById("btn_close" ).addEventListener("click", closePrint);
运行效果
注意不要直接复制我代码,我所使用的的是专业的打印pda,以上过程仅供参考。