flutter webView 使用以及与 js 互操作_flutter web与app进行js交互

lzyprime 博客 (github)
创建时间：2020.03.06
qq及邮箱：2383518170

λ:

• 仓库地址：https://github.com/lzyprime/flutter_demos/tree/flutter_webview_demo

• git clone -b flutter_webview_demo https://github.com/lzyprime/flutter_demos.git
  1

• 插件： webview_flutter ， 目前版本：^0.3.19+9

• 由于要兼顾 Android 和 Ios 两个平台的webView, js 调用native时无法直接返回数据，所以通过回调的形式曲线救国： 接到js请求后，处理数据，然后主动调用js相关函数。

• flutter 调用js 可以监听返回值

主要参数和方法

官方的example或者跳到源码一看便知

// 构造函数  
const WebView({
    Key key,
    this.onWebViewCreated, //webView创建完成后的回调函数， WebViewCreatedCallback(WebViewController controller)，会返回 webViewController
    this.initialUrl, //要加载的url地址
    this.javascriptMode = JavascriptMode.disabled, //js是否执行，默认值为不执行, JavascriptMode.unrestricted执行。不能为空
    this.javascriptChannels, // js 调用 flutter 时的处理者们，set<JavascriptChannel>。 所有JavascriptChannel的name不允许重复
    this.navigationDelegate, // 拦截请求并处理，详情请查看源码
    this.gestureRecognizers, // 手势监听与处理，详情请查看源码
    this.onPageStarted,  // 开始加载时的回调，PageStartedCallback(String url)
    this.onPageFinished, // 加载结束的回调，PageFinishedCallback(String url)
  
  /// 剩余参数英文直译即可，详情请查看源码
    this.debuggingEnabled = false,
    this.gestureNavigationEnabled = false,
    this.userAgent,
    this.initialMediaPlaybackPolicy =
        AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
  })  : assert(javascriptMode != null),
        assert(initialMediaPlaybackPolicy != null),
        super(key: key);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

webViewController:

onWebViewCreated 会返回 当前webView的controller, 官方给的example里的做法是定义一个Completer<WebViewController> 实现延迟初始化：

class _WebViewPageState extends State<WebViewPage> {
  final _controller = Completer<WebViewController>();
  ....
  WebView(
        ....
        onWebViewCreated: (controller) {
            _controller.complete(controller);
        },
  )
  ....
}
1
2
3
4
5
6
7
8
9
10
11

之后对WebViewController 的调用通过 _controller.future 来实现，类型是Future<WebViewController>, 所以全都是异步调用:

_controller.future.then((controller){
  ...
})
  // 或
 FutureBuilder(
  future: _controller.future,
  builder: (BuildContext context,AsyncSnapshot<WebViewController> controller){
    return (Widget)
  }
)
1
2
3
4
5
6
7
8
9
10

主要函数：

// loadUrl，currentUrl，canGoBack ... 等函数
// 查看源码，看函数名和注释便知功能

///其中，js互操作常用：
Future<String> evaluateJavascript("js 代码") // 执行js, 并且可以接收 js 执行的返回值
1
2
3
4
5

JavascriptChannel

  JavascriptChannel({
    @required this.name, // js 调用时的变量名，
    // 如name="Print", js可以通过 Print.postMessage(msg) 调用flutter
    // 请求会在 onMessageReceived 函数中处理
    
    @required this.onMessageReceived, // 处理js 请求
    // typedef 
1
2
3
4
5
6