#desktop-applications #gui-applications #desktop #electron #web-gui #webkit

web-view

Rust 对 webview 的绑定,webview 是一个用于在桌面应用程序中渲染基于Web的GUI的小型跨平台库

24个版本

使用旧的 Rust 2015

0.7.3 2021年2月23日
0.7.2 2020年12月9日
0.7.1 2020年11月13日
0.6.3 2020年6月4日
0.1.3 2018年2月1日

#118 in GUI

Download history 459/week @ 2024-03-13 434/week @ 2024-03-20 460/week @ 2024-03-27 511/week @ 2024-04-03 275/week @ 2024-04-10 397/week @ 2024-04-17 370/week @ 2024-04-24 361/week @ 2024-05-01 419/week @ 2024-05-08 332/week @ 2024-05-15 352/week @ 2024-05-22 430/week @ 2024-05-29 347/week @ 2024-06-05 350/week @ 2024-06-12 389/week @ 2024-06-19 316/week @ 2024-06-26

1,463 每月下载量
16crate(15个直接)中使用

MIT 许可证

410KB
3.5K SLoC

C 1.5K SLoC // 0.0% comments Rust 1K SLoC // 0.0% comments C++ 516 SLoC // 0.0% comments

web-view   .github/workflows/ci.yml 最新版本

重要:需要 Rust 1.30 稳定版或更高版本。

此库为原始webview实现提供了 Rust 绑定,webview 是一个用于在桌面应用程序中渲染基于Web的GUI的小型跨平台库。

screenshot

通过 external JS 对象和 webview.eval Rust 函数,您的 Rust 和 JavaScript 代码之间的双向绑定变得简单。我们有一些完整的示例,但核心如下

// ... Simplified for the sake of brevity.
web_view::builder()    
    .invoke_handler(|webview, arg| {
        match arg {
            "test_one" => {
                // Do something in Rust!
            }
            "test_two" => {
                // Invoke a JavaScript function!
                webview.eval(&format!("myFunction({}, {})", 123, 456))
            }
            _ => unimplemented!(),
        };
    })
// Executes our "invoke_handler" - passing the value "test_one" as the second parameter.
external.invoke('test_one');

// Executes our "invoke_handler", which in turn calls "myFunction" below.
external.invoke('test_two');

function myFunction(paramOne, paramTwo) {
    console.log(paramOne);
    console.log(paramTwo);
}

此外,通过依赖宿主操作系统的默认渲染引擎,与需要将 Chromium 打包到每个分发中的替代方案(如Electron)相比,您应该会得到一个 明显 更轻的二进制文件来分发。

您还应该看到相对较少的内存使用,此部分将在适当的时候更新以突出这一点。

最后,支持的平台和您预期可以渲染应用程序内容的引擎如下

操作系统 使用的浏览器引擎
Windows MSHTML 或 EdgeHTML
Linux Gtk-webkit2
OSX Cocoa/WebKit

注意:默认情况下,在Windows上使用MSHTML(IE)渲染引擎来显示应用程序。如果您想使用EdgeHTML(Edge),则需要通过功能开关启用它(见安装和配置部分)。

先决条件

如果您计划针对Linux,您必须确保已安装并可通过pkg-config命令发现Webkit2gtk

如果您跳过此步骤,您将看到类似以下格式的错误消息,告知您缺少的内容

Compiling webview-sys v0.3.3
error: failed to run custom build command for `webview-sys v0.3.3`
Caused by:
process didn't exit successfully: `/home/username/rust-projects/my-project/target/debug/build/webview-sys-9020ddaf41e4df7d/build-script-build` (exit code: 101)
--- stderr
thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Command { command: "\"pkg-config\" \"--libs\" \"--cflags\" \"webkit2gtk-4.0\" \"webkit2gtk-4.0 >= 2.8\"", cause: Os { code: 2, kind: NotFound, message: "No such file or directory" } }', src/libcore/result.rs:1165:5

安装和配置

让我们从基本的Rust应用程序开始。在您选择的shell中运行cargo new my-project,然后切换到my-project目录。

由于这个库可以在Rust社区注册表中找到,因此您要添加此依赖项,只需更新您的Cargo.toml文件,在其依赖项部分包含以下内容

[dependencies]
web-view = { version = "0.7" }

如果您想在Windows环境中使用Edge,您需要通过Visual Studio安装程序安装Windows 10 SDK,并需要使用以下语法

[dependencies]
web-view = { version = "0.7", features = ["edge"] }

现在让我们编写一些使用该库的Rust代码。在您选择的编辑器中打开main.rs文件。

vim src/main.rs

并将内容替换为以下内容

use web_view::*;

