美文网首页
Cordova入门系列(四)自定义Cordova插件--show

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

作者: 75e07f05c8c4 | 来源:发表于2018-01-05 10:12 被阅读0次

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

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

    自定义插件的结构:

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

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

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

    image

    先看showToast.js

    <pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">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;
    });</pre>

    再看ShowToast.java

    <pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">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;
    }
    

    }</pre>
      plugin.xml

    <pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><?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></pre>

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

    然后调用:

    <pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">myPlugins.showToast.show(
    function(msg){
    console.log(msg);
    }, function(msg){
    console.log(msg);
    }
    );</pre>

    转自:http://www.cnblogs.com/lishuxue/p/6479483.html

    相关文章

      网友评论

          本文标题:Cordova入门系列(四)自定义Cordova插件--show

          本文链接:https://www.haomeiwen.com/subject/smyjnxtx.html