Flutter嵌入webview并与vue进行双向通信

Flutter嵌入webview并与vue进行双向通信

最近在做一个将h5嵌入flutter中的项目，特此记录一下，如有不对之处，希望大家多多指正。

本篇将围绕以下两点：

1. 插件的选择与使用
2. flutter与vue之间的双向通信

一、插件的选择与使用
目前flutter使用的比较多webview插件的主要有以下三个：

• webview_flutter（官方维护）
• flutter_webview_plugin（社区维护）
• flutter_inappbrowser（个人维护）
  在插件的选择过程中，我主要比较了webview_flutter和flutter_webview_plugin。
  首先看看webview_flutter提供的webview组件的构造函数：

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,
  })

作为官方提供的插件，webview_flutter还是相对比较好用的，不过在开发的过程中发现其在国内某些品牌的手机上运行时，由于国内厂商对键盘进行魔改（比如安全键盘），会出现无发调出或者虚拟键盘闪烁后崩溃的问题，详情见官方issue。

再看flutter_webview_plugin，其提供的WebviewScaffold组件构造函数如下：

Webv