Cordova集成笔记（for iOS）

来源：互联网发布：淘宝买家一颗心编辑：程序博客网时间：2024/06/05 16:55

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});

其他：

常见Cordova终端命令

使用命令行工具，运行App的命令是：
cordova run

例如，我想在浏览器中运行 App，我就在终端里输入：
cordova run browser
然后，就会打开浏览器，就会运行App。

当然，如果我们想要在iOS 上运行 App,我们也可以输入：
cordova run ios
也可以到指定目录下打开iOS 工程文件

查看更多的关于运行App 的命令，可以输入 cordova help run。

附：相关文章
1.Cordova里一些常见的问题： http://blog.csdn.net/qy492019878/article/details/50894559
2.http://blog.csdn.net/hbl_for_android/article/details/51871029

0 0