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

最新推荐文章于 2023-02-11 12:54:07 发布

郎lang郎

最新推荐文章于 2023-02-11 12:54:07 发布

阅读量935

点赞数

CC 4.0 BY-SA版权

分类专栏： Cordova 文章标签： cordova 混合开发教程新手

本文链接：https://blog.youkuaiyun.com/zzzzllll19/article/details/81940984

Cordova 专栏收录该内容

3 篇文章

订阅专栏

环境

下载和安装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 节点下添加如下内容：

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.youkuaiyun.com/csdn100861/article/details/78585333#31-创建项目