iOS：Cordova的使用

2023-10-24 本文已影响0人昔年随心

从新建Cordova项目和现有项目集成Cordova这两个方面讲述

1. 新建Cordova项目

先检查本地是否安装了node环境：

node.png
如果未安装，先去安装：https://nodejs.org/en
然后检查本地是否安装了cordova：

cordova.png
如果未安装，使用npm安装
安装命令：

sudo npm install -g cordova

一切准备就绪，开始创建项目
执行以下命令：

1.png
先创建一个hello文件夹，appId为com.helloWord.cordova的项目
执行后的文件格式如下

2.png
这里并没有项目，不急，接着就是要添加需要的平台，cd进入hello文件夹，执行命令如下：

3.png
此时执行后的文件格式：

7.png
到这里，项目创建完成

但是，平时常用的还是在已有项目中集成Cordova，下面介绍这种方法

2.已有项目集成Cordova

我们新创建一个项目：CordovaDemo
然后把上面创建的Cordova项目中的部分文件，拷贝到新项目中

8.png

添加www文件时，使用create folder references

9.png

上述完成后的项目目录如下：

10.png

最后就是使用CocoaPods集成Cordova

怎么使用CocoaPods不多说，集成结果目录下

完成.png

调试项目

我们创建一个CordovaViewController 继承自 CDVViewController,
运行可能会报错，我们需要把头文件修改成 #import <Cordova/CDV.h>即可

#import <Cordova/CDV.h>

NS_ASSUME_NONNULL_BEGIN

@interface CordovaViewController : CDVViewController

@end

NS_ASSUME_NONNULL_END

创建插件类：BaseUtilsModule，继承CDVPlugin

BaseUtilsModule.png
与第一步类似，需要修改头文件引用。然后在这个插件类中创建插件方法

#import <Cordova/CDV.h>

NS_ASSUME_NONNULL_BEGIN

@interface BaseUtilsModule : CDVPlugin
- (void)getSNTPTime:(CDVInvokedUrlCommand *)command;
- (void)myMethods:(CDVInvokedUrlCommand *)command;

@end

#import "BaseUtilsModule.h"

@implementation BaseUtilsModule
- (void)getSNTPTime:(CDVInvokedUrlCommand *)command{
    CDVPluginResult *result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"这是OC返回数据"];
    [self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
    
}

- (void)myMethods:(CDVInvokedUrlCommand *)command{
    
    NSArray *paramArray = command.arguments;
    NSLog(@"前端传递的参数：%@",paramArray);
    CDVPluginResult *result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"可回调给前端的json字符串等数据"];
    [self.commandDelegate sendPluginResult:result callbackId:command.callbackId];
}
@end

在config.xml文件中配置插件
config.png
如果添加多个插件类，都要按照这样配置
重点是配置www文件中的文件

创建cordova_plugins.js文件

//把模块对象实体注册为全局公共对象
cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [{
            "file": "plugins/01_BaseUtilsModule.js",
            "id": "plugin.BaseUtilsModule",
            "clobbers": [
                "BaseUtilsModule"
            ]
        }
    ];
});

cordova.js文件是上面第1步创建Cordova项目自动生成的，我们直接拿过来使用即可

index.html和index.js文件也是上面自动生成的，我进行了修改。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script type="text/javascript" charset="utf-8" src="./cordova.js"></script>
            <script src="./index.js"></script>
            
</head>
<body>
    <button onclick="BaseUtils.getSNTPTime();">调用原生方法1</button>
    <button onclick="BaseUtils.myMethods();">调用原生方法2</button>
    
</body>
</html>

index.js


//统一回调方法
var callback = {
success: function(msg) {
    alert("success:" + msg);
},
error: function(error) {
    alert("error:" + error);
}
}

/**
 * 基础模块
 * @exports 01_BaseUtilsModule-基础模块
 */
var BaseUtils = {};


BaseUtils.getSNTPTime = function () {
    BaseUtilsModule.getSNTPTime(callback);
}

BaseUtils.myMethods = function () {
    var options = {
        param1: '123',
        param2: '234',
        param3: '345',
    }
    BaseUtilsModule.myMethods(callback,options);
}

创建plugins文件夹，在里面创建一个插件js:01_BaseUtilsModule.js


cordova.define("plugin.BaseUtilsModule", function(require, exports, module) {
    
    var exec = require('cordova/exec');
    
    //JS全局方法导出，页面可以直接通过全局模块对象调用此方法
    module.exports = {
        /**
         * 获取网络时间
         * @param {Object} callback
         * @returns {string|*} success  error
         */
    getSNTPTime: function(callback) {
        var options = [];
        exec(callback.success, callback.error, "BaseUtilsModule", "getSNTPTime", options);
    },
    myMethods: function(callback,option) {
        
        var options = [option];
        exec(callback.success, callback.error, "BaseUtilsModule", "myMethods", options);
    }
    };
});

这里面有两个方法，一个无参，一个带参数。参考上面index.js代码

至此，所有配置完成，项目目录如下。

demo.png
运行项目，如果没有设置startPage，默认加载index.html

start.png

index.jpeg

点击方法1

方法1.jpeg

点击方法2，并打印前端传过来的参数

方法2.jpeg

log.png

PS：这个www文件仅是供我们本地调试使用。前端调用我们插件方法，仅需要将cordova_plugins.js、cordova.js、01_BaseUtilsModule.js这3个文件提供给他们，前端在自己代码中引用，然后就能直接调用插件方法，参考index.html和index.js