phonegap 插件开法流程demo
首先需要创建一个plugin.xml,可以参考下面的模板,我做了详细的注释:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<? xml version = "1.0" encoding = "UTF-8" ?> < plugin xmlns = "http://apache.org/cordova/ns/plugins/1.0" id = "org.apache.cordova.device" version = "0.2.3" > < name >Device</ name > < description >Cordova Device Plugin</ description > < license >Apache 2.0</ license > < keywords >cordova,device</ keywords > <!--需要引入的JS文件--> < js-module src = "www/device.js" name = "device" > <!--模块名称,requireJS使用--> < clobbers target = "device" /> </ js-module > <!-- android --> < platform name = "android" > <!--需要引入到config.xml的内容--> < config-file target = "res/xml/config.xml" parent = "/*" > <!--name表示Service名称,JS接口中将调用--> < feature name = "JToast" > <!--上面的Service名称对应的Java Class--> < param name = "android-package" value = "com.jiusem.plugins.window.JToast" /> <!--App启动时加载插件--> < param name = "onload" value = "true" /> </ feature > </ config-file > <!--需要引入到AndroidManifest.xml中的内容,一般是开启一些权限--> < config-file target = "AndroidManifest.xml" parent = "/*" > </ config-file > <!--java文件路径--> < source-file src = "src/android/JToast.java" /> </ platform > <!--iOS--> < platform name = "ios" > <!--需要插入到config.xml中的内容--> < config-file target = "config.xml" parent = "/*" > <!--Sevice名称--> < feature name = "Device" > <!--Service名称对应的Objective-C Class--> < param name = "ios-package" value = "CDVDevice" /> </ feature > </ config-file > <!--iOS中需要引入的源文件--> < header-file src = "src/ios/CDVDevice.h" /> < source-file src = "src/ios/CDVDevice.m" /> </ platform > </ plugin > |
接下来可以编写JS接口了:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script> //JS文件写法示例 var JToast = { show: function (txt, success, error) { //该方法将调用JToast Service下的show action,并传递txt参数 cordova.exec(success, error, "JToast" , "show" , [txt]); } } module.exports = JToast; </script> //cordova.exec方法详解 cordova.exec( function (winParam) { //调用成功的回调 }, function (error){ //调用失败的回调 }, "service" , //服务名 "action" , //方法名 [ "firstArgument" , "secondArgument" , 42, false ]); //以数组形式传递的参数 |
下面可以开始编写原生代码了,首先介绍Android部分
一个Android插件至少需要编写一个Java类继承CordovaPlugin类,并重写execute方法
插件是在第一次被调用时初始化,当然也可以配置在App启动时初始化,请参考上面的plugin.xml内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
package com.jiusem.plugins.window.JToast; public class JToast extends CordovaPlugin{ @Override public void initialize(CordovaInterface cordova, CordovaWebView webView) { super .initialize(cordova, webView); //初始化的业务逻辑,如果有的话,比如可以完成一些服务的注册 } @Override //所有的JS调用都会由该方法进行处理 public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ( "beep" .equals(action)) { this .beep(args.getLong( 0 )); callbackContext.success(); //执行成功回调,该方法是用户在JS调用时传入 return true ; //记得返回值 } return false ; // Returning false results in a "MethodNotFound" error. } } |
1
2
3
4
|
//在插件内获取当前Activity Activity main = this .cordova.getActivity(); //文档内说该方法和上面的功能相同 Activity main = this .cordova.getContext(); |
插件并不会运行在webview的线程内,当然也可以实现让插件运行在webview的线程内
现阶段应该涉及不到这么深的内容,可以参考文档。
下面介绍iOS下原生代码的实现
一般来说,至少需要编写一个类继承自CDVPlugin并重写
同样在第一次调用时被初始化,也可以通过配置实现App启动时初始化
需要注意的是iOS下的WebView,标准名称为UIWebView
请看下面的代码示例
值得注意的是,iOS中没有类似于Android插件中的execute方法,方法是直接被调用的
如果需要在插件初始化时执行一些代码,可以重写pluginInitialize方法,
具体可以参见CDVPlugin.h与CDVPlugin.m的源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/********* Echo.h Cordova Plugin Header *******/ #import <Cordova/CDV.h> @interface Echo : CDVPlugin - ( void )echo:(CDVInvokedUrlCommand*)command; @end /********* Echo.m Cordova Plugin Implementation *******/ #import "Echo.h" #import <Cordova/CDV.h> @implementation Echo - ( void )echo:(CDVInvokedUrlCommand*)command { CDVPluginResult* pluginResult = nil; NSString* echo = [command.arguments objectAtIndex:0]; if (echo != nil && [echo length] > 0) { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } else { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR]; } [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @end |
本文来自转载,谢谢。