在Google的大力推广下,flutter已经成为移动开发的新宠儿,今天我们来讲讲Flutter 官方维护的 webview_flutter;官方文档点此查看;官方Github样例点此查看。本文将从这几个基本点进行讲述:

  • 基本使用方法
  • 加载本地html
  • 网络错误页面处理
  • 加载页面处理
  • js和webview互相调用
frc d83379776531850cc16b937a8a2086ef - Flutter 采坑之旅--webview_flutter
使用效果图
基本使用方式

pubspec.yaml 文件中导入我们要用的包

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  connectivity: ^0.4.6+1
  url_launcher: ^5.4.1
  webview_flutter: ^0.3.19+7
  provider: ^3.2.0

引入包后我们就能在代码里直接使用WebView了,我们来看看WebView里都有哪些主要参数

             WebView(
                    initialUrl: url,  //需要打开的url
                    //是否支持js 默认是不支持的,
                    javascriptMode: JavascriptMode.unrestricted, 
                    onWebViewCreated: (WebViewController controller) {
                    //页面加载的时候可以获取到controller可以用来reload等操作
                      _webViewController = controller;
                    },
                    //加载js方法到页面内,js通过此来调用flutter的方法
                    javascriptChannels: _loadJavascriptChannel(context),
                    onPageStarted: (String url) {
                    },
                    onPageFinished: (String url) {
                  
                    },
                  //拦截页面url
                    navigationDelegate: (NavigationRequest request) {
                      if (request.url.startsWith('alipays:') ||
                          request.url.startsWith('weixin:')) {
                        _openPay(context, request.url);
                        return NavigationDecision.prevent;
                      }
                      return NavigationDecision.navigate;
                    },
                  ),

以上便是webview_flutter最基础的用法。

加载本地html

先将html文件放入assets文件夹下

frc baceac52eeba0f13bb448dc3b30ff04f - Flutter 采坑之旅--webview_flutter
image.png

不要忘了在pubspec.yaml中配置资源文件

frc c5d0460fa9f7db7778e9d24328fe63fa - Flutter 采坑之旅--webview_flutter
image.png

一切准备就绪后就很简单了

Future _loadHtmlFromAsset() async {
   String html = 'assets/static/test.html';
    final String path = await rootBundle.loadString(html);
   //webviewController 在webview初始化时可获得
    _webViewController.loadUrl(Uri.dataFromString(path,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

加载页面以及错误页面处理

由于flutter_webview 没有提供网页具体的加载进度,所以只能在页面开始的时候做加载框,页面加载完成的时候关闭加载框,网络错误页面处理是通过判断网络状态来处理的,此处用了三个叠加的页面来展现

frc 8939c2dc051f5bf356f7ebad5beb05eb - Flutter 采坑之旅--webview_flutter
image.png

网页开始加载的时候,加载页面在最顶层,加载结束后让webview出现在顶层,如果加载的过程中检测到网络出错就将错误页面展示出来。

js和webview_flutter 互相调用

我们先来看一段简单的html代码





 

这里面包含了两个js方法 callFlutter() 和 callJS(message),callFlutter 是按钮点击后会去调用Flutter的方法,callJS 是提供给Flutter调用的方法。
在Flutter代码中的具体体现为如下:
手续要允许js调用打开 javascriptMode: JavascriptMode.unrestricted,然后注入js方法

WebView(
     initialUrl: url,
     javascriptMode: JavascriptMode.unrestricted,        
     javascriptChannels: _loadJavascriptChannel(context),
  ),

Set _loadJavascriptChannel(BuildContext context) {
    final Set channels = Set();
    JavascriptChannel toastChannel = JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
    channels.add(toastChannel);
    return channels;
  }

我们可以写多个方法注入到页面当中,页面通过相应的名称postMessenge(‘xxx’) 即可调用,我们这里用的是

Toaster.postMessage(‘js call flutter’); //Toaster 名字可自定义,只要flutter和js一致即可

Flutter调用页面的JS 方法使用,字符串完全匹配来执行的,

  Future evaluateJavascript() async {
    print('evaluateJavascript');

    _webViewController
        ?.evaluateJavascript('callJS('visible');')
        ?.then((result) {
      print(result);
    });

webviewController 是在页面初始化时候获取的,为了保证JS方法被加载到页面当中,我们调用JS方法的时候最好是在页面加载完成后调用。此处 ‘callJS(‘visible’);’ 必须和html里定义的JS方法完全一致才能调用成功,尤其是传参的类型处理,我们一般传字符串过去,需要注意单双引号处理。

处理页面当中的微信支付和支付宝支付问题

如果我们页面需要调起微信和支付宝支付,我们可以通过拦截的形式来处理。

WebView(
       initialUrl: url,
        navigationDelegate: (NavigationRequest request) {
          if (request.url.startsWith('alipays:') ||
            request.url.startsWith('weixin:')) {
             _openPay(context, request.url);
               return NavigationDecision.prevent;
           }
            return NavigationDecision.navigate;
         },
 )
// 跳转外部支付
 Future _openPay(BuildContext context, String url) async {
    print('payurl:' + url);
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      Scaffold.of(context).showSnackBar(
        SnackBar(content: Text('未安装支付软件')),
      );
    }
  }

webview添加header

做微信支付的时候,碰到支付网关问题要加referer,需要在header里加referer

_webViewController.loadUrl(url, headers: {
                        'Referer': url,
                      });

监听页面回退

当我们的页面支持多次跳转的时候,为了防止按返回键直接退出,我们需要监听返回按键,如果页面可以回退,则直接回退,如果不可以直接回退,则关闭页面。我们将最外层包裹 WillPopScope进行监听

frc d854ddf6355490a82811140c15dc9abe - Flutter 采坑之旅--webview_flutter
image.png
 Future _goBack(BuildContext context) async {
    if (_webViewController != null && await _webViewController.canGoBack()) {
      _webViewController.goBack();
      return false;
    }
    return true;
  }

获取web页面的title

如果我们需要获取web页面的title来设置页面的title,我们可以这样做

 /// 获取当前加载页面的 title
  Future _loadTitle() async {
    final String temp = await _webViewController.getTitle();
    print('title:' + temp);
    setState(() {
      title = temp;
    });
  }

由于跨平台属性,webview_flutter 还是存在大量的坑点,让我们一起来慢慢填坑,以上代码可查看https://github.com/ShuaiJing/flutter_application_jing 分享不易,看到这里了就点个赞呗。

Flutter 采坑之旅–webview_flutter