Flutter window和Mac中webview使用Cef替代

1,371 阅读1分钟

目前主流 Windows是使用 webview2,Mac是WkWebview,并且以实例的方式启动,无法作为widget组件在Flutter应用中内嵌,只能以新窗口的形式打开,体验不是很友好 也不太符合大多数软件开发的需求要求。

这里使用CEF(Chromium Embedded Framework)来替代webview2WkWebview的方案,CEF是基于 Chrome Chromium 的一个开源内核,Google官方并未提供flutter版本的CEF,需要自己编写原生去实现接口能力 或者 使用第三方作者封装的依赖库。

目前接入有2种方式
  1. Windows端和Mac端 原生 + Flutter Plugin 的形式接入

相对复杂、原生配置和 编写3端的代码量非常大(Windows端 C++;Mac端 Objective-C或swift;Flutter)

  1. 使用pub仓库中的一个大佬封装的CEF库(点击 webview_cef 查阅),这个方式较为便捷 也满足大多数要求

本文仅分享webview_cef的使用案例。 这个库已经实现了大部分常用接口能力,当然 您C++和Oc的能力过硬并且比较闲,也可以自己编写原生接入CEF。

接入案例

1、在 pubspec.yaml 中引入webview_cef

image.png

2、 在windows\runner\main.cpp中初始化 initCEFProcesses()

image.png

3、 ::MSG msg; 中加入 handleWndProcForCEF()启用 CEF 键盘输入推送

image.png

4、flutter run 即可,首次编译会下载 cef资源包,文件较大,会比较慢,等待即可

嵌入示例运行效果 image.png

补充Mac端配置:

  1. 下载 arm64 或者 intel 平台的Chromium Framework文件
  1. 解压到 webview_cef/macos/third/cef 中 (不是你的项目下的 macos,是 webview_cef 插件下的 macos)

image.png