webview_flutter插件封装实践1 2022-06-1

简介

在Flutter中没有WebView组件，但是有官方提供的webview_flutter插件。
其实做的事情跟原生封装WebView组件类似。

组件引入

webview_flutter: ^3.0.4

基本组成

• WebView本身，是一个继承自StatefulWidget的有状态的Widget

WebView({
    Key key,
    this.onWebViewCreated,             //WebView创建完成之后的回调
    this.initialUrl,                               // 初始化 URL
    this.javascriptMode = JavascriptMode.disabled,    //JS执行模式，默认是不调用
    this.javascriptChannels,             // JS可以调用Flutter 的通道
    this.navigationDelegate,            // 路由委托，可以使用它执行拦截操作
    this.gestureRecognizers,          // 手势相关
    this.onPageStarted,                 //开始加载页面回调
    this.onPageFinished,              // 页面加载完成的回调
    this.onWebResourceError,     //资源加载失败回调
    this.debuggingEnabled = false,
    this.gestureNavigationEnabled = false,
    this.userAgent,
    this.initialMediaPlaybackPolicy =
        AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
  })

• 协助完成各种操作的Controller，封装了各种web操作方法。比如前进，后退，加载等等。

WebViewController._(
    this._widget,                   // 对应的WebView组件
    this._webViewPlatformController,
    this._javascriptChannelRegistry,
  )

封装成页面

• 与原生差不多，WebView组件封装到一个页面中，整个工程都可以通过调用这个页面来实现H5的加载。

• 参数可以通过构造参数的形式传入，也可以通过路由参数传入。

• 头部信息应该由封装的页面容器提供，H5页面只要提供需要显示的标题内容就可以了。

• 页面的内容，可以通过url加载，也可以直接加载html字符串。

class WebViewPage extends StatefulWidget {
  final String? url;             // 通过url加载
  final String title;             // 标题
  final String? content;    // 通过HTML 字符串加载

  /// 协助完成各种操作的Controller
  WebViewController _webViewController;

  WebViewPage({this.url, this.content, this.title});

  @override
  _WebViewPage createState() => _WebViewPage();
}

class _WebViewPage extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _buildAppbar(),
        body: _buildBody()
    );
  }
/// 其他内部方法
}

头部返回按钮重新定义

• 一种是网页意义的返回，就是网页上的后退，仍然再H5的范围之内

• 另外一种是原生容器的返回，就是退出这个webview容器页面

  _buildAppbar() {
    return AppBar(
        elevation: 0,
        backgroundColor: Color(0xccd0d7),
        title: Text(widget.title, style: TextStyle(color: Colors.black),),
        centerTitle: true,
        leading: GestureDetector(
            onTap: () {
              widget._webViewController.canGoBack().then((value) {
                if (value) {
                  widget._webViewController.goBack();   // 网页的返回
                } else {
                  Get.back();  // 容器的退出
                }
              });
            },
            child: Icon(
              Icons.arrow_back_ios_outlined,
              size: 17,
            ),
          ),
    );
  }

加载页面

分为url和HTML字符串两种方式

_buildBody() {
    return SafeArea(
          child: WebView(
            initialUrl: widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              widget._webViewController = webViewController;
              if (widget.content != null) {
                widget._webViewController
                    .loadHtmlString(widget.content);
              }
            },
          ),
        ),
}

其他内容

• 与JS交互

• 加载过程指示

... ...

参考文章

webview_flutter: ^3.0.4

Flutter应用开发之webview_flutter插件

flutter官方插件webview_flutter的使用示例

Flutter插件之webview_flutter简要使用说明