搜索cordova集成,教程很多.不過需要依賴CordovaLib.xcodeproj工程的也就是說必須要導(dǎo)入相關(guān)的工程以及文件，筆者很討厭這種方法,步驟比較多,感覺很繁瑣.想通過cocoapod集成可以省很多事.
本文在已有的iOS項(xiàng)目集成cordova, 并使用wkwebview為例,以及集成攝像頭功能.[demo地址https://github.com/AblerSong/cordovaDemo.git ],

最終效果圖

----- 本教程是反復(fù)試驗(yàn),最精簡,最簡單的集成方式

1.創(chuàng)建一個新的cordova項(xiàng)目,走第1步之前,建議從零創(chuàng)建一個cordova項(xiàng)目熟練一下,命令如下

cordova create Demo com.cordova.demo.hello HelloWorld 
cd Demo
cordova platform add ios

//添加相機(jī)和wkwebview插件
cordova plugin add cordova-plugin-wkwebview-engine
cordova plugin add cordova-plugin-camera

2.,創(chuàng)建一個新的iOS項(xiàng)目,并使用cocoapod(這里步驟就不說了), podfile文件如下,pod install

  pod 'Cordova'
#相機(jī)插件
  pod 'cordova-plugin-camera'
#wkwebview插件
  pod 'cordova-plugin-wkwebview-engine'

3.注意(2)podfile文件里面的插件和(1)里面的插件對應(yīng),

將(cordova項(xiàng)目)下面兩個標(biāo)記出來的文件和文件夾移動到(iOS項(xiàng)目)中,注意是(cordova項(xiàng)目)/platforms/ios文件夾下面的

cordova項(xiàng)目中需要的文件www文件夾和config.xml

image.png

向項(xiàng)目中添加文件

4.bug1,界面跳轉(zhuǎn)無反應(yīng),如果跳轉(zhuǎn)到Safari打開頁面或者控制器加載頁面無反應(yīng)

在config.xml文件中添加,

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

bug2// cordova生成的index.html下面這句話需要注釋掉,不然相機(jī),alert彈框等等無法生效

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

5.訪問遠(yuǎn)程界面

.h和.m文件如下

@interface MainViewController : CDVViewController
@end

#import "MainViewController.h"
@implementation MainViewController
- (instancetype)init
{
    self = [super init];
    if (self) {
        // 不要在wwwFolderName設(shè)置url,原因是URL地址會被拼接,導(dǎo)致實(shí)際訪問地址錯誤,拼接之后地址如下
        // [NSURL URLWithString:[NSString stringWithFormat:@"%@/%@", self.wwwFolderName, self.startPage]];
        self.wwwFolderName = @"";
        self.startPage = @"https://www.baidu.com";
    }
    return self;
}
@end