Cordova集成笔记（for iOS）

最新推荐文章于 2024-07-29 17:18:39 发布

WaterGJ

最新推荐文章于 2024-07-29 17:18:39 发布

阅读量3.7k

点赞数 2

分类专栏：开发路上技能储备库

本文链接：https://blog.csdn.net/u013929312/article/details/55045871

版权

开发路上同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

技能储备库

4 篇文章 0 订阅

订阅专栏

Crodova使用总结
1.Mac机上Cordova环境配置
2.在已有iOS项目中集成Cordova
3.在Cordova中创建插件，实现h5与原生交互（以自己公司网页为例）

Mac机上Cordova环境配置

这部分网上有很多，但我写这篇初衷是个人笔记，所以再简单说一下

安装cordova需要先安装node.js。
如果你没有安装git client，需要下载并安装一个git客户端
使用node.js的依赖包管理工具npm来进行cordova安装。
打开终端输入如下命令：
sudo npm install -g cordova

在iOS项目中集成Cordova

直接新建一个Cordova项目

打开终端输入如下命令，该命令可能需要一些时间来完成：
cordova create hello com.example.hello HelloWorld

Parameter	Description	Notes
hello参数是必填	将为你的项目生成一个hello目录	www子目录是应用程序的主页，以及各种资源(css,js,img)，遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统，而不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。
com.example.hello 参数可选	App ID	如果不填写这个参数，第三个参数就要省略，默认值是 io.cordova.hellocordova，但建议你填写一个适当的值。
HelloWorld参数可选	应用程序的项目名	这个参数的默认值是 HelloCordova，但建议你填写一个适当的值。
[–template templatePath] 参数可选，一般不填写	使用模板创建一个项目	所有文件和文件夹的模板将被复制到新的项目。平台和插件可能包含在一个模板。这个参数是可选的。模板的路径可以是一个本地路径，NPM模块或Git URL

2. 在已有项目中添加Cordova

这部分有一篇文章写的很详细，就不啰嗦了
文章地址：http://www.jianshu.com/p/e982b9a85ae8

在Cordova中创建插件，实现h5与原生交互（以自己公司网页为例）

先给大家看下我的项目目录
这里写图片描述
index.html部分内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="cordova_plugins.js"></script>
        <script type="text/javascript">
            document.addEventListener("deviceready", yourCallbackFunction, false);
            function buttonClick(){
                Cordova.exec(successFunction, failFunction, "YourPluginName", "myMethod", ["回调方法"]);
            }
            function successFunction(){
                alert("successFunction");
            }
            function failFunction(){
                alert("failFunction");
            }
        </script>
    </head>
    <body>
        <p>ExampleObject</p>
        <button onclick="buttonClick()">自定义插件</button>
    </body>
</html>

上面的html内有一个自定义插件按钮，当点击按钮是，网页会发送一个事件
Cordova.exec(successFunction, failFunction, “YourPluginName”, “myMethod”, [“回调方法”]);。

参数	说明
successFunction	成功后的回调
failFunction	成功后的回调
YourPluginName（LogoutAndExit）	下方自定义的插件名称
myMethod（action_logout_exit）	与OC该插件类中的方法名保持一致
parameter	回调传递的参数

1. 在Plugins下创建OC插件类，这里以我们项目中的退出登录的事件为例，创建了一个CDVLogout类
CDVLogout类，类定义一个方法，此方法的方法名要与html中此按钮的点击事件下定义的方法名保持一致
方法内部就可以写你收到html的点击通知以后想要在原生上做的事情

#import <Foundation/Foundation.h>
//#import <Cordova/Cordova.h>
#import <Cordova/CDVPlugin.h>

@interface CDVLogout : CDVPlugin

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

@end

在config.xml文件中加入插件引用

<feature name="LogoutAndExit">
        <param name="ios-package" value="CDVLogout" />
        <param name="onload" value="true" />
    </feature>

LogoutAndExit: html中定义的插件名称
CDVLogout: OC原生插件类

OK，至此该有的配置和代码都有了，应该就能测试了，因为代码里面涉及公司信息，所以不贴代码了

在cordova_plugins.js中引入自定义插件

cordova.define('cordova/plugin_list', function(require, exports, module) {
    module.exports = [
      /*file:js文件路径
       id:对应某插件中的某个具体功能
       clobbers:js通过它去调用js插件中具体的方法
       */
      {
          "file": "plugins/org.apache.cordova.logoutandexit/www/LogoutAndExit.js",
          "id": "org.apache.cordova.logoutandexit.LogoutAndExit",
          "clobbers": [
                       "window.logoutandexit"
                       ]
      },
   ];
    module.exports.metadata =
    // TOP OF METADATA
    {
        "cordova-plugin-whitelist": "1.3.1",
        "org.apache.cordova.logoutandexit": "0.1.0",
    };
    // BOTTOM OF METADATA
});