个人原创地址：https://www.jianshu.com/p/1ad536e76640
### 1.需求与使用场景
  打开一个新页面，要求能够加载本地zip格式的h5应用，该应用使用了某些原生能力；能够加载远程应用，该应用也使用了部分原生能力；能够在多个h5应用时同样适用；h5应用能够移植到其它场景，如web、第三方移动应用；h5应用无需复杂适配移动端，如android、iOS等；
### 2.目的
  让h5应用只专注于开发h5，涉及到原生功能，则交给原生应用去实现，通过cordova js功能进行h5与原生功能的交互。
### 3.前提
  需要3个应用，如下所示
* h5应用:前端开发者只专注于前端开发和打包应用，应支持ionic、vue、react等应用
* cordova应用:原生开发者创建，将cordova插件安装到cordova应用中，并生成对应的platforms即android、iOS
* 原生应用:原生开发者创建，iOS应用通过pod引入cordova插件，并将config.xml 通过group 方式添加，www则以文件夹folder的形式引入,即config.xml相对路径引入，www绝对路径引入;
对以上3个应用的解读:
> -- h5应用，正常的前端应用，若使用js则无需声明，若使用ts则需要声明 `declare let cordova: any;`全局变量
>
> -- cordova应用，目的是将config.xml文件和platforms/android/www、platforms/ios/www文件夹copy出来备用。将其归为原生开发者创建范畴，是因为cordova.js通过exec来调用原生插件，将插件的管理交给原生应用。
>
> -- 原生应用，管理插件，提供对应的原生能力。若使用cordova.exec方式交互(推荐)，则将config.xml和www/cordova.js引入；若使用js service方式交互，则h5应用需要导入npm包，cordova应用添加插件，并将platforms/./www文件夹copy出来，放到原生应用下.
### 4. 原生部分
h5应用部分省略不表，原生部分以iOS为例
***4.1 如何创建cordova项目***
* 在mac上，安装node,再在terminal中npm install -g cordova@lastest；
* 创建应用`cordova create myApp org.apache.cordova.myApp myApp`
* 项目目录下`cd myApp`
* 安装插件`cordova plugin add cordova-plugin-camera`
* 生成iOS应用 `cordova platform add ios`
* cordova应用下的config.xml和platforms/ios/www是我们需要用到的
4.2 由于UIWebView有缺陷以及不再维护，并且官方推荐使用WKWebView，所以以WKWebView为例，进行$\color{#FF7F50}{config.xml}$的修改以及$\color{#FF7F50}{cordova-plugin-wkwebview-engine}$的简单使用的讲解
***4.2.1 config.xml的修改***
1. 允许远程网页加载 ATS
```
<content src="index.html" />是本地加载的入口，也可设置远程地址
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="data:*" />
```
以上三行等价于
```
<allow-navigation href="*" /> 允许所有的网址跳转。
```
2. 白名单设置
```
<access origin="*" /> 设置白名单，允许访问所有域
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="*" /> 等价于以上两行
```
3. 偏好设置
`<preference name="StatusBarStyle" value="lightcontent" />`
4. feature功能引入，以便cordova.js识别
```
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
```
添加后，cordova.exec才可以正确找到对应的原生文件,如`cordova.exec(success, failed, 'Camera', 'getPicker',[参数])`
5. 插件添加
```
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.2.0" />
<plugin name="cordova-plugin-camera" spec="^4.1.0" />
<plugin name="cordova-plugin-device" spec="^2.0.3" />
```
6. info.plist文件添加私有权限
***4.2.2 wkwebviewengine的简单使用***
先决条件:
* iOS原生应用pod 引入cordova以及插件
* 新建继承自CDVViewController的ViewController，如HtmlViewController
1. 简单的本地加载
cordova加载本地自己的h5应用，需要在HtmlViewController初始化init的地方修改startPage，一定要在viewDidLoad之前；
原因在于CDVViewController源码会在viewDidLoad的地方调用了与网页相关的三个方法：
`- loadSetting`、`- createGapView`、`- appUrl`，并设置了默认appUrl;
适用场景:
在应用内下载了zip格式的h5应用后，将其保存并解压，再将工程目录下的www文件夹copy到应用程序内，并将h5应用替换(不是合并)对应文件，如替换www/index.html，即将www/cordova_plugins.js、www/cordova-js-src、www/cordova.js、www/plugins copy到h5应用下。
2. 加载远程应用
uiwebview:只需要设置下 self.startPage为远程地址即可；
需要注意的地方:
> self.startPage的赋值，必须在[super viewDidLoad]之前，否则self.startPage 会被默认赋值为index.html。
> 需要在config.xml中修改一下配置，否则加载远程H5时，会自动打开浏览器加载。
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*" />
> 远程H5中也要引用cordova.js文件。
> 在 info.plist 中添加 App Transport Security Setting的设置。
wkwebviewengine貌似则不能这样，我试了几次均不行，所以采用了以下方法:
pod 引入cordova-plugin-wkwebview-engine
修改HtmlViewController.h
```
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
@interface HtmlViewController : CDVViewController
@end
@interface CustomWKCommandDelegate: CDVCommandDelegateImpl // 核心指令
@end
@interface CustomCmdQueue : CDVCommandQueue
@end
```
HtmlViewController.m修改添加内容
```
#import <WebKit/WebKit.h>
@interface HtmlViewController ()<WKNavigationDelegate>
@end
@implementation CustomWKWebViewController
- (id)init {
self = [super init];
if (self) {
// 重写CDVCommandDelegate
_commandDelegate = [[CustomWKCommandDelegate alloc] initWithViewController:self];
_commandQueue = [[CustomCmdQueue alloc] initWithViewController:self];
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
// 由于支持滑动返回，导航栏可以隐藏了
[self.navigationController setNavigationBarHidden:YES animated:NO];
// 使用驱动器加载
[self.webViewEngine loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"] cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:20]];
}
// 处理跨域等情况建议使用nginx
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
// 不能跨域的进行单独处理
NSURL *url = navigationAction.request.URL;
if ([url.scheme isEqualToString:@"域名"]) {
//在取消跨域请求之前，自定义处理，如使用safari浏览器打开网页，若带参数，则将其进行拼接
NSDictionary *param = nil;
if (@available(iOS 10.0, *)) {
[[UIApplication sharedApplication] openURL:url options:param completionHandler:^(BOOL success) {
}];
} else {
// Fallback on earlier versions
[[UIApplication sharedApplication] openURL:url];
}
decisionHandler(WKNavigationActionPolicyCancel);// web view取消本次
} else {
decisionHandler(WKNavigationActionPolicyAllow);
}
}
@end
@implementation CustomWKCommandDelegate
//- (id)initWithViewController:(CDVViewController *)viewController {
// self = [super initWithViewController:viewController];
// if (self) {
// self.viewController = viewController;
// }
// return self;
//}
- (id)getCommandInstance:(NSString *)pluginName {
return [super getCommandInstance:pluginName];
}
// 重写资源路径的方法,进行拦截
- (NSString *)pathForResource:(NSString *)resourcepath {
// if (<#condition#>) {
// <#statements#>
// }
NSLog(@"path ---> %@", resourcepath);
return [super pathForResource:resourcepath];
}
@end
@implementation CustomCmdQueue
- (BOOL)execute:(CDVInvokedUrlCommand *)command {
return [super execute:command];
}
@end
```
这样写的原因，在于CDVViewController会自动加载CDVWKWebViewEngine并自动实现WKUIDelegate，在wkwebview的代理函数中，实现自己的业务逻辑.
适用场景:本地h5应用、html字符串、远程应用(如果较少的www文件，可采用wkwebview预加载，提升加载速度)
### 关于自定义插件部分:
原有插件不能满足需求，需要自定义
新建集成自CDVPLugin的原生类
修改原生类.h和.m，实现相应函数，
修改config.xml，将自定义插件以feature添加进去
js通过cordova.exec的方式调用
建议将插件以pod的方式引入，方便管理，这就涉及到[Podfile语法](https://www.jianshu.com/p/f841e248bc4f)了
### 持续优化:
webview预加载、js\css\image离线缓存、避免无用的js引入;