cordova调用过程

最新推荐文章于 2025-06-13 13:26:51 发布

kyfxbl

最新推荐文章于 2025-06-13 13:26:51 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ios 文章标签： ios cordova

本文链接：https://blog.youkuaiyun.com/kyfxbl/article/details/21533953

ios 专栏收录该内容

182 篇文章

订阅专栏

本文详细介绍了如何使用Cordova使前端JavaScript代码调用Objective-C原生代码的过程，包括向前端暴露JS对象、配置datePicker、映射到原生对象以及实现原生对象的详细步骤。

cordova使前端js代码可以调用到原生的objective-c代码，本文小结一下具体的调用过程：

向前端代码暴露js对象作为调用接口

var options = {
    date: config.date,
    x: $(el).offset().left + 300,
    y: $(el).offset().top,
    mode: 'date'
};

datePicker.show(options, function (date) {
    var month = date.getMonth() + 1;
    callback(null, date.getFullYear() + "-" + month + "-" + date.getDate());
});

上面的datePicker就是cordova plugin设置的js对象，前端的js代码可以像调用普通js函数一样调用show函数，并不知道show()函数内部调用了原生代码

在cordova的js中设置datePicker对象

cordova.define("de.websector.datepicker.DatePicker", function(require, exports, module) {

               var exec = require('cordova/exec');

               DatePicker.prototype.show = function(options, cb) {
    
                   // prepare parameters
                   exec(null, null, "DatePicker", "show", [defaults]);
               };

               var datePicker = new DatePicker();

               module.exports = datePicker;
               
});

映射datePicker对象到原生对象

有2个配置文件，一个是cordova_plugins.js

    {
        "file": "plugins/de.websector.datepicker/www/DatePicker.js",
        "id": "de.websector.datepicker.DatePicker",
        "clobbers": [
            "datePicker"
        ]
    }

另一个是config.xml，这个文件配置了真正实现插件功能的原生类

<feature name="DatePicker">
    <param name="ios-package" value="DatePicker" />
</feature>

实现原生对象

根据前面config.xml中的命名规则，会在特定目录下找到DatePicker.m，这个就是插件的实现。其头文件是：

@interface DatePicker : CDVPlugin <UIActionSheetDelegate, UIPopoverControllerDelegate>

- (void)show:(CDVInvokedUrlCommand*)command;

@end

通过上述整个流程，前端的js代码就可以调到原生的代码了