腦子不好，記錄一下

環(huán)境配置

• 配置 node.js 環(huán)境下載地址： https://nodejs.org/en/
  查看是否安轉(zhuǎn) node 環(huán)境 node --version

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

• 使用 node.js 的依賴包管理工具 npm 進行cordova 的安裝
  安裝 $ sudo npm install -g cordova
  卸載 sudo npm uninstall cordova -g
  查看是否安轉(zhuǎn) cordova --version

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

新建項目

方式一

• 命令cordova create cordovaDemo 直接創(chuàng)建一個文件夾為 cordovaDemo

創(chuàng)建一

創(chuàng)建完成后，目錄結構如下：

目錄結構

方式二

• 命令 cordova create gao com.constyang.www cordovaTest創(chuàng)建一個文件夾為gao APPID 為com.constyang.www 項目工程為cordovaTest

創(chuàng)建完成后，目錄結構如下：

創(chuàng)建二

• hooks：存放自定義 cordova 命令的腳本文件。每個 project 命令都可以定義 before 和 after 的 Hook ，比如 before_build、after_build。沒用過，不展開了。
• platforms：平臺目錄，各自的平臺代碼就放在這里，可以放一下平臺專屬的代碼，現(xiàn)在這個目錄應該是空的。
• plugins：插件目錄，安裝的插件會放在這里。
• www：最重要的目錄，存放項目主題的 HTML5 和 JS 代碼的目錄。app 一開始打開的就是這個目錄中 index.html 文件。
• config.xml：主要是cordova的一些配置，比如：項目使用了哪些插件、應用圖標icon和啟動頁面 SplashScreen，修改 app 的版本，名字等信息，還有平臺的配置。

添加平臺

在我們剛才創(chuàng)建好的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 項目中開發(fā)

此處使用的是手動集成，也可以使用 cocoapods 集成

• 原有的 APP 項目

原有的Xcode項目

在原有的 APP 中配置 cordova 環(huán)境

• 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 查看有沒有報錯。

調(diào)試添加的 cordova

我們創(chuàng)建一個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

此時便可以訪問外部鏈接，但是不在在內(nèi)部APP訪問，而是跳轉(zhuǎn)到 手機的瀏覽器，修改我們上面導入的config.xml文件即可，在內(nèi)部訪問URL。

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

運行結果如下

訪問外部鏈接

插件開發(fā)