Cordova平臺iOS開發(fā)

1. 使用node.js的依賴包管理工具npm進行Cordova的安裝

打開終端輸入如下命令：

sudo npm install -g cordova

題外話，有安裝就有卸載：

sudo npm uninstall cordova -g

1.png

2. 創(chuàng)建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 添加平臺
所有后續(xù)命令需要在項目的目錄中運行，其范圍內(nèi)或任何子目錄：

cd Desktop/ccc

在創(chuàng)建項目之前企巢，您需要指定一組目標平臺：

cordova platform add ios

2.3 迭代項目在ccc目錄中運行下面的命令來構(gòu)建項目：

cordova build

2.4 或指定生成iOS平臺的代碼項目：

cordova platform add ios

3.png

3 cordova項目

3.1 cordov 項目創(chuàng)建完成

4.png
3.2 Events Cordova聲明周期事件
deviceready 當Cordova加載完成會觸發(fā)
將index.html中的文本替換成如下文本：

<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
    // Now safe to use device APIs
    alert("onDeviceReady");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>

運行結(jié)果:

5.png

pause 當應(yīng)用程序進入到后臺會觸發(fā)
resumes 應(yīng)用程序從后臺進入到前臺會觸發(fā)

步驟: 替換 html 文本 -> 運行 iOS 程序-> 開發(fā)者調(diào)試 -> 模擬器進入后臺再進入前臺>

將index.html中的文本替換成如下文本：

<!DOCTYPE html>
<html>
<head>
<title>Pause Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
   document.addEventListener("resume", onResume, false);
}
// device APIs are available
//
function onDeviceReady() {
    document.addEventListener("pause", onPause, false);
}
// Handle the pause event
//
function onPause() {
     console.log("onPause");
}
// Handle the resume event
//
function onResume() {
     console.log("onResume");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>

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

cordova plugin add cordova-plugin-console

6.png

2> 實例
將index.html中的文本替換成如下文本：

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8">
   document.addEventListener("deviceready", onDeviceReady, false);
   function consoleLog(){
          console.log("console.log works well");
   }
  function consoleError(){
      console.error("console.error works well");
  }
  function consoleException(){
      console.exception("console.exception works well");
  }
  function consoleWarn(){
      console.warn("console.warn works well");
  }
  function consoleInfo(){
      console.info("console.info works well");
 }
  function consoleDebug(){
      console.debug("console.debug works well");
}
  function consoleAssert(){
      console.assert("console.assert works well");
}
  function consoleDir(){
      console.dir("console.dir works well");
  }
  function consoleDirxml(){
      console.dirxml("console.dirxml works well");
  }
  function consoleTime(){
      console.time("console.time works well");
  }
function consoleTimeEnd(){
      console.timeEnd("console.timeEnd works well");
    }
  function consoleTable(){
      console.table("console.table works well");
}
  </script>
  <style type="text/css">
      button {
          width: 200px;height:26px;font-size: 20px;padding: 1px;margin-left: 100px;
      }
  </style>
</head>
<body>
  <div ><br/><br/>
      <br/><button onclick="consoleLog()">consoleLog</button><br/>
      <br/><button onclick="consoleError()">consoleError</button><br/>
      <br/><button onclick="consoleException()">consoleException</button><br/>
      <br/><button onclick="consoleWarn()">consoleWarn</button><br/>
      <br/><button onclick="consoleInfo()">consoleInfo</button><br/>
      <br/> <button onclick="consoleDebug()">consoleDebug</button><br/>
      <br/><button onclick="consoleAssert()">consoleAssert</button><br/>
      <br/> <button onclick="consoleDir()">consoleDir</button><br/>
      <br/> <button onclick="consoleDirxml()">consoleDirxml</button><br/>
      <br/><button onclick="consoleTime()">consoleTime</button><br/>
      <br/><button onclick="consoleTimeEnd()">consoleTimeEnd</button><br/>
      <br/><button onclick="consoleTable()">consoleTable</button><br/>
  </div>
  </div>
</body>
</html>

運行結(jié)果:

7.png

4 自定義插件(在 web端調(diào)用 oc 原生代碼)

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

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

如圖:

8.png

4.1 創(chuàng)建一個XMFPlugin類, 實現(xiàn)下面的方法
(1) XMFPlugin.h 的實現(xiàn)

#import <Cordova/CDVPlugin.h>

@interface Plugin2 : CDVPlugin

// 本類插件方法 - 當在web調(diào)用時
- (void)YouMethod:(CDVInvokedUrlCommand*)command;

@end

（2）XMFPlugin.m 的實現(xiàn)

#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文件如下

<!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" src="jquery.min.js"></script>
        <script type="text/javascript">
            document.addEventListener("deviceready", yourCallbackFunction, false);

            function skip(){
                Cordova.exec(successFunction, failFunction, "Plugin2", "YouMethod", ["跳轉(zhuǎn)"]);
            }
        
        function failFunction(error){
            alert("error");
            document.getElementById("returnValue").value = img;
        }
        
        function successFunction(img){
            document.getElementById("returnValue").value = img;
            document.getElementById("2").innerHTML = "<img src='"+img+"' />"
        }
        
            </script>
        
    </head>
    
    <body>
        <p>點擊下面按鈕調(diào)用原生方法,跳轉(zhuǎn)到下個頁面</p>
        <button onclick="skip()">跳轉(zhuǎn)</button>
    </body>

</html>