flutter_inappwebview插件源码解析

在阅读前需要了解

1. android Webview的使用以及和js的交互, 见网页
2. flutter的plugin开发流程, 见网页
3. flutter中使用原生视图的流程, 见网页

这是官网提供的主要类, 本文只讲第一个InAppWebView 以及 js交互

下图是插件中InAppWebView类在dart端和android端的关系
(InAppWebView后面简称为IAwebview)
下图是我自己画的

下图来自参考文章1

dart端主要类解读

这里有官方提供的使用示例

// dart语言, csdn没有高亮
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:url_launcher/url_launcher.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  if (Platform.isAndroid) {
    await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
  }

  runApp(MaterialApp(
      home: new MyApp()
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(
        useShouldOverrideUrlLoading: true,
        mediaPlaybackRequiresUserGesture: false,
      ),
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
      ),
      ios: IOSInAppWebViewOptions(
        allowsInlineMediaPlayback: true,
      ));

  late PullToRefreshController pullToRefreshController;
  String url = "";
  double progress = 0;
  final urlController = TextEditingController();

  @override
  void initState() {
    super.initState();

    pullToRefreshController = PullToRefreshController(
      options: PullToRefreshOptions(
        color: Colors.blue,
      ),
      onRefresh: () async {
        if (Platform.isAndroid) {
          webViewController?.reload();
        } else if (Platform.isIOS) {
          webViewController?.loadUrl(
              urlRequest: URLRequest(url: await webViewController?.getUrl()));
        }
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(title: Text("Official InAppWebView website")),
          body: SafeArea(
              child: Column(children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search)
                  ),
                  controller: urlController,
                  keyboardType: TextInputType.url,
                  onSubmitted: (value) {
                    var url = Uri.parse(value);
                    if (url.scheme.isEmpty) {
                      url = Uri.parse("https://www.google.com/search?q=" + value);
                    }
                    webViewController?.loadUrl(
                        urlRequest: URLRequest(url: url));
                  },
                ),
                Expanded(
                  child: Stack(
                    children: [
                      InAppWebView(
                        key: webViewKey,
                        initialUrlRequest:
                        URLRequest(url: Uri.parse("https://inappwebview.dev/")),
                        initialOptions: options,
                        pullToRefreshController: pullToRefreshController,
                        onWebViewCreated: (controller) {
                          webViewController = controller;
                        },
                        onLoadStart: (controller, url) {
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        androidOnPermissionRequest: (controller, origin, resources) async {
                          return PermissionRequestResponse(
                              resources: resources,
                              action: PermissionRequestResponseAction.GRANT);
                        },
                        shouldOverrideUrlLoading: (controller, navigationAction) async {
                          var uri = navigationAction.request.url!;

                          if (![ "http", "https", "file", "chrome",
                            "data", "javascript", "about"].contains(uri.scheme)) {
                            if (await canLaunch(url)) {
                              // Launch the App
                              await launch(
                                url,
                              );
                              // and cancel the request
                              return NavigationActionPolicy.CANCEL;
                            }
                          }

                          return NavigationActionPolicy.ALLOW;
                        },
                        onLoadStop: (controller, url) async {
                          pullToRefreshController.endRefreshing();
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        onLoadError: (controller, url, code, message) {
                          pullToRefreshController.endRefreshing();
                        },
                        onProgressChanged: (controller, progress) {
                          if (progress == 100) {
                            pullToRefreshController.endRefreshing();
                          }
                          setState(() {
                            this.progress = progress / 100;
                            urlController.text = this.url;
                          });
                        },
                        onUpdateVisitedHistory: (controller, url, androidIsReload) {
                          setState(() {
                            this.url = url.toString();
                            urlController.text = this.url;
                          });
                        },
                        onConsoleMessage: (controller, consoleMessage) {
                          print(consoleMessage);
                        },
                      ),
                      progress < 1.0
                          ? LinearProgressIndicator(value: progress)
                          : Container(),
                    ],
                  ),
                ),
                ButtonBar(
                  alignment: MainAxisAlignment.center,
                  children: <Widget>[
                    ElevatedButton(
                      child: Icon(Icons.arrow_back),
                      onPressed: () {
                        webViewController?.goBack();
                      },
                    ),
                    ElevatedButton(
                      child: Icon(Icons.arrow_forward),
                      onPressed: () {
                        webViewController?.goForward();
                      },
                    ),
                    ElevatedButton(
                      child: Icon(Icons.refresh),
                      onPressed: () {
                        webViewController?.reload();
                      },
                    ),
                  ],
                ),
              ]))
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

InAppWebView类

实际上是将原生的android视图嵌入到flutter中
即将原生的webview封装成widget
Flutter 支持两种集成模式：虚拟显示模式 (Virtual displays) 和混合集成模式 (Hybrid composition) 。

InAppWebView默认使用第一种
也可以设置widget的参数来指定使用哪一种
源码判断模式的代码: useHybridComposition =widget.initialOptions?.android.useHybridComposition ?? false;

其构造函数中可以传入很多回调函数, 并在其中获取到类实例对应的InAppWebViewController 实例

InAppWebViewController 类

此类可以控制 InAppWebView

相当于是android原生webview的方法和Setings, WebViewClient 以及WebChromeClient的方法加起来

实际上使用此类时其方法还是通过方法通道
去调用原生的extends WebView的InAppWebView的方法和这三个类的方法
同时也将原生webview的周期回调函数通过方法通道接收和处理, 处理中调用使用者传入的函数

android端主要类解读

插件类的源码入口就在继承了FlutterPlugin的类中

    public class InAppWebViewFlutterPlugin implements FlutterPlugin, ActivityAware {
   
      @Override
      public void onAttachedToEngine(FlutterPluginBinding binding) {
   
        this.flutterAssets = binding.getFlutterAssets();
          // 在其中注册webviewFactory
        onAttachedToEngine(
                binding.getApplicationContext(), binding.getBinaryMessenger(), this.activity, binding.getPlatformViewRegistry(), null);
      }
    
//-----next class--------------------
    
    // webviewFactory的create()返回一个flutterWebView对象
    public class FlutterWebView implements PlatformWebView {
   
        // 构造函数中初始化了 channel
        // 此channel在dart接口中被in_app_webview_controller使用
          channel = new MethodChannel(plugin.messenger, "com.pichillilorenzo/flutter_inappwebview_" + id);
        // 设置其方法调用的handler
        methodCallDelegate = new InAppWebViewMethodHandler(webView);
        channel.setMethodCallHandler(methodCallDelegate);
        
//-----next class--------------------
        
    // ❗ ❗ ❗ ❗ ❗ ❗ methodChannel的handler, 重要代码
    // 此handler重写了onMethodCall(), 有600行代码, 100个case来处理来自flutter端不同的方法, 通过这些方法对webview进行控制
    public class InAppWebViewMethodHandler implements MethodChannel.MethodCallHandler {
   
        
    // flutterWebView的构造函数中初始化了一个InAppWebView, 调用其prepare()
    // InAppWebView 继承 InputAwareWebview, InputAwareWebview 继承原生的webview
    final public class InAppWebView extends InputAwareWebView implements InAppWebViewInterface {
   
    // prepare()中设置了webview的webChromeClient, webViewClient, websettings
    // 其中还设置了 userContentController
    public void prepare() {
   
    
    httpClient = new OkHttpClient().newBuilder().build();
    // 这里添加了一个java对象映射到webview中
    javaScriptBridgeInterface = new JavaScriptBridgeInterface(this);
    /*
    对象在js中的名字 JAVASCRIPT_BRIDGE_NAME = "flutter_inappwebview";
    对象的关键方法 : public void _callHandler(final String handlerName, final String _callHandlerID, final String args) 
    虽然不返回值, 但是在内部会根据handlername 去调用不同的函数或者通过方法通道传给flutter去hanle
    然后callAsyncJavaScriptCallbacks()返回需要返回的值
    */
    addJavascriptInterface(javaScriptBridgeInterface, JavaScriptBridgeJS.JAVASCRIPT_BRIDGE_NAME);

    inAppWebViewChromeClient = new InAppWebViewChromeClient(plugin, channel, inAppBrowserDelegate);
    setWebChromeClient(inAppWebViewChromeClient);

    inAppWebViewClient = new InAppWebViewClient(channel, inAppBrowserDelegate);
    setWebViewClient(inAppWebViewClient);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

具体功能实现的源码

IAwebview如何加载url

// 仍然是通过InAppWebViewController控制
InAppWebViewController? webViewController;
// ----分割线-------------
 webViewController?.loadUrl(urlRequest: urlRequest);
// ----分割线-------------
Future<void> loadUrl(
      {
   required URLRequest urlRequest,
      @Deprecated('Use `allowingReadAccessTo` instead')
          Uri? iosAllowingReadAccessTo,
      Uri? allowingReadAccessTo}) async {
   
    
    Map<String, dynamic> args = <String, dynamic>{
   };
    
    await _channel.invokeMethod('loadUrl', args);

    // 原生端methodHandler的方法处理
      case "loadUrl":
        if (webView != null) {
   
          Map<String, Object> urlRequest = (Map<String, Object>) call.argument("urlRequest");
          webView.loadUrl(URLRequest.fromMap(urlRequest));
        }
    // IAwebview根据urlRequest的不同调用原生webview不同的loadurl()
  public void loadUrl(URLRequest urlRequest) {
   
    String url = urlRequest.getUrl();
    String method = urlRequest.getMethod();
    // request的方法为post
    if (method != null && method.equals("POST")) {
   
      byte[] postData = urlRequest.getBody();
      postUrl(url, postData);
      return;
    }
      // 
    Map<String, String> headers = urlRequest.getHeaders();
    if (headers != null) {
   
      loadUrl(url, headers);
      return;
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43