iOS:Cordova的使用

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

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

NS_ASSUME_NONNULL_BEGIN

@interface CordovaViewController : CDVViewController

@end

NS_ASSUME_NONNULL_END
  1. 创建插件类:BaseUtilsModule,继承CDVPlugin

    BaseUtilsModule.png

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

#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
  1. config.xml文件中配置插件
    config.png

    如果添加多个插件类,都要按照这样配置
  2. 重点是配置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.htmlindex.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.jscordova.js01_BaseUtilsModule.js这3个文件提供给他们,前端在自己代码中引用,然后就能直接调用插件方法,参考index.htmlindex.js

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容