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

个人原创地址：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为例，进行config.xml的修改以及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,加载wkwebview的代理
        _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预加载，提升加载速度)

5. 关于自定义插件部分
原有插件不能满足需求，需要自定义，大致流程为:

• 新建集成自CDVPLugin的原生类
• 修改原生类.h和.m，实现相应函数，
• 修改config.xml，将自定义插件以feature添加进去
• js通过cordova.exec的方式调用

建议将插件以pod的方式引入，方便管理，这就涉及到Podfile语法了

6. 持续优化:
webview预加载、js\css\image离线缓存、避免无用的js引入;