探索phonegap插件开发

　　由于公司主要做phonegap跨平台开发，一直对开发phonegap插件有点感冒，查询了一下博客资料后开始实践验证一下，以作敲门砖。

　　直接上干货，如下：

主要步骤：

1，cordova新建一个工程，并添加android平台

2，把cordova工程导入到Eclipse

3,在src目录下编写java文件

4,在res/xml 目录下配置  config.xml 文件

5,在plugin目录下编写javascript接口文件

6,在assents 目录下的  cordova-plugins.js文件添加配置

7,最后，直接调用javascript接口文件中的测试方法

 

详细内容：

一、cordova新建一个工程，并添加android平台

通过控制台中的命令创建一个cordova工程，工程命名为“myPlugin”：

1 cordova create myPlugin com.example.myPlugin myPlugin
2 cd myPlugin
3 cordova platforms add android

二、把cordova工程导入到Eclipse

 

三、在src目录下编写java文件

 1 package zxing.plugins;
 2 
 3 import org.apache.cordova.CallbackContext;
 4 import org.apache.cordova.CordovaPlugin;
 5 import org.json.JSONArray;
 6 import org.json.JSONException;
 7 
 8 import android.content.Intent;
 9 import android.util.Log;
10 import android.widget.Toast;
11 
12 import com.example.myPlugin.MainActivity;
13 
14 /*
15  *自制cordova插件 test_plugin
16  * 
17  */
18 
19 public class test_plugin extends CordovaPlugin {
20 
21     CallbackContext callbackContext;
22     
23     public test_plugin(){
24         
25     }
26     
27     @Override
28     public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
29         
30         this.callbackContext = callbackContext;
31         
32         if(action.equals("getname")){
33             String msg = args.getString(0);
34             callbackContext.success(msg);
35             return true;
36         }
37         return false;
38     }
39     
40 }

四、在res/xml 目录下配置  config.xml 文件

 

1 <feature name="Test">
2         <param name="android-package" value="zxing.plugins.test_plugin" />
3 </feature>

 

 

五、在plugin目录下编写javascript接口文件

 

 1 cordova.define("zxing.plugins.test", function(require, exports, module) { 
 2 
 3 var exec = require('cordova/exec');
 4 
 5 
 6 
 7 module.exports = {
 8 
 9     /**
10      * 一共5个参数
11        第一个 :成功会掉
12        第二个 :失败回调
13        第三个 :将要调用的类的配置名字(在config.xml中配置 稍后在下面会讲解)
14        第四个 :调用的方法名(一个类里可能有多个方法 靠这个参数区分)
15        第五个 :传递的参数  以json的格式
16      */22     getname: function(args) {
23         exec(function(data){
24             alert(data);
25         }, null, "Test", "getname", [args]);
26     }
27 };
28 
29 });

 

 

 

六、在assents 目录下的  cordova-plugins.js文件添加配置

 

 1 cordova.define('cordova/plugin_list', function(require, exports, module) {
 2 module.exports = [
 3     {
 4         "file": "plugins/cordova-plugin-whitelist/whitelist.js",
 5         "id": "cordova-plugin-whitelist.whitelist",
 6         "runs": true
 7     },  
 8     {  
 9         "file": "plugins/test.js",  
10         "id": "zxing.plugins.test",  
11         "merges": [  
12             "navigator.test"  
13         ]  
14     }
15 ];
16 module.exports.metadata = 
17 // TOP OF METADATA
18 {
19     "cordova-plugin-whitelist": "1.0.0",  
20     "zxing.plugins.test" :"0.0.1"
21 }
22 });

 

 

 

七、最后，直接调用javascript接口文件中的测试方法

 

1 //调用getname方法
2 navigator.test.getname("EricCui");

 

 

最后运行的效果图：

 

 

总结：

　　这是一次好的开始，心里有点小激动^..^，继续努力。。

 

转载于:https://www.cnblogs.com/eric-cui/p/4885982.html