Personal Original Address: https://www.jianshu.com/p/1ad536e76640
### 1. demand and usage scenarios
& emsp; & emsp; open a new page, requires the ability to load h5 apply local zip format, the application uses some of the native capacity; able to load a remote application, the application also uses part of the native capacity ; it can be similarly applied when a plurality of applications h5; h5 application portability to other scenes, such as Web, third party mobile applications; h5 application without complex movement end fitting, such as android, iOS other;
### 2. Objective
& emsp; & emsp; let h5 h5 application only focus on the development, related to the native function, will be given to native applications to achieve, h5 interact with native functions through cordova js function.
3. The premise ###
& emsp; & emsp; requires three applications as follows
* h5 application: only focus on the front end of the front end of the developer and the development of packaging applications, should be supported ionic, vue, react applications
* cordova Applications: Native Developer created, the plug will be installed cordova cordova application, and generate the corresponding platforms i.e. Android, iOS
* native application: native developers to create, iOS applications into cordova plugin POD, and by adding config.xml group mode, places WWW folder folder form is introduced, i.e. introducing config.xml relative path, an absolute path WWW introduced;
Interpretation of three or more applications:
> - H5 application, normal front-end application, the use js not declare if the use of ts need to declare `declare let cordova: any;` global variables
>
> - cordova application, the config.xml file object and platforms / android / www, platforms / ios / www folder backup copy out. It is classified as a category created original developers, because cordova.js to call native plugin exec, will manage plug-ins to native applications.
>
> - native applications, management plug-ins, providing a corresponding native ability. The use cordova.exec interact (recommended), then the config.xml and www / cordova.js introduced; The use of the interactive service mode js, the application needs to load h5 npm package, Cordova added widget application, and platforms /./ www folder copy it, put under the native application.
### 4. native part
h5 table application partially omitted, for example native part to iOS
*** 4.1 how to create a project cordova ***
* on mac, install node, and then in the terminal in npm install -g cordova @ lastest ;
* create application `cordova create myApp org.apache.cordova.myApp myApp`
under the project directory * cd myApp``
* plug the Add cordova-plugin cordova `plugin-camera`
* iOS application generates the Add ios` Platform cordova`
* cordova config.xml and platforms in the applications / ios / www is that we need to use
4.2 As the UIWebView flawed and no longer maintained, and the official recommended WKWebView, so to WKWebView an example, $ \ color {# FF7F50} { config.xml} $ modifications and $ \ color {# FF7F50} { cordova-plugin -wkwebview-engine} $ is used to explain the simple
*** 4.2.1 config.xml submissions ***
1. allow remote page load the ATS
`` `
<Content the src =" index.html "/> is loaded locally inlet may be provided remote address
<Navigation the allow-the href = "HTTPS: // * / *" />
<Navigation the allow-the href = "HTTP: // * / *" />
<Navigation the allow-the href = "Data: * "/>
` ``
least equivalent to three lines
`
<Navigation the allow-the href =" * "/> allow all URLs jump.
`
2. whitelist setting
`
<Access Origin = "*" /> white list, allow access to all fields
<Intent the allow-the href = "HTTP: // * / *" />
<Intent the allow-the href = "HTTPS: // * / *" />
<Intent the allow-the href = "*" /> is equivalent to more than two OK
`
3. preferences
` <by the preference name = "StatusBarStyle" value = "lightcontent" /> `
4. feature function introduced in order to identify cordova.js
`
<feature name = "Camera">
<param name = "iOS-Package" value = "CDVCamera" />
</ Feature>
`` `
after the addition, cordova.exec can find the correct corresponding native file, such as` cordova.exec (success, failed, ' Camera', 'getPicker ', [parameters]) `
5. Add plug
` ``
<plugin name = "Cordova-plugin-wkwebview-Engine" spec = "^ 1.2.0" />
<plugin name = "Cordova-plugin-Camera"= spec "^ 4.1.0" />
<plugin name = "Device-Cordova-plugin" spec = "^ 2.0.3" />
`` `
6. The Adding private Info.plist file permissions
Simple to use *** *** 4.2.2 wkwebviewengine of
prerequisites:
* iOS native application pod and plug-introduced cordova
* New inherited from CDVViewController of ViewController, such as HtmlViewController
1. simple local load
cordova load h5 own local applications that require where HtmlViewController modify the init initialization startPage, must be before viewDidLoad;
because CDVViewController source calls the three methods associated with the web page in place of viewDidLoad:
`- loadSetting`,` - createGapView`, `- appUrl`, and set the default appUrl;
Applicable scene:
After downloading the application h5 zip format within the application, save it and unpack, www file in the project directory folder and then copy into the application and application h5 replace (not consolidated) corresponding to the file, such as replacement www / index.html, is about to www / cordova_plugins.js, www / cordova- js-src, www / cordova.js, www / plugins copy to the next h5 application.
2. Load remote application
uiwebview: Just set under self.startPage remote address can;
caveats:
> assignment self.startPage must be before the [super viewDidLoad], otherwise self.startPage are implicitly assigned to index .html.
> Need to modify the configuration config.xml, otherwise when loading remote H5, will automatically open the browser loads.
<the allow-Navigation href = "HTTPS: // * / *" />
<the allow-Navigation href = "HTTP: // * / *" />
> Remote H5 also referenced in cordova.js file.
> Add App Transport Security Setting settings in the info.plist.
wkwebviewengine seemingly can not be so, I tried several times are not, so the use of the following methods:
POD introducing cordova-plugin-wkwebviewengine
modified HtmlViewController.h
`` `
#import <Cordova / CDVViewController.h>
#import <Cordova / CDVCommandDelegateImpl.h>
@interface HtmlViewController : CDVViewController
@end
@interface CustomWKCommandDelegate: CDVCommandDelegateImpl // core instruction
@end
@interface CustomCmdQueue : CDVCommandQueue
@end
`` `
HtmlViewController.m add content to modify
` ``
#import <the 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) the viewDidLoad {
[Super the viewDidLoad];
. Additional // Setup the any After loading the Do The View
// Since the slide support return, the navigation bar can be hidden
[self.navigationController setNavigationBarHidden: YES animated: NO ] ;
// use the drive load
[self.webViewEngine loadRequest: [NSURLRequest requestWithURL: [NSURL URLWithString: @ "https://www.baidu.com"] cachePolicy: NSURLRequestReloadIgnoringCacheData timeoutInterval: 20 is]];
}
Like the case of cross-domain // recommended Nginx
- (void) the webView: (WKWebView *) the webView decidePolicyForNavigationAction: (WKNavigationAction *) navigationAction the DecisionHandler: (void (^) (WKNavigationActionPolicy)) the DecisionHandler {
// not across domains treated separately
* = navigationAction.request.URL URL NSURL;
IF ([url.scheme as isEqualToString: @ "domain name"]) {
// before cross-domain request cancellation, custom processing, such as using safari web browser to open, if the parameters, then it is spliced
NSDictionary param * = nil;
IF (@available (the iOS 10.0, *)) {
[[sharedApplication the UIApplication] the openURL: URL Options: param CompletionHandler: ^ (BOOL Success) {
}];
} the else {
// Earlier versions ON fallback
[[sharedApplication the UIApplication] the openURL: URL];
}
the DecisionHandler (WKNavigationActionPolicyCancel); // cancel the 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 *) Plugin {
return [super getCommandInstance: Plugin];
}
// Method override resource paths, intercepting
- (NSString *) pathForResource: (NSString *) resourcePath {
// IF (<# for condition Condition #>) {
// <# statements #>
@}
NSLog (@ "path --->% @ ", resourcePath);
return [Super pathForResource: resourcePath];
}
@end
@implementation CustomCmdQueue
- (BOOL)execute:(CDVInvokedUrlCommand *)command {
return [super execute:command];
}
@end
`` `
The reason for this is written, that CDVViewController will automatically load CDVWKWebViewEngine and automatically WKUIDelegate, the proxy function wkwebview in and realize their business logic.
Applicable scene: Local h5 application, html string, remote application (if compared with www small files can be pre-loaded wkwebview improve loading speed)
About custom insert portion ###:
the original plug-in can not meet demand, it is necessary to customize
the new integrated self CDVPLugin native class
modifications .h and .m native class, to achieve the corresponding function,
modify the config.xml, custom plug-in feature added to it
js call by cordova.exec way
suggested that the introduction of plug-in to pod manner, easy management, which involves [Podfile grammar] (https://www.jianshu.com/p/f841e248bc4f) a
### continuous optimization:
Webview preload, js \ css \ image offline cache, avoiding useless js introduced;