WebView CEF Flutter 桌面应用安装和配置指南

WebView CEF Flutter 桌面应用安装和配置指南

webview_cef WebView for Flutter Desktop Apps using CEF(Chromium Embedded Framework) [Work in Progress] 项目地址: https://gitcode.com/gh_mirrors/we/webview_cef

1. 项目基础介绍和主要编程语言

项目基础介绍

webview_cef 是一个用于 Flutter 桌面应用的 WebView 插件，基于 Chromium Embedded Framework (CEF)。该项目目前处于开发阶段，API 尚未稳定。它支持 Windows、macOS 和 Linux 操作系统，旨在为 Flutter 桌面应用提供一个强大的 WebView 解决方案。

主要编程语言

该项目主要使用以下编程语言：

• Dart: 用于 Flutter 应用的开发。
• C++: 用于底层 CEF 的集成和处理。
• C: 用于部分底层操作。
• CMake: 用于构建和配置项目。

2. 项目使用的关键技术和框架

关键技术和框架

• Flutter: 用于构建跨平台的桌面应用。
• Chromium Embedded Framework (CEF): 提供 WebView 功能的核心框架。
• CMake: 用于跨平台的项目构建。
• Dart: 用于 Flutter 应用的开发和逻辑处理。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

1. 安装 Flutter SDK: 确保你已经安装了 Flutter SDK，并且配置好了开发环境。
2. 安装 Git: 用于克隆项目仓库。
3. 安装 CMake: 用于构建项目。
4. 安装 C++ 编译器: 确保你的系统上安装了 C++ 编译器，如 Visual Studio 的 MSVC 编译器（Windows）或 GCC（Linux/macOS）。

详细安装步骤

1. 克隆项目仓库

首先，使用 Git 克隆项目仓库到本地：

git clone https://github.com/hlwhl/webview_cef.git
cd webview_cef

2. 配置 Flutter 项目

在你的 Flutter 项目中，添加 webview_cef 作为依赖项。编辑 pubspec.yaml 文件，添加以下内容：

dependencies:
  webview_cef:
    path: /path/to/webview_cef

3. 配置 Windows 环境

在 Windows 环境下，你需要在 windows\runner\main.cpp 文件中添加以下代码：

#include "webview_cef/webview_cef_plugin_c_api.h"

int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev, _In_ wchar_t *command_line, _In_ int show_command) {
    // 启动 CEF 守护进程，必须首先调用
    initCEFProcesses();

    ::MSG msg;
    while (::GetMessage(&msg, nullptr, 0, 0)) {
        ::TranslateMessage(&msg);
        ::DispatchMessage(&msg);
        // 添加此行以启用 CEF 键盘输入，并允许从 CEF 消息循环线程向 Flutter 引擎线程发送消息
        handleWndProcForCEF(msg, hwnd, msg, message, msg, wParam, msg, lParam);
    }
}

4. 配置 macOS 环境

在 macOS 环境下，你需要克隆仓库到你的项目目录中，通常在 packages/ 文件夹下。然后更新 pubspec.yaml 文件：

dependencies:
  webview_cef:
    path: /packages/webview_cef

接下来，在 macos/ 文件夹中，下载预构建的 CEF 包并解压到 macos/third/cef 目录中。

5. 配置 Linux 环境

在 Linux 环境下，参考示例项目中的方法进行配置。你需要修改 linux/CMakeLists.txt 文件中的资源复制方法，以确保资源文件能够正确复制。

6. 构建和运行项目

完成上述配置后，使用以下命令构建和运行项目：

flutter build <platform>
flutter run

注意事项

• 首次构建项目时，会自动下载预构建的 CEF 包（约 200MB），因此可能需要较长时间。
• 项目目前处于开发阶段，API 尚未稳定，使用时需注意。

通过以上步骤，你应该能够成功安装和配置 webview_cef 项目，并在 Flutter 桌面应用中使用 WebView 功能。

webview_cef WebView for Flutter Desktop Apps using CEF(Chromium Embedded Framework) [Work in Progress] 项目地址: https://gitcode.com/gh_mirrors/we/webview_cef