原生应用使用cordova并与h5应用分离

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为例，进行的修改以及的简单使用的讲解
4.2.1 config.xml的修改

1. 允许远程网页加载 ATS

是本地加载的入口，也可设置远程地址

以上三行等价于

  允许所有的网址跳转。

2. 白名单设置

 设置白名单，允许访问所有域



 等价于以上两行

3. 偏好设置
   
4. feature功能引入，以便cordova.js识别

添加后，cordova.exec才可以正确找到对应的原生文件,如cordova.exec(success, failed, 'Camera', 'getPicker',[参数])

5. 插件添加

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时，会自动打开浏览器加载。


远程H5中也要引用cordova.js文件。
在 info.plist 中添加 App Transport Security Setting的设置。
wkwebviewengine貌似则不能这样，我试了几次均不行，所以采用了以下方法:
pod 引入cordova-plugin-wkwebview-engine
修改HtmlViewController.h

#import 
#import 

@interface HtmlViewController : CDVViewController

@end

@interface CustomWKCommandDelegate: CDVCommandDelegateImpl // 核心指令

@end

@interface CustomCmdQueue : CDVCommandQueue

@end

HtmlViewController.m修改添加内容

#import 
@interface HtmlViewController ()

@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语法了

持续优化:

webview预加载、js\css\image离线缓存、避免无用的js引入;