Cordova

使用plugman cordova 自定义插件 开发 测试

2017-07-12  本文已影响0人  葛高召

1、准备

1.环境搭建 (ios)  andriod(http://www.wenzhixin.net.cn/2014/03/20/cordova_my_plugin)

cordova插件开发前需要安装一些软件和配置环境

1.1 node.js环境搭建

到node.js官网(https://nodejs.org/)下载安装就好 , 或者命令行  用homebrew 也很方便;百度一堆资料

1.2 cordova 的安装

在窗口输入下面命令全局安装cordova

npm install -g cordova

百度一堆资料

2.创建第一个应用

创建的命令是cordova create

列如:

cordova create hello com.cool.hello HelloWorld

第一个参数hello表示在工程目录中创建一个 hello 的文件夹

第二个参数com.cool.hello表示包名(反向域名),用于标志不同的 app

第三个参数HelloWorld表示项目的名称,可以在 config.xml 文件中修改

3.添加平台

3.1 进入创建的项目目录

cd hello

3.2 查看已有的平台

cordova platforms list

3.3添加所需要的平台

cordova platform add ios

如果想移除已经添加的平台的话 cordova platform remove ios 或者cordova platform rm ios

4.编译项目

编译项目命令

cordova build ios

2、开发

.插件开发

前面说了这么多全都是准备工作,接下来是插件的具体开发过程

6.1 pluman的安装

npm install -g plugman

如果permission denied  (try:  sudo npm install -g plugman)

6.2 plugman安装完之后就可以创建一个插件了cordova plugin

plugman create --name --plugin_id --plugin_version [--path ] [--variableNAME=VALUE]

参数:

pluginName: 插件名字

pluginID: 插件id, egg : coolPlugin

oversion: 版本, egg : 0.0.1

directory:一个绝对或相对路径的目录,该目录将创建插件项目

variable NAME=VALUE: 额外的描述,如作者信息和相关描述

egg : plugman create --name CoolPlugin --plugin_id coolPlugin --plugin_version 0.0.1

生成的插件的目录如下: (这里复制 andriod的例子 )

插件名

     ----src

            ++++ios

                             \\\.m

     -----www 

               ++++js 

    ------plugin.xml

    ------packet.json

执行创建插件的终端命令后 自己做的小例子如下:

ios 文件(在xcode下编辑src文件下的 文件):

/********* StorageToolPlugin.m Cordova Plugin Implementation *******/

#import

@interface StorageToolPlugin : CDVPlugin {

// Member variables go here.

}

- (void)getValueMethod:(CDVInvokedUrlCommand*)command;

- (void)setValueMethod:(CDVInvokedUrlCommand*)command;

@end

@implementation StorageToolPlugin

- (void)getValueMethod:(CDVInvokedUrlCommand*)command

{

NSLog(@"oc getValueMethod");

CDVPluginResult* pluginResult = nil;

NSString* echo = [command.arguments objectAtIndex:0];

NSLog(@"参数:%@",echo);

if (echo != nil && [echo length] > 0) {

NSString * value = [[NSUserDefaults standardUserDefaults] objectForKey:echo];

NSLog(@"value:%@",value);

if (value) {

NSLog(@"value:%@ 传递到ts ",value);

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:value];

}else{

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"没有对应的值"];

}

} else {

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"参数为空,取值失败"];

}

[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];

}

- (void)setValueMethod:(CDVInvokedUrlCommand*)command

{

CDVPluginResult* pluginResult = nil;

NSDictionary * ParaterDic = [command.arguments objectAtIndex:0];

NSLog(@"dic:%@",ParaterDic);

if (![ParaterDic isKindOfClass:[NSNull class]] && ParaterDic ) {

NSArray * arrValues = [ParaterDic allValues];

NSString * key, * value;

for (int i=0; i

{

if (i==0) {

key = arrValues[0];

}

if (i==1) {

value = arrValues[1];

}

}

NSLog(@"开始保存 key :%@ value:%@",key,value);

[[NSUserDefaults standardUserDefaults] setValue:value forKey:key];

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"保存成功"];

} else {

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"参数为空  保存失败!!!"];

}

[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];

}

@end

js文件:在auto 、webstorm 或者  vsCode 下编辑www文件下的 

varexec= require('cordova/exec');

varMyStorageTool=function() {}

MyStorageTool.prototype.getValue=function(arg0, success, error) {

exec(success, error,"StorageToolPlugin","getValueMethod", [arg0]);

}

MyStorageTool.prototype.setValue=function(arg0, success, error) {

exec(function(meg) {

alert(meg);

}, error,"StorageToolPlugin","setValueMethod", [arg0]);

}

varStorageTool=newMyStorageTool();

module.exports=StorageTool;

xml:

官网的介绍:

name: 插件的名字

<js-modul> 下的<clobbers target="xxxx">  xxx是js平台的类   可以在ts文件里声明调用  在使用里会介绍使用方法

platform 使用支持的使用平台

<feature> 下的 <param name="xxx" value="***">  xxx代表平台包  ***代表xxx平台下支持的类

官方解释: http://cordova.axuer.com/docs/zh-cn/latest/guide/hybrid/plugins/index.html

The top-levelplugintag'sidattribute uses the same reverse-domain format to identify the plugin package as the apps to they're added. Thejs-moduletag specifies the path to the common JavaScript interface. Theplatformtag specifies a corresponding set of native code, for theiosplatform in this case. Theconfig-filetag encapsulates afeaturetag that is injected into the platform-specificconfig.xmlfile to make the platform aware of the additional code library. Theheader-fileandsource-filetags specify the path to the library's component files.

packet.json

{

"name":"storagetoolplugin",

"version":"1.0.0",

"description":"sengled storageTool ",

"main":"index.js",

"scripts": {

"test":"echo\"Error: no test specified\"&& exit 1"

},

"author":"",

"license":"ISC"

}

3、测试

待补充

4、使用 

问题:

在ts文件调用插件的js方法问题   下面是html ts文件使用 

有时间我会继续补充  希望可以帮助新手  如果是老手多担待  谢谢  

上一篇下一篇

猜你喜欢

热点阅读