项目最初使用的是flutter_webview_plugin这个插件，会出现paypal登录界面一直加载不出来的情况，后来使用了官方插件webview_flutter，就解决了这个问题，然后就改用成了这个插件。后面随着需求的增加，也遇到了一系列的问题（iOS上）。
修改webview_flutter代码的方法：
修改webview_flutter插件中的代码，如果只是修改了本地插件的代码，这样会有一些弊端：
- 插件升级之后，之前修改的代码被覆盖掉了。
- 一起合作的小伙伴同步代码很不方便。
所以会使用自己的插件地址来管理（这样也会有不好的地方是没有办法使自己的插件更新到官方插件的最新版本，fork的时候是什么版本，以后也会是什么版本）。
步骤：
- 找到webview_flutter插件的GitHub地址
- fork一份到自己的GitHub上生成一个新的地址
- 要修改这个插件的人clone到本地，如果没有权限需要获取权限
- 打开插件里面的example项目，可以对插件进行改造以及测试了
- 使用的时候，webview_flutter: git: git地址，不再是之前的webview_flutter: 版本号
问题1、webView内facebook登录界面不能跳转，只是刷新了当前界面。在浏览器上可以看见facebook登录是弹出了一个弹框，相当于又打开了一个新窗口，所以在app内WKWebview没有处理这种情况。
解决：
在FlutterWebView.m文件中实现WKWebview的UIDelegate的一个代理方法
//初始化方法里面添加
_webView.UIDelegate = self;
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
if (!navigationAction.targetFrame.isMainFrame && [navigationAction.request.URL.absoluteString hasPrefix:@"https://m.facebook"]) {
WKWebView *popup = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
popup.UIDelegate = self;
popup.navigationDelegate = _navigationDelegate;
[self.view addSubview:popup];
return popup;
}else if (navigationAction.targetFrame == nil){
[webView loadRequest:navigationAction.request];
}
return nil;
}
意思是当判断是facebook登录的时候，又创建了一个新的WKWebview覆盖在上面，解决了问题。
问题2：添加进度条：
-(void)showProgress{
[self->_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
UIView *progress = [[UIView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self->_webView.frame), 3)];
progress.backgroundColor = [UIColor clearColor];
[self->_webView addSubview:progress];
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(0, 0, 0, 3);
layer.backgroundColor = [[UIColor orangeColor] CGColor];
[progress.layer addSublayer:layer];
self->_progresslayer = layer;
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
if ([keyPath isEqualToString:@"estimatedProgress"]) {
_progresslayer.opacity = 1;
_progresslayer.frame = CGRectMake(0, 0, _webView.bounds.size.width * [change[@"new"] floatValue], 3);
if ([change[@"new"] floatValue] == 1) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self->_progresslayer.opacity = 0;
});
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self->_progresslayer.frame = CGRectMake(0, 0, 0, 3);
});
}
}else{
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
}
}
- (void)dealloc
{
[_webView removeObserver:self forKeyPath:@"estimatedProgress"];
}
问题3：添加类似于手机上Safari浏览器上的底部可以前进后退的工具条，并且当不可前进后退的时候，按钮显示灰色。遇到的问题是由于上面facebook登录时候的特殊处理，是在webview上又叠加了一个webview，前进后退就需要特殊处理。
添加底部工具条的代码，以及点击方法：
-(void)showToolbar{
UIWindow * window = [[UIApplication sharedApplication] windows].firstObject;
UIToolbar * toolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, _webView.frame.size.height, window.bounds.size.width, TOOBAR_HEIGHT)];
toolbar.translucent = NO;
[toolbar setAutoresizingMask:UIViewAutoresizingFlexibleTopMargin];
UIBarButtonItem * leftSpaceItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[leftSpaceItem setWidth:40.0];
// back button
UIBarButtonItem *backButton = [[UIBarButtonItem alloc]initWithImage:[[UIImage imageNamed:@"Slice-left-gray"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] style:UIBarButtonItemStylePlain target:self action:@selector(goBackClick)];
backButton.enabled = NO;
self.backButtonItem = backButton;
UIBarButtonItem * rightSpaceItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[rightSpaceItem setWidth:90.0];
// forward button
UIBarButtonItem *forwardButton = [[UIBarButtonItem alloc]initWithImage:[[UIImage imageNamed:@"Slice-right-gray"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] style:UIBarButtonItemStylePlain target:self action:@selector(goForwardClick)];
forwardButton.enabled = NO;
self.forwardButtonItem = forwardButton;
toolbar.items = @[leftSpaceItem,backButton,rightSpaceItem,forwardButton];
[self.view addSubview:toolbar];
_webView.toolBar = toolbar;
self.toolbar = toolbar;
}
-(void)goBackClick{
if([self.currentWebview canGoBack]){
WKNavigation * navigation = [self.currentWebview goBack];
if(navigation == nil){
[self.currentWebview reload];
}
}else{
if(self.currentWebview != _webView){
[self.currentWebview removeFromSuperview];
self.currentIndex--;
if(self.currentIndex >= 0){
self.currentWebview = self.webviewArr[self.currentIndex];
}
if(self.forwardButtonItem.enabled == NO){
self.forwardButtonItem.enabled = YES;
self.forwardButtonItem.image = [[UIImage imageNamed:@"Slice-right"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
self.backButtonItem.enabled = [self.currentWebview canGoBack];
self.backButtonItem.image = [self.currentWebview canGoBack] ? [[UIImage imageNamed:@"Slice-left"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] : [[UIImage imageNamed:@"Slice-left-gray"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
}
}
-(void)goForwardClick{
if([self.currentWebview canGoForward]){
WKNavigation * navigation = [self.currentWebview goForward];
if(navigation == nil){
[self.currentWebview reload];
}
}else{
if(self.currentIndex+1 < self.webviewArr.count){
self.currentIndex++;
[self.view addSubview:self.webviewArr[self.currentIndex]];
[self.view bringSubviewToFront:self.toolbar];
self.currentWebview = self.webviewArr[self.currentIndex];
if(self.backButtonItem.enabled == NO){
self.backButtonItem.enabled = YES;
self.backButtonItem.image = [[UIImage imageNamed:@"Slice-left"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
self.forwardButtonItem.enabled = [self.currentWebview canGoForward];
self.forwardButtonItem.image = [self.currentWebview canGoForward] ? [[UIImage imageNamed:@"Slice-right"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] : [[UIImage imageNamed:@"Slice-right-gray"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
}
}
解决的思路是，将所有的webView添加到一个数组中，记录下来，并且把当前的webView的index也记录下来，根据当前的index和webView的数量之间的关系，判断是否可以前进，重新添加或移除上面覆盖的webView。
还要做一些特殊的处理，当点击webvVew上的某个地方，比如打开facebook，就会创建一个新的webView覆盖在上面，点击回退，移除这个webView，再点击界面上的一个链接跳转一个界面（还是在该webView内），这个时候是不是就需要将那个新建的webView,从数组中移除掉了。
在createWebViewWithConfiguration代理方法中添加代码：
[self.view bringSubviewToFront:self.toolbar];
if (self.currentIndex+1 < self.webviewArr.count) {
[self.webviewArr removeObjectsInRange:NSMakeRange(self.currentIndex+1, self.webviewArr.count-1-self.currentIndex)];
}
self.currentWebview = popup;
self.currentIndex++;
if (self.backButtonItem.enabled == NO) {
self.backButtonItem.enabled = YES;
self.backButtonItem.image = [[UIImage imageNamed:@"Slice-left"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
还有一个地方需要移除，监听webView请求的代理方法，由于插件里面navigationDelegate指向的是FLTWKNavigationDelegate类，需要拿到这个里面decidePolicyForNavigationAction代理方法的回调。
_navigationDelegate = [[FLTWKNavigationDelegate alloc] initWithChannel:_channel];
_navigationDelegate.delegate = self;
_webView.navigationDelegate = _navigationDelegate;
所以会在FLTWKNavigationDelegate中写一个代理方法，通知FLTWebViewController这个类，每次请求都会触发这个方法。回调方法代码：
-(void)requstWithAction:(WKNavigationAction*)action{
if(action.targetFrame && !action.targetFrame.isMainFrame && action.sourceFrame.isMainFrame && action.navigationType != WKNavigationTypeBackForward){
if (self.currentIndex+1 < self.webviewArr.count) {
[self.webviewArr removeObjectsInRange:NSMakeRange(self.currentIndex+1, self.webviewArr.count-1-self.currentIndex)];
}
}
}
监听webView是否可以前进和后退，最开始的思路是在点击前进后退按钮的点击方法中实现，但是这样处理是不准确的，所以使用kvo方法实现：
//初始化方法中添加
[self->_webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];
[self->_webView addObserver:self forKeyPath:@"canGoForward" options:NSKeyValueObservingOptionNew context:nil];
//监听回调方法中添加
if([keyPath isEqualToString:@"canGoBack"]){
BOOL isCanGoBack = [change[@"new"] boolValue];
if (self.currentWebview != _webView) {
isCanGoBack = YES;
}
self.backButtonItem.enabled = isCanGoBack;
self.backButtonItem.image = isCanGoBack ? [[UIImage imageNamed:@"Slice-left"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] : [[UIImage imageNamed:@"Slice-left-gray"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}else if([keyPath isEqualToString:@"canGoForward"]){
BOOL isCanForward = [change[@"new"] boolValue];
if (self.currentIndex < self.webviewArr.count-1) {
isCanForward = YES;
}
self.forwardButtonItem.enabled = isCanForward;
self.forwardButtonItem.image = isCanForward ? [[UIImage imageNamed:@"Slice-right"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] : [[UIImage imageNamed:@"Slice-right-gray"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
一些特殊的处理上面的代码中已经涵盖了
问题4：工具栏挡住了webView底部的内容
需要将webView的高度减少一个工具栏的高度，工具栏顶端为webView的最底端。
但是发现没有设置webView的frame的地方，初始化方法传进来的frame也是0,0,0,0，webView的大小是根据flutter的代码来确定的，又不能改flutter代码，不是在控制器里面，不能明确知道webView初始化完成的具体时间，所以只能监听webView的frame的改变了，但是在监听回调方法中再设置frame的话，会造成死循环，所以做了以下处理：
//初始化方法里面添加
[self->_webView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
if([keyPath isEqualToString:@"frame"]){
CGRect rect = [change[@"new"] CGRectValue];
if (rect.size.height > 0 && self.isFirstInvoke == YES) {
self.isFirstInvoke = NO;
CGRect newRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height-TOOBAR_HEIGHT);
_webView.frame = newRect;
}
}
这样处理完之后发现会出现一个问题，工具栏上的前进后退按钮不响应了，是因为超出了父控件的点击区域，所以创建了WKWebview子类，在子类中处理点击区域：
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
if (!CGRectContainsPoint(self.bounds, point)) {
CGPoint newPoint = [self convertPoint:point toView:self.toolBar];
if (CGRectContainsPoint(self.toolBar.bounds, newPoint)) {
return YES;
}
return NO;
}
return YES;
}
至此，这就是我开发中遇到的几个问题了，希望对你们有所帮助哦。