已有iOS项目集成cordova并使用wkwebview

搜索cordova集成,教程很多.不过需要依赖CordovaLib.xcodeproj工程的也就是说必须要导入相关的工程以及文件，笔者很讨厌这种方法,步骤比较多,感觉很繁琐.想通过cocoapod集成可以省很多事.
本文在已有的iOS项目集成cordova, 并使用wkwebview为例,以及集成摄像头功能.[demo地址https://github.com/AblerSong/cordovaDemo.git ],

最终效果图

----- 本教程是反复试验,最精简,最简单的集成方式

1.创建一个新的cordova项目,走第1步之前,建议从零创建一个cordova项目熟练一下,命令如下

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

//添加相机和wkwebview插件
cordova plugin add cordova-plugin-wkwebview-engine
cordova plugin add cordova-plugin-camera

2.,创建一个新的iOS项目,并使用cocoapod(这里步骤就不说了), podfile文件如下,`pod install`

  pod 'Cordova'
#相机插件
  pod 'cordova-plugin-camera'
#wkwebview插件
  pod 'cordova-plugin-wkwebview-engine'

3.注意(2)podfile文件里面的插件和(1)里面的插件对应,

将(cordova项目)下面两个标记出来的文件和文件夹移动到(iOS项目)中,注意是(cordova项目)/platforms/ios文件夹下面的

cordova项目中需要的文件www文件夹和config.xml

image.png

向项目中添加文件

4.`bug1`,界面跳转无反应,如果跳转到Safari打开页面或者控制器加载页面无反应

在config.xml文件中添加,

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

bug2// cordova生成的index.html下面这句话需要注释掉,不然相机,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.访问远程界面

.h和.m文件如下

@interface MainViewController : CDVViewController
@end

#import "MainViewController.h"
@implementation MainViewController
- (instancetype)init
{
    self = [super init];
    if (self) {
        // 不要在wwwFolderName设置url,原因是URL地址会被拼接,导致实际访问地址错误,拼接之后地址如下
        // [NSURL URLWithString:[NSString stringWithFormat:@"%@/%@", self.wwwFolderName, self.startPage]];
        self.wwwFolderName = @"";
        self.startPage = @"https://www.baidu.com";
    }
    return self;
}
@end

最后编辑于：2019.11.11 10:17:15