一、新建cordova plugin项目，项目工程结构如下所示，主要包括三个文件： src、www和plugin.xml。
cordova 工程结构
1、src文件主要编写不同平台下的native代码。Eg: android 和ios
/**
新建的类一定要继承自CordovaPlugin类，并重写execute方法
**/
public class LoadingPlugin extends CordovaPlugin {
public ProgressDialog loadingDialog;
public LayoutInflater inflater;
public AlertDialog.Builder alertDialogBuilder;
public AlertDialog alertDialog;
private Handler handler = new Handler();
private TextView text ;
@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
if ("showLoading".equals(action)) {
this.createDialog(cordova.getActivity(), "loading...");
callbackContext.success("showLoading success!");
return true;
} else if("dismissDialog".equals(action)) {
this.dismissDialog();
callbackContext.success("dismissDialog success!");
return true;
} else {
callbackContext.error("get plugin error!");
return false;
}
}
}
2、www文件中提供调用native代码的接口，以供JavaScript代码调用
var exec = require('cordova/exec');
exports.showLoading = function(msg, success, error) {
//五个参数：成功的回调方法、失败的回调方法、service、action、传递的参数
exec(success, error, "LoadingPlugin", "showLoading", [msg]);
}
3、plugin.xml文件主要作用是处理js文件与Android、ios等平台的相关配置
<?xml version='1.0' encoding='utf-8'?>
<plugin id="expense-plugin-loading" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>LoadingPlugin</name>
<!-- js-module标签：和Java文件交互的js文件。属性src就是www下面的js文件-->
<js-module name="LoadingPlugin" src="www/LoadingPlugin.js"><clobbers target="loadingManager"/></js-module>
<!--platform标签：为plugin添加的平台，本文主要是开发Android平台上的代码-->
<platform name="android">
<!--config-file标签：将配置文件注入到Android工程中的config.xml中-->
<config-file parent="/*" target="res/xml/config.xml">
<feature name="LoadingPlugin">
<param name="android-package" value="com.baiwangmaoyi.expense.LoadingPlugin"/>
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml">
</config-file>
<!--srource-file标签：将src下的文件复制到platform下相应的工程目录下-->
<source-file src="src/android/LoadingPlugin.java" target-dir="src/com/baiwangmaoyi/expense"/>
<source-file src="src/android/layout/loading_layout.xml" target-dir="res/layout" />
</platform>
</plugin>
二、为Ionic添加所写的Plugin
1、 cordova plugin add [path to your plugin]
2、编写调用native文件的js代码并将其封装为.ts
文件名：ShowLoading.js
'use strict';
var {Observable} = require('rxjs/Rx');
var ShowLoading = (function(){
function ShowLoading(){};
ShowLoading.prototype.showLoading = function(msg){
var promise = new Promise(function(resolve, reject){
/**loadingManager是add plugin 时系统根据js-module中clobbers中设置的
** target值而生成的全局变量
**showLoading为plugin工程中www下的.js文件中导出的方法名 **/
loadingManager.showLoading(msg, function(data){
resolve(data);
}, function(err){
reject(err);
});
// resolve("success");
});
return promise;
};
ShowLoading.prototype.dismissLoading = function(msg){
var promise = new Promise(function(resolve, reject){
loadingManager.dismissLoading('', function(data){
resolve(data);
}, function(err){
resolve(err);
});
// resolve("success");
});
return promise;
};
return ShowLoading;
}());
exports.ShowLoading = ShowLoading;
文件名：ShowLoading.d.ts, 封装后的方法。
export declare class ShowLoading {
showLoading(msg: string): Promise<any>;
dismissLoading(msg: string): Promise<any>;
}
三、在Ionic中.ts 文件中使用封装后的方法：
this.showLoading = new ShowLoading();
this.showLoading.showLoading("loading").then(res => {
this.showToast(res);
console.log('success');
}, err => {
console.log('err',err);
this.showToast(err);
});
setTimeout(() => {
this.showLoading.dismissLoading('').then(res =>{
this.showToast(res);
console.log("dismiss",res);
}, err => {
this.showToast(err);
console.log('dismiss',err);
});
},3000);
