FlutterWeb 和 WebView 原生交互调用
需要创建两个工程，一个是FlutterWeb工程最终打包成Web页面，一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次，可以直接使用社区Flutter原生工程的插件，只需要封装给Web调用。
FlutterWeb工程pubspec.yaml添加依赖
dependencies:
flutter_web_plugins:
sdk: flutter
Flutter原生工程pubspec.yaml添加依赖
dependencies:
oktoast: ^3.1.5
webview_flutter: ^3.0.1
FlutterWeb 调用原生函数
1. Flutter原生工程
创建一个 toast_channel.dart，定义一个类实现 JavascriptChannel 重写name指定channel名称和onMessageReceived指定调用函数
import 'package:oktoast/oktoast.dart';
import 'package:webview_flutter/platform_interface.dart';
class ToastChannel implements JavascriptChannel {
@override
String get name => "toast_channel";
@override
JavascriptMessageHandler get onMessageReceived => handleMsg;
void handleMsg(JavascriptMessage message) {
showToast(message.message);
}
}
在WebView的 javascriptChannels 配置上定义的Channel
WebView(
initialUrl: widget.url,
// 使用JS没限制
javascriptMode: JavascriptMode.unrestricted,
// 注册JS交互Channel
javascriptChannels: {ToastChannel()},
);
2. FlutterWeb工程
创建一个 native_channel.dart ，定义一个外部函数通过 @JS("调用的channel和函数名") 注解指定调用的原生函数（JavascriptChannel固定名称为postMessage）
import 'package:js/js.dart';
// JS调用原生函数
@JS("toast_channel.postMessage")
external String showToast(String msg);
需要使用的地方直接调用
showToast("Increment");
原生调用 FlutterWeb 函数
1. FlutterWeb工程
创建一个 js_function.dart，存放被原生调用的函数名称
class JsFunctionName {
// 原生调用JS函数名称
static const incrementCounter = "home_incrementCounter";
}
将要提供给原生调用的函数，通过 js.context[原生调用名称] = 函数 开放给外部调用
import 'dart:js' as js;
int _incrementCounter(int count) {
setState(() {
_counter = count;
});
return count;
}
void initState() {
js.context[JsFunctionName.incrementCounter] = _incrementCounter;
}
如果在FlutterWeb工程要使用这个函数也可以使用@JS注解
import 'package:js/js.dart';
// 调用JS函数
@JS(JsFunctionName.incrementCounter)
external int incrementCounter(int count);
2. Flutter原生工程
WebView 创建时会回调 onWebViewCreated 获得 WebViewController ，WebViewController 调用 runJavascript 会执行JS函数无返回值，调用 runJavascriptReturningResult 会执行JS函数有返回值。
// 存储WebViewController
final _webViewController = Completer<WebViewController>();
WebView(
initialUrl: widget.url,
// 使用JS没限制
javascriptMode: JavascriptMode.unrestricted,
// 注册JS交互Channel
javascriptChannels: {ToastChannel()},
onWebViewCreated: (WebViewController controller) {
// 在WebView创建完成后会产生一个 WebViewController
_webViewController.complete(controller);
},
);
// 有返回值JS函数
Future<String> incrementCounter(WebViewController controller, int count) =>
controller.runJavascriptReturningResult("home_incrementCounter($count)");
// 无返回值JS函数
Future<void> incrementCounter2(WebViewController controller, int count) =>
controller.runJavascript("home_incrementCounter($count)");
FutureBuilder获取WebViewController， 需要使用的地方直接调用
FutureBuilder<WebViewController>(
future: _webViewController.future,
builder: (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
final bool webViewReady = snapshot.connectionState == ConnectionState.done;
final WebViewController? controller = snapshot.data;
return IconButton(
icon: const Icon(Icons.add),
onPressed: webViewReady
? () async {
// 调用JS函数
var a = await incrementCounter(controller!, 100);
showToast("native $a");
}
: null,
);
},
);
构建和发布
渲染器指定
1. HTML 渲染器
使用 HTML，CSS，Canvas 和 SVG 元素来渲染。
缺点：会存在不同平台效果不一样。
优点：不加载canvaskit默认使用系统字体，加载过程没有多余开销。
2. Canvaskit 渲染器
需要用到wasm，WebAssembly 要求需要浏览器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。
缺点：canvaskit 有7m大默认地址在国外首次加载耗时；中文会加载字体库默认地址在国外加载慢。
优点：性能更好，渲染效果一致。
3. 指定渲染器
--web-renderer=auto 默认移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
综上所诉推荐移动端使用HTML渲染更合适，在编译和打包时指定渲染器 --web-renderer=html 。
混淆压缩和摇树优化
--debug 模式构建的 Web 应用没有被压缩，且 Tree-shaking 没有执行。
--profile 模式构建的 Web 应用没有被压缩，但 Tree-shaking 执行了。
--release 模式构建的 Web 应用被压缩了，并且 Tree-shaking 执行了
完整构建命令
运行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
