Cordova入门系列(四)自定义Cordova插件--showToast

2019/04/25 16:17
阅读数 64

前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件。

  自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封装成一个cordova插件。通过js代码,调用安卓java代码,从而实现调用原生的东西。只不过这些调用原生的行为是我们为了我们自己特定的需求写的,而不是Cordova官方的。。。

  自定义插件的结构:  

  |---pluginName                        
    |---src
      |---android
        |---XXX.java

      |---ios
    |---www
      |---xxx.js
    |---plugin.xml

 

  我们今天做一个名字叫showToast的插件,用户点击的时候,会调用安卓原生的Toast去显示。目录结构如下:

  

  

  先看showToast.js

 
cordova.define("myPlugins.showToast", function(require, exports, module) {
    var exec = require('cordova/exec'); var myFunc = function(){}; // arg1:成功回调 // arg2:失败回调 // arg3:将要调用类配置的标识,要在feature中配置的 // arg4:调用的原生方法名 // arg5:参数,json格式 myFunc.prototype.show=function(success, fail) { exec(success, fail, "ShowToast", "show", []); }; var showtoast = new myFunc(); module.exports = showtoast; });
 

 

  再看ShowToast.java

 
package myPlugin;

import org.apache.cordova.CallbackContext; import org.apache.cordova.CordovaPlugin; import org.json.JSONArray; import org.json.JSONException; import android.app.Activity; import android.widget.Toast; public class ShowToast extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { Activity activity = cordova.getActivity(); if("show".equals(action)) { Toast.makeText(activity, "this is my plugin showToast", Toast.LENGTH_SHORT).show(); } callbackContext.success("toast success"); return true; } }
 

 

  plugin.xml

 
<?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="myPlugins.showToast" version="0.0.1"> <name>showToast</name> <description>this is the plugin witch use js to call Toast</description> <js-module src="www/showToast.js"> <clobbers target="myPlugins.showToast"/> </js-module> <platform name="android"> <source-file src="src/android/ShowToast.java" target-dir="src/myPlugin"/> <config-file target="res/xml/config.xml" parent="/*"> <feature name="ShowToast"> <param name="android-package" value="myPlugin.ShowToast"/> </feature> </config-file> <config-file target="AndroidManifest.xml" parent="/*"> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> </config-file> </platform> </plugin>
 

 

  安装这个插件到项目中,cordova plugin add “插件的路径”

  然后调用:

 
myPlugins.showToast.show(
    function(msg){
        console.log(msg);
    },
    function(msg){ console.log(msg); } );
 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部