自定义Cordova插件、Ionic插件开发
来源:互联网 发布:nginx 配置路径 编辑:程序博客网 时间:2024/06/04 19:24
CordovaPluginsDome
CordovaPluginsDome
自定义Cordova插件
第一步编写JAVA代码
1 命令行新建 项目
例如:
1 cordova create plugins org.apache.cordova.plugs plugins2 cd plugins3 cordova platform add android
Cordova 会创建一个带CordovaLib (Library项目) 的 Android 项目,这个就是Cordova的库
文件,插件的开发基于这个Library
2 将项目导入eclispe 得到两个工程,展开工程目录如下:
其中,第一个工程MainActivity-CordovaLib就是我们要用的Library
第二个工程plugins 是一个依赖MainActivity-CordovaLib 的Android 项目
3 编写Android平台的 JAVA代码插件
Java 代码可以直接在生成的项目中编写,也可以新创建一个单独的工程,这里我新创建一个Android 工程,目录结构如下:
1 新建ProgressDialogPlugin 类,继承CordovaPlugin
CordovaPlugin 是Cordova 的js桥,必须继承这个类,
2 重写继承自 CordovaPlugin的方法
@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException{ if (args.getString(0) != null) { content = args.getString(0); } if (SHOWPROGRESS.equals(action)) { showProgerss(); return true; } else if (CLOSEPROGRESS.equals(action)) { closeProgress(); return true; } else { return false; }}
这里action 参数是指要执行的方法名,
args 是在JS中传递过来的字符品参数数组
showProgerss()和 closeProgress();是我们根据action 要选择执行的方法
private void closeProgress(){ if (dialog.isShowing()) { dialog.dismiss(); }}private void showProgerss(){ if (dialog==null) { dialog = ProgressDialog.createDialog(this.cordova.getActivity()); } dialog.setMessage(content); if (!dialog.isShowing()) { dialog.show(); }}
这里的MainActivity仅时为了测试插件代码,并不打包到插件中去。需要说明的是,一般情况下,插件不要带资源文件,因为资源文件会涉及到R文件的导入问题,在插件使用时,需要使用插件时手动导入R资源
第二步 编写js代码
1 用前端编辑工具打开刚才创建的Cordova项目, 我这里是用的WebStorm 目录结构如下:
2 新建文件夹,并相要用到的文件放到相应的文件夹下
3在www 文件夹下新建js 文件
/TODO 导入依赖库var exec = require('cordova/exec');var platform = require('cordova/platform');module.exports = {// TODO JS 中调用的 js方法,参数列表可根据业务需求定showdalog: function (message) { //TODO 第三个参数为 参数(回调方法,null,类名,方法名,[参数1,参数2,……]) exec(null,null, "ProgressDialogPlugin", "show", [message]);},closedalog: function () { //TODO 第三个参数为 参数(回调方法,null,类名,方法名,[参数1,参数2,……]) exec(null,null, "ProgressDialogPlugin", "close", []);}}
js 文件必须改入相应的依赖模块,并且重写
exec(<successFunction>, <failFunction>, <service>, <action>, [<args>])方法
第三步配置plugin.xml
Plugin.xml文件是Cordova 识别插件时最重要的文件,会根据这个文件生成Android 项目的源代码,如果这一步出现差错,前面所的有工作将前功尽弃。
参数说明
Id="org.xiangbalao.progressdialog" 插件ID, cordova 将根据 ID生成 plugins 下的目录结构<name> 插件名<description> 插件描述<author> 作者<keywords> 关键字<license> 许可协议<engine > 支持的引擎及版本号<platform name="android"> android 平台的配置 <js-module> //指定JS路径 <merges target="xiangbalao" /> 这里是在JS中调该插件的前缀<feature name="ProgressDialogPlugin"> 插件名 <param name="android-package" value="org.xiangbalao.progressdialog.ProgressDialogPlugin"/> 插件的完整类路径 </feature> Java 本地代码映射,由两部分组成,前面是在插件文件中的路径,后面是将要生成的JAVA源码的包路径名,就是要把这些文件放到哪个目录下<source-file src="src/android/ProgressDialogPlugin.java" 插件中的目录 target-dir="src/org/xiangbalao/progressdialog"/> // 将要生成的Android 源码中的存放目录
举例
<?xml version="1.0" encoding="UTF-8"?> <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="org.xiangbalao.progressdialog" version="0.1.0"><!--TODO 域名空间,插件ID,版本号 cordova 将根据 ID生成 plugins 下的目录结构 --><name>进度条</name><!--插件名--><description>加载动画</description><!--插件描述--><author>longtaoge</author><!--作者--><keywords>progress</keywords><!--关键字--><license>Apache 2.0 License</license><!--许可协议--><engines> <engine name="cordova" version=">=3.0"/> <!--支持的引擎及版本号--></engines><!-- TODO android 平台的配置--><platform name="android"> <js-module src="www/progrress_dialog.js" name="progrress_dialog"> <!--TODO 这里是在JS中调该插件的前缀--> <merges target="xiangbalao" /> </js-module> <config-file target="res/xml/config.xml" parent="/*"> <feature name="ProgressDialogPlugin"> <!--TODO 插件的完整类路径--> <param name="android-package" value="org.xiangbalao.progressdialog.ProgressDialogPlugin"/> </feature> </config-file> <!--TODO Java 本地代码映射,由两部分组成,前面是在插件文件中的路径,就是要把这些文件放到哪个目录下 --> <source-file src="src/android/ProgressDialogPlugin.java" target-dir="src/org/xiangbalao/progressdialog"/> <source-file src="src/android/ProgressDialog.java" target-dir="src/org/xiangbalao/progressdialog"/> <source-file src="src/android/pageload_icon1.png" target-dir="res/drawable-hdpi"/> <source-file src="src/android/pageload_icon2.png" target-dir="res/drawable-hdpi"/> <source-file src="src/android/styles.xml" target-dir="res/values"/> <source-file src="src/android/progress_round2.xml" target-dir="res/anim"/> <source-file src="src/android/customprogressdialog.xml" target-dir="res/layout"/></platform>
第四步发布
1发布到 github
在github 上创建仓库,将 代码提交到git仓库即可
目录结构如下
2发布到本地
新建文件夹,将三部分代码拷贝到要发布的目录即可
目录结构如下
第五步使用
1远程仓库
1 cordova plugin add https://github.com/longtaoge/CodovaProgressDialog.git这里 https://github.com/longtaoge/CodovaProgressDialog.git 是仓库地址2 如果插件用到了资源文件 将 import org.apache.cordova.plugs.R; 修改为 AndroidManifest.xml 中的 package="xx.xxx.xxxxxx.xxx" 包名 例如 package="org.apache.cordova.plugs" 则改为 import org.apache.cordova.plugs.R;3 方法调用,例如: xiangbalao.showdalog("正在加载数据..."); //打开进度条 xiangbalao.closedalog(); //关闭进度条这里的 xiangbalao 前缀是指在plugin.xml中配置的参数 方法名是 js文件中提供的方法<js-module src="www/progrress_dialog.js" name="progrress_dialog"> <merges target="xiangbalao" /> 这里是在JS中调该插件的前缀 </js-module>
2本地仓库
cordova plugin add F:\my_plugindir //这里是指插件本地路径
使用方法同上.
示例项目源码地址:
https://github.com/longtaoge/CordovaPluginsDome/tree/master
示例使用方法
1 cordova plugin add https://github.com/longtaoge/CodovaProgressDialog.git2 将 import org.apache.cordova.plugs.R; 修改为 AndroidManifest.xml 中的 package="xx.xxx.xxxxxx.xxx" 包名 例如 package="org.apache.cordova.plugs" 则改为 import org.apache.cordova.plugs.R;3 提供的方法 xiangbalao.showdalog("正在加载数据..."); //打开进度条 xiangbalao.closedalog(); //关闭进度条
- 自定义Cordova插件、Ionic插件开发
- 自定义cordova插件(phonegap、ionic)
- ionic之cordova插件自定义
- ionic 调用自定义cordova插件
- Ionic— Cordova 插件开发
- cordova开发自定义插件
- Cordova 开发自定义插件
- cordova开发自定义插件
- cordova开发自定义插件
- cordova开发自定义插件
- Ionic开发自定义插件
- 创建ionic项目,cordova自定义插件
- Ionic学习笔记六 Cordova 插件开发
- ionic cordova 插件 资源
- ionic cordova keyboard插件
- phonegap cordova ionic插件
- ionic项目之cordova自定义插件的配置
- ionic和ionic2 环境下编写自定义cordova插件
- 9.1 ChocolatesByNumbers
- Hadoop性能优化点小结
- 2015多益网络实习生招聘一题解析3
- Ant入门案例-打包Web程序并发布
- poj 1088
- 自定义Cordova插件、Ionic插件开发
- [BZOJ1996]HNOI2010合唱队|DP
- Cocos2d-JS中使用CocosStudio资源——登录界面
- hdu 1422 重温世界杯
- easyui和thinkphp整合的分页功能
- 十期讨论反思
- EL表达式与jQuery
- 基于hibernate的泛型Dao框架
- [BZOJ1821]JSOI2010部落划分|贪心|Kruskal