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>
<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