Cordova平台iOS开发

1. 使用node.js的依赖包管理工具npm进行Cordova的安装

打开终端输入如下命令：

sudo npm install -g cordova  

题外话，有安装就有卸载：

sudo npm uninstall cordova -g

1.png

2. 创建Cordova的项目

• 2.1 1新建一个Cordova的项目

cordova create hello com.example.hello HelloWorld [--template templatePath]

cordova create ccc com.example.ccc CCC

2.png

• 2.2 添加平台
  所有后续命令需要在项目的目录中运行，其范围内或任何子目录：

cd Desktop/ccc

在创建项目之前，您需要指定一组目标平台：

cordova platform add ios

• 2.3 迭代项目 在ccc目录中运行下面的命令来构建项目：

cordova build

• 2.4 或指定生成iOS平台的代码项目：

cordova platform add ios

3.png

3 cordova项目

• 3.1 cordov 项目创建完成

  
  
  4.png
• 3.2 Events Cordova声明周期事件
• deviceready 当Cordova加载完成会触发
  将index.html中的文本替换成如下文本：

运行结果:

5.png

• pause 当应用程序进入到后台会触发
• resumes 应用程序从后台进入到前台会触发

步骤: 替换 html 文本 -> 运行 iOS 程序-> 开发者调试 -> 模拟器进入后台再进入前台>

将index.html中的文本替换成如下文本：

• 3.3 Plugin APIs
  cordova-plugin-console Cordova Console Plugin
  1> 安装

cordova plugin add cordova-plugin-console

6.png

2> 实例
将index.html中的文本替换成如下文本：

  
  
  
  


  



      
consoleLog

      
consoleError

      
consoleException

      
consoleWarn

      
consoleInfo

      
 consoleDebug

      
consoleAssert

      
 consoleDir

      
 consoleDirxml

      
consoleTime

      
consoleTimeEnd

      
consoleTable

  
  

运行结果:

7.png

4 自定义插件(在 web端调用 oc 原生代码)

• 4.1 在config.xml文件中加入下面代码：

如图:

8.png

• 4.1 创建一个XMFPlugin类, 实现下面的方法
  (1) XMFPlugin.h 的实现

#import 

@interface Plugin2 : CDVPlugin

// 本类插件方法 - 当在web调用时
- (void)YouMethod:(CDVInvokedUrlCommand*)command;

@end

（2）XMFPlugin.m 的实现

#import "Plugin2.h"

@implementation Plugin2

- (void)YouMethod:(CDVInvokedUrlCommand*)command{
    
    NSLog(@"%@",command.methodName);
    
    UIViewController *vc = [[UIViewController alloc] init];
    
    UIButton *cancelBtn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 30)];
    [cancelBtn setTitle:@"返回" forState:UIControlStateNormal];
    [cancelBtn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
    
    [vc.view addSubview:cancelBtn];
    
    [self.viewController presentViewController:vc animated:YES completion:^{
        vc.view.backgroundColor = [UIColor redColor];
    }];
}

- (void)back{
    [self.viewController dismissViewControllerAnimated:YES completion:nil];
}

（3）编写index.html文件如下

    
        
        
        
        
        
        
        
    
    
    
        
点击下面按钮调用原生方法,跳转到下个页面
        跳转