flutter 插件webview_flutter一系列問(wèn)題總結(jié)

項(xiàng)目最初使用的是flutter_webview_plugin這個(gè)插件，會(huì)出現(xiàn)paypal登錄界面一直加載不出來(lái)的情況，后來(lái)使用了官方插件webview_flutter，就解決了這個(gè)問(wèn)題，然后就改用成了這個(gè)插件。后面隨著需求的增加，也遇到了一系列的問(wèn)題（iOS上）。

修改webview_flutter代碼的方法：

修改webview_flutter插件中的代碼，如果只是修改了本地插件的代碼，這樣會(huì)有一些弊端：

  • 插件升級(jí)之后，之前修改的代碼被覆蓋掉了。
  • 一起合作的小伙伴同步代碼很不方便。
所以會(huì)使用自己的插件地址來(lái)管理（這樣也會(huì)有不好的地方是沒(méi)有辦法使自己的插件更新到官方插件的最新版本，fork的時(shí)候是什么版本，以后也會(huì)是什么版本）。

步驟：

  • 找到webview_flutter插件的GitHub地址
  • fork一份到自己的GitHub上生成一個(gè)新的地址
  • 要修改這個(gè)插件的人clone到本地，如果沒(méi)有權(quán)限需要獲取權(quán)限
  • 打開(kāi)插件里面的example項(xiàng)目，可以對(duì)插件進(jìn)行改造以及測(cè)試了
  • 使用的時(shí)候，webview_flutter: git: git地址，不再是之前的webview_flutter: 版本號(hào)
問(wèn)題1、webView內(nèi)facebook登錄界面不能跳轉(zhuǎn)，只是刷新了當(dāng)前界面。在瀏覽器上可以看見(jiàn)facebook登錄是彈出了一個(gè)彈框，相當(dāng)于又打開(kāi)了一個(gè)新窗口，所以在app內(nèi)WKWebview沒(méi)有處理這種情況。
解決：

在FlutterWebView.m文件中實(shí)現(xiàn)WKWebview的UIDelegate的一個(gè)代理方法

//初始化方法里面添加
_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;
}

意思是當(dāng)判斷是facebook登錄的時(shí)候，又創(chuàng)建了一個(gè)新的WKWebview覆蓋在上面，解決了問(wèn)題。

問(wèn)題2：添加進(jìn)度條：
-(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<NSString *,id> *)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"];
}
問(wèn)題3：添加類(lèi)似于手機(jī)上Safari瀏覽器上的底部可以前進(jìn)后退的工具條，并且當(dāng)不可前進(jìn)后退的時(shí)候，按鈕顯示灰色。遇到的問(wèn)題是由于上面facebook登錄時(shí)候的特殊處理，是在webview上又疊加了一個(gè)webview，前進(jìn)后退就需要特殊處理。

添加底部工具條的代碼，以及點(diǎn)擊方法：

-(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添加到一個(gè)數(shù)組中，記錄下來(lái)，并且把當(dāng)前的webView的index也記錄下來(lái)，根據(jù)當(dāng)前的index和webView的數(shù)量之間的關(guān)系，判斷是否可以前進(jìn)，重新添加或移除上面覆蓋的webView。

還要做一些特殊的處理，當(dāng)點(diǎn)擊webvVew上的某個(gè)地方，比如打開(kāi)facebook，就會(huì)創(chuàng)建一個(gè)新的webView覆蓋在上面，點(diǎn)擊回退，移除這個(gè)webView，再點(diǎn)擊界面上的一個(gè)鏈接跳轉(zhuǎn)一個(gè)界面（還是在該webView內(nèi)），這個(gè)時(shí)候是不是就需要將那個(gè)新建的webView,從數(shù)組中移除掉了。

在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];
     }

還有一個(gè)地方需要移除，監(jiān)聽(tīng)webView請(qǐng)求的代理方法，由于插件里面navigationDelegate指向的是FLTWKNavigationDelegate類(lèi)，需要拿到這個(gè)里面decidePolicyForNavigationAction代理方法的回調(diào)。

_navigationDelegate = [[FLTWKNavigationDelegate alloc] initWithChannel:_channel];
      _navigationDelegate.delegate = self;
    _webView.navigationDelegate = _navigationDelegate;

所以會(huì)在FLTWKNavigationDelegate中寫(xiě)一個(gè)代理方法，通知FLTWebViewController這個(gè)類(lèi)，每次請(qǐng)求都會(huì)觸發(fā)這個(gè)方法?；卣{(diào)方法代碼：

-(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)];
        }
    }
}
監(jiān)聽(tīng)webView是否可以前進(jìn)和后退，最開(kāi)始的思路是在點(diǎn)擊前進(jìn)后退按鈕的點(diǎn)擊方法中實(shí)現(xiàn)，但是這樣處理是不準(zhǔn)確的，所以使用kvo方法實(shí)現(xiàn)：
//初始化方法中添加
[self->_webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];
[self->_webView addObserver:self forKeyPath:@"canGoForward" options:NSKeyValueObservingOptionNew context:nil];

//監(jiān)聽(tīng)回調(diào)方法中添加
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];
}

一些特殊的處理上面的代碼中已經(jīng)涵蓋了

問(wèn)題4：工具欄擋住了webView底部的內(nèi)容

需要將webView的高度減少一個(gè)工具欄的高度，工具欄頂端為webView的最底端。
但是發(fā)現(xiàn)沒(méi)有設(shè)置webView的frame的地方，初始化方法傳進(jìn)來(lái)的frame也是0,0,0,0，webView的大小是根據(jù)flutter的代碼來(lái)確定的，又不能改flutter代碼，不是在控制器里面，不能明確知道webView初始化完成的具體時(shí)間，所以只能監(jiān)聽(tīng)webView的frame的改變了，但是在監(jiān)聽(tīng)回調(diào)方法中再設(shè)置frame的話，會(huì)造成死循環(huán)，所以做了以下處理：

//初始化方法里面添加
[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;
        }
    }

這樣處理完之后發(fā)現(xiàn)會(huì)出現(xiàn)一個(gè)問(wèn)題，工具欄上的前進(jìn)后退按鈕不響應(yīng)了，是因?yàn)槌隽烁缚丶狞c(diǎn)擊區(qū)域，所以創(chuàng)建了WKWebview子類(lèi)，在子類(lèi)中處理點(diǎn)擊區(qū)域：

- (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;
}

至此，這就是我開(kāi)發(fā)中遇到的幾個(gè)問(wèn)題了，希望對(duì)你們有所幫助哦。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容