从新建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