fn main() {
    let html_content = "<html><body><h1>Hello, World!</h1></body></html>";
	
    web_view::builder()
        .title("My Project")
        .content(Content::Html(html_content))
        .size(320, 480)
        .resizable(false)
        .debug(true)
        .user_data(())
        .invoke_handler(|_webview, _arg| Ok(()))
        .run()
        .unwrap();
}

现在您应该能够运行cargo build并看到以下输出类似的内容

$ cargo build
Updating crates.io index
Compiling pkg-config v0.3.17
Compiling cc v1.0.47
Compiling boxfnonce v0.1.1
Compiling urlencoding v1.0.0
Compiling webview-sys v0.3.3
Compiling web-view v0.5.4
Compiling my-project v0.1.0 (C:\Users\Username\source\rust-projects\my-project)
Finished dev [unoptimized + debuginfo] target(s) in 8.36s

假设您构建成功,现在您只需运行它即可:cargo run。希望您会看到以下相同的内容

screenshot

有关更多信息,请参阅示例原始README

已知问题和限制

  • 在Windows 10上以Administrator身份运行时,Edge功能开关不起作用。这是#96提出的问题的根本原因,这是由此处跟踪的Microsoft.Toolkit.Win32中的bug的结果。

  • Edge沙盒限制。如果您决定使用内嵌Web服务器返回内容,您需要运行以下命令以绕过防止与localhost通信的限制

    $ # Requires administrative privileges.
    $ CheckNetIsolation.exe LoopbackExempt -a -n="Microsoft.Win32WebViewHost_cw5n1h2txyewy"
    

    这通常用于Windows IoT Core,允许两个进程之间的TCP/IP连接。您可以在Microsoft文档中了解更多关于此的信息。

  • IE在旧版、兼容性格式中渲染内容。默认情况下,在Web浏览器控件内渲染的内容将在兼容性模式下完成(具体为IE7)。在Edge不可用的Windows系统上,可以通过注册表修改强制使用已安装的最高版本IE。

建议

  • 如果您喜欢类型安全,请使用ElmPureScript*编写前端,或者使用将编译成asm.js的Rust前端框架,例如yew
  • 使用parcel来打包和压缩您的代码。
  • 使用inline-assets将所有资源(CSS、JS、HTML)内联到单个index.html文件中,并使用include_str!()将其嵌入Rust应用程序。
  • 如果您的应用程序在Windows上运行,请添加图标以使Rust可执行文件看起来更专业™
  • 使用自定义npm脚本或justcargo-make来自动化构建步骤。
  • 使用前端中的localStorage或后端中的rustbreak使应用程序状态在会话之间持久化。
  • 顺便说一下,除了通过js api注入应用程序资源外,您还可以从本地http服务器(例如,绑定到临时端口)提供它们。
  • 快乐的编码 :)

*免费的PureScript By Example书籍包含一些适合PureScript初学者的实际项目。

贡献机会

  • 为任何问题创建一个issue
  • 文档
  • 关于此库API和代码的反馈
  • 在非Windows平台上测试它,报告您找到的任何问题
  • 展示您的应用程序
  • 添加使用编译成asm.js的Elm或Rust的示例
  • 添加一个与后端进行双向通信的PureScript示例
  • 为原始webview库做出贡献:例如,在Windows上添加HDPI支持
  • 使创建webview窗口成为给定父窗口的子窗口成为可能。这将使webview能够用于Rust中的VST音频插件的GUIGUI

应用想法

  • Rust IDE(通过将xi-electron移植到web-view)
  • Rust的数据可视化/绘图库,使Rust在数据科学中更有用
  • 加密货币钱包
  • IRC客户端,或其他聊天协议客户端
  • Midi歌曲编辑器,VJ控制器
  • Rust项目模板向导:通过用户友好的步骤从模板生成新的Rust项目
  • pijul的GUI
  • 使用web-viewclap-rs实现Gooey的替代方案

展示

如果您想在这里列出您的项目,请随时提交PR!

  • Juggernaut - 不可阻挡的程序员编辑器
  • FrakeGPS - 模拟简单的GPS设备
  • Compactor - Windows 10文件系统压缩实用程序
  • neutrino - 基于web-view的Rust GUI前端
  • SOUNDSENSE-RS - Dwarf Fortress的声音引擎工具
  • Tauri - 将安全性带入webstack GUI,同时提供对您最喜欢的JS框架的强大支持
  • WV Linewise - 在您的UNIX管道中间添加您自己的交互式HTML/CSS/JS
  • Bloop - 开发人员的轻量级美学便签本。

欢迎贡献和反馈 :)


依赖关系

~0.3–1.3MB
~24K SLoC