項目最初使用的是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<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"];
}
問題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;
}
至此，這就是我開發中遇到的幾個問題了，希望對你們有所幫助哦。
