Codava

一、安装Codava

• 安装nodeJs下载安装
• 安装codava sudo npm install -g cordova
• 新建项目(HelloWorld)cordova create HelloWorld
• 增加iOS平台cd HelloWorld cordova platform add iOS

二、项目集成Codava

• 创建swift项目CodavaWeb

• Codava库的复制

  • 将HelloWorld/platforms/iOS目录下cordova、CordovaLib、platform_www、www的CodavaWeb目录下
    第一步
  • 将HelloWorld/config.xml复制到CodavaWeb下
    第二部
  • 将HelloWorld/platforms/ios/HelloCordova/config.xml复制到CodavaWeb/CodavaWeb目录下
    第三步
  • 将HelloWorld/platforms/ios/HelloCordova/Scripts复制到CodavaWeb/CodavaWeb目录下
    第四步

• 文件添加

  • 使用Add Files To "CodavaWeb"添加CordovaLib/CordovaLib.xcodeproj
  • 使用Add Files To "CodavaWeb"添加CodavaWeb/CodavaWeb/config.xml
  • 使用Add Files To "CodavaWeb"添加www
    www

• 项目配置

  • 在Build Settings -> Other Linker Flags 中添加-ObjC -all_load
    
  • 在Build Phases -> Dependencies中添加"CordovaLib"
    
  • 在Build Phases -> Link Binary With Libraries中添加"libCordova.a"
    
  • 在Build Phases中新建"New Run Script Phases", 并改名为Copy www directory， 取消勾选show environment variables in build log
  • 修改内容为"$SRCROOT/CodavaWeb/Scripts/copy-www-build-step.sh"
    
  • 项目中添加桥接文件MySwiftProject-Bridging-Header.h

#ifndef MySwiftProject_Bridging_Header_h
#define MySwiftProject_Bridging_Header_h

#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
#import <Cordova/CDVCommandQueue.h>
#import <Cordova/CDVPlugin.h>

#endif /* MySwiftProject_Bridging_Header_h */

• 项目测试
  修改ViewController

class ViewController: CDVViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

运行结果

三、js调用原生

• 创建工具类TestPlugin，并实现test方法

@interface TestPlugin : CDVPlugin
- (void)test:(CDVInvokedUrlCommand *)command;
@end

• 在config.xml类中注册工具类

  <feature name="TestPlugin">
      <param name="ios-package" value="TestPlugin" />
  </feature>

• 方法调用

// 引入cordova
    <script type="text/javascript" src="cordova.js"></script>
  function getImage(){
//调用原生方法（TestPlugin类中的test方法，参数是"123"）
      Cordova.exec(successFunction, failedFunction, "TestPlugin","test", ["123"]);
  }
  function successFunction() {
      alert("成功调用原生方法的回调");
  }
  function failedFunction() {
      alert("失败调用的回调");
  }

四、原生调用js方法

• js实现原生方法

  function uploadData(str, code) {
      alert(str + ' , ' + code);
  }

• 原生调用js方法

class ViewController: CDVViewController {
    @objc func respondsToRightItem() {
        let js = "uploadData('图片', '123456')"
        self.commandDelegate.evalJs(js)
    }

   // 调用js方法，获取函数uploadData返回值（result）
    @objc func respondsToRightItem2() {
        self.webViewEngine.evaluateJavaScript("uploadData('aaa', 'bbb')") { (result, _) in
            print(result)
        }
    }
}

五、demo

demo

六、使用WKWebView

• 添加WKWebView插件 cordova plugin add cordova-plugin-wkwebview-engine
• 将HelloWorld/platforms/ios/HelloCordova/Plugins复制到CodavaWeb/CodavaWeb目录下
• 使用Add Files To "CodavaWeb"添加Plugins

七、错误问题

• 打包时提示'Cordova/CDVViewController.h' file not found

在Build Setting->Search Paths->Header Search Paths中加入
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
Debug和Release中都要加入