一砸抛、新建cordova plugin項(xiàng)目评雌，項(xiàng)目工程結(jié)構(gòu)如下所示，主要包括三個文件： src直焙、www和plugin.xml景东。
cordova 工程結(jié)構(gòu)
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文件中提供調(diào)用native代碼的接口厨喂，以供JavaScript代碼調(diào)用
var exec = require('cordova/exec');
exports.showLoading = function(msg, success, error) {
//五個參數(shù)：成功的回調(diào)方法和措、失敗的回調(diào)方法、service蜕煌、action派阱、傳遞的參數(shù)
exec(success, error, "LoadingPlugin", "showLoading", [msg]);
}
3、plugin.xml文件主要作用是處理js文件與Android斜纪、ios等平臺的相關(guān)配置
<?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標(biāo)簽：和Java文件交互的js文件贫母。屬性src就是www下面的js文件-->
<js-module name="LoadingPlugin" src="www/LoadingPlugin.js"><clobbers target="loadingManager"/></js-module>
<!--platform標(biāo)簽：為plugin添加的平臺，本文主要是開發(fā)Android平臺上的代碼-->
<platform name="android">
<!--config-file標(biāo)簽：將配置文件注入到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標(biāo)簽：將src下的文件復(fù)制到platform下相應(yīng)的工程目錄下-->
<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、編寫調(diào)用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 時系統(tǒng)根據(jù)js-module中clobbers中設(shè)置的
** target值而生成的全局變量
**showLoading為plugin工程中www下的.js文件中導(dǎo)出的方法名 **/
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);
