Cordova项目创建与插件的简单教程

 

环境

下载和安装Node.js ：

https://nodejs.org/en/download/

 

安装完成后你可以在命令行中使用node 和 npm

 

安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载：

sudo npm install -g cordova

 

创建项目

cordova create hello com.example.hello HelloWorld

hello为文件夹

com.example.hello为应用程序的id名，与Xcode中类似，可以在 config.xml 中修改，如果不指定的话默认为 io.cordova.hellocordova

HelloWorldApp的名称，也可在 config.xml 中修改

 

增加可用平台

cordova platform add ios --save （--save会更新config.xml中的信息）

检查平台设置状况

cordova platform ls

 

 

部署

安装：sudo npm install -g ios-deploy --unsafe-perm=true

(OS X 10.11以上需要加上--unsafe-perm=true )

 

为所有添加的平台构建:（构建会把最外层的www文件夹中的改动复制到staging中）

cordova build

 

为单个平台构建

cordova build ios

 

运行

cordova run ios

模拟器打开

cordova emulate ios

cordova emulate ios --target iPhone-6s

cordova emulate ios --target iPhone-6s-Plus

 

插件

插件搜索页：https://cordova.apache.org/plugins/

核心插件API：https://cordova.apache.org/docs/en/8.x/guide/support/index.html#core-plugin-apis

搜索命令：cordova plugin search camera

添加插件：cordova plugin add cordova-plugin-camera

当前使用的插件：cordova plugin ls

 

自定义插件

ios端

在Plugins 文件夹下创建 service类，继承自CDVPlugin，同时要引入CDVPlugin.h。

service类中创建方法

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

在方法中写原生代码

 

config.xml 配置文件

widget 节点下添加如下内容：

<feature name="service"> <param name="ios-package" value="service" /> <param name="onload" value="true" /> </feature>

 

html中调用

cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42, false]);

以下是每个参数的描述：

function(winParam) {} 成功回调函数。假设你的 exec调用成功完成，这个函数和你传递给它的参数一起执行。

function(error) {} 错误回调函数。如果操作未成功完成，则此函数使用可选的错误参数执行。

service 在本机平台调用的服务名称，对应于本地的同名类。

action 在本机端调用的方法名称。这通常对应于上述类的同名方法。

[/* arguments */] 传入本地环境的参数数组。

 

这只是插件的简单使用，还有一种创建多平台插件的方法，稍微复杂一些

 

 

封装多平台插件

 

安装plugman：

sudo npm install -g plugman

//sudo 是为获取 `/usr/local/lib/node_modules` 的写入权限

 

使用版本命令检查安装：

plugman -v

plugman的使用帮助：

plugman -help

 

创建一个插件 

命令格式如下:

$ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]

如：

plugman create --name iPaynowTestPlugin --plugin_id iPaynowTestPlugin --plugin_version 1.0.0

 

为插件添加支持的平台，这里添加iOS和android 

cd到插件的根目录下执行：

plugman platform add --platform_name android

plugman platform add --platform_name ios

 

到插件文件夹src/ios/ 路径下的ios文件中添加想要的方法，如：

- (void)coolMethod:(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];
}

 

再去www文件夹的js文件添加想要的方法

exports.operations = {
    coolMethod(arg0, success, error) {
        exec(success, error, 'bussinessPlugin', 'coolMethod', [arg0]);
    }

}

 

上面两个方法都是创建后系统自带的，根据它们的格式写就好了

 

配置 package.json 文件，package.json 是npm的一个描述文件，用于管理

npm init

然后根据自己的信息输入完即可

如果没有这个文件在我们添加插件的时候，可能会出现needs a valid package.json 错误而无法安装插件。 

 

将插件添加到项目

进入项目的根目录执行命令：

cordova plugin add 【插件路径】

这样就添加成功了

 

卸载拆件使用 ：

cordova plugin rm 【插件名】

 

（可选）上传插件到npm平台 

在本地进行开发使用时用上面的步骤就可以了，如果想上传到npm平台需要进行以下步骤 

现将插件上传到github,然后完善package.json文件内容，同时需要npm账户，如果没有注册用户，先执行：

npm addUser

 

已有用户执行登录操作：

npm login

 

最后执行发布：

npm publish

 

然后在npm中就可以找到自己上传的包，便可以通过cordova plugin add 【包名】进行插件的安装了。

 

 

参考博客：https://blog.csdn.net/csdn100861/article/details/78585333#31-创建项目