zoukankan      html  css  js  c++  java
  • PhoneGap Plugin的创建步骤

    PhoneGap在Android的配置已经有相应的文章,就不介绍了,发个链接:http://www.cnblogs.com/lee0oo0/articles/2534677.html

    注意:我们插件可能只需要用到一个,但是在上面链接所列出的都必须全部显式声明在xml文件中。而且我们使用的android开发版本需要在2.3.3或以上,否者会出现莫名的错 误。以下以一个例子说明步骤,重要部分会使用不同的颜色进行表明。

     

    Html文件: 

    <!DOCTYPE HTML> 

    <html>
    <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Simple Plugin Demo</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="simplePlugin.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener('deviceready', function() {

            var btn = document.getElementById("hello"); //获得Button的ID
            var textbox = document.getElementById("name"); //获得输入框的ID
            var output = document.getElementById("output"); //获得输出的ID

            btn.addEventListener('click', function() { //为Button添加点击的事件监听器

                var text = textbox.value; //得到输入框的的内容

     
                
            //window.plugins是固定的;  

    //simpleplugin是JavaScript中PhoneGap.addPlugin('simpleplugin', new SimplePlugin()); 的那个'simpleplugin'插件名称 

    //hello是JavaScript中 SimplePlugin.prototype.hello方法的名字"hello"

    window.plugins.simpleplugin.hello(text, function(result) { //成功时执行,传入的是Javascript中对象方法的参数                

    output.innerHTML = result;//把输入框的的内容的内容显示在输出div上
                }, function(err) { //错误时执行
                    // failure callback
                    output.innerHTML = 'err: ' + err
                            + ', Failed to invoke simple plugin';
                });
            });

        }, true);
    </script>

    </head>
    <body>
        <p>
            <label for="name">Enter Name: </label> <input type="text" name="name"
                id="name" value="" />
            <button id="hello">Say Hello</button>
        </p>

        <p>
        <div id="output"></div>
        </p>
    </body>

    </html>  


    JavaScript文件:

    var SimplePlugin = function() {};

    SimplePlugin.prototype.hello = function(name, successCallback, failureCallback) {
        // exec 內的參數分別是: Success Callback, Failure Callback, Registered Plugin name:就是在XML文件配置的那个所对应的name,
        // 'hello'是传入Java文件的execute方法中的参数String action 
       // name (從 HTML 傳進來的參數)
        return PhoneGap.exec(successCallback, failureCallback, 'SimplePlugin',
                'hello', [ name ]);
    };

    // 这里是 PhoneGap Plugin 的註冊,Plugin 的名稱還有 Native Class 的名稱別打錯了,就是我們剛剛輸入的那些
    PhoneGap.addConstructor(function() {
        // Register the javascript plugin with PhoneGap
        PhoneGap.addPlugin('simpleplugin', new SimplePlugin()); //simpleplugin是插件名称, new SimplePlugin()实例化的是本Javascript的类名 

    });  


    JAVA文件:

    package org.apache.cordova.example;

    import java.util.Date;
    import org.apache.cordova.api.PluginResult.Status;
    import org.json.JSONArray;
    import org.json.JSONException;
    import com.phonegap.api.Plugin;
    import com.phonegap.api.PluginResult;
    public class SimplePlugin extends Plugin {

        public static String ACTION_HELLO = "hello";

        @Override
        public PluginResult execute(String action, JSONArray data, String callbackId) { //action和data是javascript传进来的参数
     
            PluginResult pluginResult = null;

            if (ACTION_HELLO.equals(action)) {
                String name;

                try {
                    name = data.getString(0);
                    String result = "Hello " + name + "! The time is "
                            + (new Date()).toString();
                    pluginResult = new PluginResult(Status.OK, result);

                    return pluginResult;

                } catch (JSONException e) {
                    pluginResult = new PluginResult(Status.JSON_EXCEPTION,
                            "missing argument name");
                }
            } else {
                pluginResult = new PluginResult(Status.INVALID_ACTION,
                        "Allowed actions is hello");
            }

            return pluginResult;
        }

    }  


    XML文件:

    <plugins> 
        <plugin name="App" value="org.apache.cordova.App"/>
        <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
        <plugin name="Device" value="org.apache.cordova.Device"/>
        <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
        <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
        <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
        <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
        <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
        <plugin name="File" value="org.apache.cordova.FileUtils"/>
        <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
        <plugin name="Notification" value="org.apache.cordova.Notification"/>
        <plugin name="Storage" value="org.apache.cordova.Storage"/>
        <plugin name="Temperature" value="org.apache.cordova.TempListener"/>
        <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
        <plugin name="Capture" value="org.apache.cordova.Capture"/>
        <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
        <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
        <!--添加的插件-->
        <plugin name="SimplePlugin" value="org.apache.cordova.example.SimplePlugin" /> //name是参见的名字 ;value是创建插件的全称类名

    </plugins>  

     

  • 相关阅读:
    同余方程
    倒酒
    机器翻译
    vue 锚点定位
    解决vuex刷新页面数据丢失
    h5 input失去焦点软键盘把页面顶起
    js 监听ios手机键盘弹起和收起的事件
    js 将数组中的每一项安装奇偶重新组合成一个数组对象
    moment.js获取本周本月本年的开始日期和结束日期
    vue 所有的路由跳转加一个统一参数
  • 原文地址:https://www.cnblogs.com/lee0oo0/p/2540059.html
Copyright © 2011-2022 走看看