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

桃扇骨 2022-05-15 00:13 290阅读 0赞

## 环境 ##

下载和安装Node.js ：

[https://nodejs.org/en/download/][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/][https_cordova.apache.org_plugins]

核心插件API：[https://cordova.apache.org/docs/en/8.x/guide/support/index.html\#core-plugin-apis][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 节点下添加如下内容：

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-创建项目

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[https_cordova.apache.org_plugins]: https://cordova.apache.org/plugins/
[https_cordova.apache.org_docs_en_8.x_guide_support_index.html_core-plugin-apis]: https://cordova.apache.org/docs/en/8.x/guide/support/index.html#core-plugin-apis