• PhoneGap之自定义插件


    PhoneGap:作为原生App,Java(这里面是指Android的)与JavaScript 的通信桥梁,使得我们的混合开发更加得心应手,我是与Android结合的混合开发。

    但在这里不得不吐槽一下PhoneGap这个坑:更新速度很快,但是学习资料的更新却远远跟不上节奏。而且必须按照它的套路走,而且就算按着套路走也可能会出错,

    最后还是得靠自己摸索。。。。

    好了,不说那么多了,下面介绍PhoneGap自定义插件的使用(也可以说是CordovaPlugin),主要分以下步骤:


    1)下载最新版的cordova.jar,我在使用的是cordova3.5.0.jar 版本的, 把下载的 cordova-x.x.x.jar导入到工程的libs目录下来。

    说明:这个cordova.jar 是用于Android原生Java语言这边使用的,有了这个架包就可以在Android这边编写自定义的插件。


    2)把cordova.js,cordova_plugin.js 这两个JavaScript文件复制到www文件目录下面。

    说明:这两个js文件是用于JavaScript调用插件中方法使用。


    3)在www文件目录下新建一个 plugins 文件夹目录。

    说明: 用于存放自定义插件的JavaScript文件


    4)编写自定义插件中的 java 代码部分:FirstPlugin.java 

    <span style="font-size:14px;">package com.customcordovaplugin.plugin;
    
    import org.apache.cordova.CallbackContext;
    import org.apache.cordova.CordovaPlugin;
    import org.json.JSONArray;
    import org.json.JSONException;
    
    /**
     * Created by long on 2016/5/10.
     */
    public class FirstPlugin extends CordovaPlugin {
        @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
                throws JSONException {
            //检查方法名,例如我们定义一个名为sayHello的方法
            if("sayHello".equals(action)){
                /**
                 * 关于回调函数
                 * 成功就执行 callbackContext.success(param),从而触发成功回调函数
                 * 失败就执行 callbackContext.error(param),从而触发失败回调函数
                 * 如果不需要回调函数,那么就没必要调用这两个方法
                 */
    
                //获取第一个参数,如果有多个参数的话可以使用索引号分别获取
                String message = args.getString(0);
                //检查输入值是否为空,如果为空值就会调用 callbackContext.error()方法
                //这会导致失败回调函数被调用
                if(message!=null && message.length()>0){
                    callbackContext.success("Hello: "+message+"!");
                }else{
                    callbackContext.error("输入值为空!");
                }
                //最后还需要返回逻辑值 true 来表明方法存在
                return true;
            }
            //否则,如果方法名不符,那么就返回false
            //在网页的 JavaScript 程序中调用时就会导致“MethodNotFound”错误
            return false;
        }
    }
    </span>


    5)编写自定义插件中的 JavaScript 部分:firstplugin.js
    <span style="font-size:14px;">cordova.define("firstplugin_id",
        function(require, exports, module) {
        	//引入必要的类
            var exec = require('cordova/exec');
    
            //创建一个JavaScript类
            function FirstPlugin(){};
            
            //为其添加一个方法,在方法中调用exec()方法
            FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){
            	exec(successCallback, failureCallback,
            				'FirstPlugin', 'sayHello', [name]);
            };
            
            //公共的对象是 FirstPlugin 实例
            module.exports = new FirstPlugin();
        }
    );</span>


    6)编写程序入口html文件:index.html
    <span style="font-size:14px;"><!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    		<script type="text/javascript" src="cordova.js"></script>
    		<script type="text/javascript" src="plugins/firstplugin.js"></script>
            <title>Simple</title>
        </head>
        <body onload="onLoaded()">
            <label for="inputName">请输入名字: </label>
    		<input type="text" id="inputName">
            <input type="button" onclick="clickHandler()" value="sayHello" />
            <script>
            	//当DOM加载完毕,注册deviceready事件
            	function onLoaded(){
            		//注册deviceready事件监听,指定deviceready事件处理函数
            		document.addEventListener("deviceready",onDeviceReady,false);
            	}
            	//成功回调函数
            	function onSuccess(data){
            		alert(data);
            	}
            	//失败回调函数
            	function onError(err){
            		alert(err);
            	}
    
            	//deviceready 事件处理函数,PhoneGap 完成加载后调用该函数
            	function onDeviceReady(){
            		//启动所有input元素
            		var nodelist = document.getElementsByTagName('input');
            		var nodeLen = nodelist.length;
            		for(var i=0;i<nodeLen;i++){
            			nodelist[i].disabled = false;
            		}
            	}
            	//按钮单击事件处理函数
            	function clickHandler(){
            		//获取输入文本框中的字符,并将其作为参数传递给sayHello()方法
            		inputName = document.getElementById("inputName");
            		var dialog = com.mine.FirstPlugin;
            		dialog.sayHello(inputName.value, onSuccess, onError);
            	}
            </script>
        </body>
    </html></span>
    说明:
    <span style="font-size:14px;">        		var dialog = com.mine.FirstPlugin;    <span style="font-family: Arial, Helvetica, sans-serif;">是在后面讲到的cordova_plugins.js文件中配置的</span>
    
            		dialog.sayHello(inputName.value, onSuccess, onError);</span>
    <span style="font-size:14px;">调用的这个sayHello方法就是调用了 firstplugin.js 文件中的这个方法:</span>
    <span style="font-size:14px;"><pre name="code" class="javascript">        //为其添加一个方法,在方法中调用exec()方法
            FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){
            	exec(successCallback, failureCallback,
            				'FirstPlugin', 'sayHello', [name]);
            };</span>

    7)接下来就是配置config.xml文件,在res下面新建xml文件夹,并且将config.xml 放到该文件夹下面,config.xml 代码如下:
    <span style="font-size:14px;"><widget xmlns     = "http://www.w3.org/ns/widgets"
            id        = "io.cordova.helloCordova"
            version   = "2.0.0">
    
        <feature name="FirstPlugin">
            <param name="android-package" value="com.customcordovaplugin.plugin.FirstPlugin"/>
        </feature>
    
    </widget></span>
    说明:value的值就是 FirstPlugin.java 文件的路径及名称


    8)配置cordova_plugin.js 文件 ,cordova_plugins.js代码如下:

    <span style="font-size:14px;">cordova.define('cordova/plugin_list',function(require, exports, module){
    	module.exports = [{
    		"file": "plugins/firstplugin.js",       //表示注册和连接JavaScript文件的位置
    		"id": "firstplugin_id",                 //表示唯一的标示
    		"clobbers": ["com.mine.FirstPlugin"]    //表示可以引用的接口(用于html中调用JavaScript的方法(自定义))
    	}
    	
    	module.exports.metadata = {
    		"firstplugin_id": "1.0",          //插件的版本号
    	}
    });
    </span>

    到这里,PhoneGap自定义插件的工作完成了,PhoneGap的学习到处是坑,大家学习的时候细心点。

    相关文章分享:

    http://blog.csdn.net/yuhailong626/article/details/30059679

    http://blog.csdn.net/kong92917/article/details/44086821

    http://blog.csdn.net/xiaoluo5238/article/details/38711331

    http://blog.csdn.net/Maxbalance/article/details/50483490

    http://blog.csdn.net/happyflyingave/article/details/25182369

    关注公众号,分享干货,讨论技术



  • 相关阅读:
    WEB前端第四十四课——jQuery框架(二)常用方法
    WEB前端第四十三课——jQuery框架(一)$()函数、添加事件监听
    WEB前端第四十二课——应用案例-瀑布流、递归、代理
    WEB前端第四十一课——简单算法与解析indexof、hash、冒泡排序、递归、JSON
    WEB前端第四十课——正则表达式-RegExp、高级
    WEB前端第三十九课——HTML正则表达式-基础、修饰符、检索模式
    SITE STRUCTURE
    CSS GRID ESSENTIALS
    CSS TYPOGRAPHY
    CSS COLOR
  • 原文地址:https://www.cnblogs.com/molashaonian/p/9097644.html
Copyright © 2020-2023  润新知