ionic2自定义cordova插件开发以及使用(Android)
如何写一个cordova 用于ionic2项目中呢,在搜索了一番之后,千篇一律,我都怀疑那些文章是不是全部都是复制来复制去的,而且都不是很详细。我自己也捣鼓了一下午,踩了很多坑。所以特此写这下这篇,记录一下。
假设需求是 写一个日志插件,可以将日志写在手机的sdcard中。
1.安装plugman
npm install -g plugman
2.creat一个插件框架
plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版本号
例如:
回车然后将生成这样一个结构的项目
3.添加安卓平台支持
plugman platform add --platform_name android
我们可以看到src 下多了一个android文件夹 以及下面多了一个java文件。
4.实现日志功能
在src/android 我添加了一个logutil.java文件。
里面的内容如下:
package cordova.plugin.hea.log; import android.os.environment; import java.io.bufferedwriter; import java.io.file; import java.io.filewriter; import java.io.ioexception; import java.text.simpledateformat; import java.util.calendar; import java.util.date; public class logutil{ private static int sdcard_log_file_save_days = 180; // sd卡中日志文件的最多保存天数 private static string log_path_sdcard_dir = environment.getexternalstoragedirectory().tostring()+"/vp2/log/"; // 日志文件在sdcard中的路径 // 日志的输出格式 private static simpledateformat logsdf = new simpledateformat("yyyy-mm-dd hh:mm:ss"); private static simpledateformat logday = new simpledateformat("dd"); private static simpledateformat logtime = new simpledateformat("yyyy-mm"); /** * 打开日志文件并写入日志 * * @return * **/ public static void writelogtofile(string mylogtype, string tag, string text) { delfile(); date nowtime = new date(); string needwritemessage = logsdf.format(nowtime) + " " + tag + "\n" + text+"\n"; string logfilename; string logfolder=logtime.format(new date()); if(mylogtype=="error"){ logfilename="error("+logday.format(new date())+").log"; }else if(mylogtype=="crash"){ logfilename="crash("+logday.format(new date())+").log"; }else { logfilename="info("+logday.format(new date())+").log"; } file file = new file(log_path_sdcard_dir+logfolder); if (!file.exists()) { file.mkdirs(); } file f = new file(log_path_sdcard_dir+logfolder,logfilename); try { filewriter filerwriter = new filewriter(f, true); bufferedwriter bufwriter = new bufferedwriter(filerwriter); bufwriter.write(needwritemessage); bufwriter.newline(); bufwriter.close(); filerwriter.close(); } catch (ioexception e) { e.printstacktrace(); } } /** * 删除制定的日志文件 * */ private static void delfile(){ string needdelfiel = logtime.format(getdatebefore()); file file = new file(log_path_sdcard_dir, needdelfiel ); if (file.exists()) { file.delete(); } } private static date getdatebefore() { date nowtime = new date(); calendar now = calendar.getinstance(); now.settime(nowtime); now.set(calendar.date, now.get(calendar.date) - sdcard_log_file_save_days); return now.gettime(); } }
修改src/android/cordovahealog.java文件
package cordova.plugin.hea.log; import org.apache.cordova.cordovaplugin; import org.apache.cordova.callbackcontext; import org.json.jsonarray; import org.json.jsonexception; import org.json.jsonobject; import cordova.plugin.hea.log.logutil; /** * this class echoes a string called from javascript. */ public class cordovahealog extends cordovaplugin { @override public boolean execute(string action, jsonarray args, callbackcontext callbackcontext) throws jsonexception { if (action.equals("log")) { this.log(args.getstring(0),args.getstring(1),args.getstring(2), callbackcontext); return true; } return false; } private void log(string mylogtype, string tag,string text,callbackcontext callbackcontext) { if (mylogtype != null && mylogtype.length() > 0&&text!=null&&text.length()>0&&tag!=null&&tag.length()>0) { logutil.writelogtofile(mylogtype, tag, text); callbackcontext.success(mylogtype+" "+tag+" "+text); } else { callbackcontext.error("参数不可为空"); } } }
接下来修改 www/cordovahealog.js.js
var exec = require('cordova/exec'); exports.log = function(arg0,arg1,arg2,success, error) { exec(success, error, "logjava", "log", [arg0,arg1,arg2]); };
重点来了,项目下的 plugin.xml文件,我在这里踩了好久的坑,才跳出来。
我们将改成这样
<?xml version='1.0' encoding='utf-8'?> <plugin id="cordova-plugin-hea-log" version="1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>cordovahealog</name> <js-module name="cordovahealog" src="www/cordovahealog.js"> <clobbers target="cordovahealog" /> </js-module> <platform name="android"> <config-file parent="/*" target="res/xml/config.xml"> <feature name="logjava"> <param name="android-package" value="cordova.plugin.hea.log.cordovahealog" /> </feature> </config-file> <config-file parent="/*" target="androidmanifest.xml"></config-file> <source-file src="src/android/cordovahealog.java" target-dir="src/cordova/plugin/hea/log/cordovahealog" /> <source-file src="src/android/logutil.java" target-dir="src/cordova/plugin/hea/log/logutil" /> </platform> </plugin>
5.添加自定义插件
一般情况下是这样添加插件的
cordova plugin add cordova-plugin-hea-log
如果是添加本地的插件是这样添加的 比如我自定义插件是这样添加的
我的这个插件在这个路径下e:\cordovahealog那我就这样添加
cordova plugin add e:\cordovahealog
解释:为什么是addcordova-plugin-hea-log 呢 请往上翻 因为plugin.xml里的id 是cordova-plugin-hea-log
结果:
6.添加安卓平台,设置权限,使用插件,运行查看结果
添加安卓平台
cordova platform add android
然后在项目的这个路径下 heaionic/android/androidmanifest.xml 这个文件
添加权限 因为要写入日志在sdcard
<uses-permission android:name="android.permission.access_network_state" /> <uses-permission android:name="android.permission.access_wifi_state" /> <uses-permission android:name="android.permission.write_external_storage" />
如何使用插件呢
在heaionic/platforms/android/assets/www 这个路径下的这个文件cordova_plugins.js 打开
我们可以看到这个
我们在页面上这样使用
圈起来的是添加的代码
然后 ionic serve ,接着cordova build android
用android studio 打包项目 运行,关于如何 打包项目请看这里→
结果:调用插件日志写入成功
总结:
1.感觉自己在plugin.xml 配置出现最多问题,所以请先了解plugin.xml 如何进行配置。
2.还有比如logutil.java 文件,可以写好测试功能没问题后再复制进插件里面。
3.关于调试,添加插件后出现问题,可以在android studio 中的logcat 窗口查看是哪里出现了问题并进行调试,它会输出是什么问题啊,然后自行解决。一开始我也是一脸懵逼,不知道在哪里进行插件的调试写好后,也不是一次性就过完美的总要调试看看哪里会有出错的嘛,毕竟还是小菜鸟一只。
参考于:android插件开发指南 →android plugin development guide
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Ubuntu下安装PHP的mongodb扩展操作命令
下一篇: 怎么安装php zbarcode