Cordova集成笔记(for iOS)

原创 2017年02月13日 10:55:09

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

Mac机上Cordova环境配置

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

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

在iOS项目中集成Cordova

  1. 直接新建一个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
  1. 在config.xml文件中加入插件引用
<feature name="LogoutAndExit">
        <param name="ios-package" value="CDVLogout" />
        <param name="onload" value="true" />
    </feature>

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

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

  1. 在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
});

其他:

  1. 常见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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

cordova实际使用总结

新入职安卓开发,遇到的第一个任务是优化之前的一个hybird项目,cordova+jquerymobile,cordova目前版本是6.3.0,很多以前的文章都不能解决实际开发中遇到的问题,特地总结此...

Android项目里集成Cordova详解

自定义cordova插件;Android studio环境下将CordovaLib作为依赖导入;自定义Cordova插件;cordova自定义java类中的一些问题;在CordovaActivity中...

如何在原生工程中引入Cordova工程

如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cordova工程引进到原生工程中。那么该如何操作呢?下面就来描述一下步骤。 1、首先我们来创建一个Cordova工程,...

如何在原有的iOS项目中添加cordova

之前在网上查找过一些关于如何在iOS程序中添加cordova的例子,自己今天也总结一下。 1.    安装node.js命令 :node.js brew installnode 2.    安装co...

cordova ios升级插件

org.ssgroup.sope.cordova.upgrade 支持强制升级与选择升级 插件已经开源在https://github.com/shenshouer/org.ssgr...

升级iOS8之后,cordova DatePicker插件的bug

升级到iOS8之后,通过cordova的DatePicker插件弹出UID
  • kyfxbl
  • kyfxbl
  • 2014年10月18日 11:03
  • 1745

cordova使用iOS封装组件

很多跨平台开发的项目,会希望通过cordova插件调用iOS的原生API,实现JS与OC 的通信,集成iOS的一些相关功能。网上查了一些资料,再加上自己的理解,将一些心得分享给大家。下面将以调用系...
  • jks456
  • jks456
  • 2017年04月07日 13:53
  • 540

iOS 集成 Cordova(phoneGap ) 注意事项

(一)集成步骤      1、直接拖拽project 文件到父级文件(不能直接拖文件夹)      2、修改Other Linker Flags 中的引用 (根据自动生成的项目,复制成一样...

如何创建iOS环境下的cordova插件,让其运用到iOS项目中

很多跨平台开发的项目,会希望通过cordova插件调用iOS的原生API,实现JS与OC 的通信,集成iOS的一些相关功能。网上查了一些资料,再加上自己的理解,将一些心得分享给大家。下面将以调用系统相...

关于在已有项目中手动添加cordova插件

在用H5,或者说cordova做开发的时候,不可避免的要增加新的插件,因为需求总变更啊,这一点长期和需求斗争的开发人员应该深有体会。关于在新项目中加插件,不再赘述,也很简单,困难的是在一个已有的项目中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Cordova集成笔记(for iOS)
举报原因:
原因补充:

(最多只允许输入30个字)