脑子不好，记录一下

环境配置

• 配置 node.js 环境下载地址： https://nodejs.org/en/
  查看是否安转 node 环境 node --version

gaochongyang:~ enmonster$ node --version
v14.5.0

• 使用 node.js 的依赖包管理工具 npm 进行cordova 的安装
  安装 $ sudo npm install -g cordova
  卸载 sudo npm uninstall cordova -g
  查看是否安转 cordova --version

gaochongyang:~ enmonster$ cordova --version
9.0.0 (cordova-lib@9.0.1)

新建项目

方式一

• 命令cordova create cordovaDemo 直接创建一个文件夹为 cordovaDemo

创建一

创建完成后，目录结构如下：

目录结构

方式二

• 命令 cordova create gao com.constyang.www cordovaTest创建一个文件夹为gao APPID 为com.constyang.www 项目工程为cordovaTest

创建完成后，目录结构如下：

创建二

• hooks：存放自定义 cordova 命令的脚本文件。每个 project 命令都可以定义 before 和 after 的 Hook ，比如 before_build、after_build。没用过，不展开了。
• platforms：平台目录，各自的平台代码就放在这里，可以放一下平台专属的代码，现在这个目录应该是空的。
• plugins：插件目录，安装的插件会放在这里。
• www：最重要的目录，存放项目主题的 HTML5 和 JS 代码的目录。app 一开始打开的就是这个目录中 index.html 文件。
• config.xml：主要是cordova的一些配置，比如：项目使用了哪些插件、应用图标icon和启动页面 SplashScreen，修改 app 的版本，名字等信息，还有平台的配置。

添加平台

在我们刚才创建好的cordovaDemo文件目录下，为我们的 cordova 添加适用平台
cordova 适用的平台 cordova platform add ios / amazon-fireos / android / blackberry10 / firefoxos / wp8 / windows8 / amazon-fireos

命令 cordova platform add ios

添加iOS平台

查看已安装平台

• 命令 cordova platform ls

已安装平台

运行项目

我们可以使用 命令build ios
也可以使用 目录中 找到 platforms>ios>HtoolCordova.xcworkspace 运行

项目目录

运行结果

运行项目

在原有 iOS 项目中开发

此处使用的是手动集成，也可以使用 cocoapods 集成

• 原有的 APP 项目

原有的Xcode项目

在原有的 APP 中配置 cordova 环境

• cordova 文件配置，把我们上面生成的 cordova 项目中的对应的文件 拷贝到我们原有的工程目录中。

配置文件

1、添加 cordova.xcodeproj 到 原有的APP 项目中。

添加xcodeproj

2、添加 www 目录到工程中，记得此处使用 create folder references。

添加www文件

3、添加 config.xml 到工程中。

添加config.xml

4、选择工程的Build Settings->Other Links, 设置-Objc -all_load

otherlink配置

5、添加 Build Phases-> Link Binary With Librarys添加libCordova.a, MobileCoreServices,AssetsLibrary

添加framework

此时编译下原有的 APP 查看有没有报错。

调试添加的 cordova

我们创建一个webviewViewController 继承自 CDVViewController,
运行可能会报错，我们需要把头文件修改成 #import <Cordova/CDV.h> 即可

#import <Cordova/CDV.h>

NS_ASSUME_NONNULL_BEGIN

@interface WebviewViewController : CDVViewController

@end

@implementation WebviewViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    button.backgroundColor = [UIColor redColor];
    [button addTarget:self action:@selector(jumpWebviewVC) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)jumpWebviewVC {
    WebviewViewController *vc = [[WebviewViewController alloc] init];

    [self.navigationController pushViewController:vc animated:YES];
}
@end

运行此时的APP，我们会去加载www文件夹中的index.html文件

运行结果

如果我们需要访问外部链接，需要在我们的viewWillAppear中添加 请求

@implementation WebviewViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    
    NSURLRequest *rq = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]];
    
    [self.webViewEngine loadRequest:rq];
    
}
@end

此时便可以访问外部链接，但是不在在内部APP访问，而是跳转到 手机的浏览器，修改我们上面导入的config.xml文件即可，在内部访问URL。

    <allow-navigation href="https://*/*" />
    <allow-navigation href="http://*/*"  />

运行结果如下

访问外部链接

插件开发