1 个不稳定版本

0.5.0	2020年6月25日

#1147 in GUI

每月下载 21 次
在 tauri-web-view 中使用

MIT 许可证

97KB
2.5K SLoC

web-view

先决条件
安装和配置
已知问题和限制
建议
贡献机会
应用想法
展示

重要：需要 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，您必须确保 Webkit2gtk 已安装并可通过 pkg-config 命令发现。

如果您跳过此步骤，您将看到如下类似格式的错误消息，告知您缺少什么

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社区注册处找到一个crate，所以你只需要更新你的Cargo.toml文件，在其依赖项部分添加以下内容即可添加它作为依赖项。

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

如果你想在Windows环境下使用Edge，你需要通过Visual Studio Installer安装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。

已知问题和限制

Edge功能在以Administrator身份运行时在Windows 10上不起作用。这是#96中提出的问题的根源，并且是这里跟踪的Microsoft.Toolkit.Win32中的一个错误的结果。
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。

建议

如果你喜欢类型安全，请使用Elm或PureScript^*编写你的前端，或者使用编译为asm.js的Rust前端框架，如yew。
使用parcel对你的前端代码进行捆绑和压缩。
使用inline-assets将所有资产（CSS、JS、HTML）内联到一个index.html文件中，并使用include_str!()将其嵌入Rust应用程序中。
如果你的应用程序在Windows上运行，可以通过添加图标使其看起来更专业™
使用自定义npm脚本或just或cargo-make来自动化构建步骤。
使用前端中的localStorage或后端中的rustbreak使应用程序状态在会话之间持久化。
顺便说一下，您也可以通过本地http服务器（例如绑定到临时端口）来提供服务，而不是通过js api注入应用程序资源。
祝您编码愉快 :)

*免费的PureScript By Example书籍包含了几个针对PureScript初学者的实用项目。

贡献机会

对您的问题创建一个issue
文档
对该库的API和代码反馈
在非Windows平台上测试它，报告您发现的任何问题
展示您的应用程序
添加一个使用Elm或Rust编译为asm.js的示例
添加一个与后端进行双向通信的PureScript示例
为原始webview库做出贡献：例如，在Windows上添加HDPI支持
使其可能以给定父窗口的子窗口的形式创建webview窗口。这将允许webview用于Rust中的VST音频插件的GUI。

应用想法

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

展示

如果您想在这里列出您的项目，请随时打开一个PR！

Juggernaut - 无坚不摧的程序员编辑器
FrakeGPS - 模拟简单的GPS设备
Compactor - Windows 10文件系统压缩实用程序
neutrino - 基于web-view的Rust GUI前端
SOUNDSENSE-RS - Dwarf Fortress的声音引擎工具
WV Linewise - 在UNIX管道中间添加您自己的交互式HTML/CSS/JS
Bloop - 开发者轻量级美学便签纸

欢迎贡献和反馈 :)

依赖关系

~0–1MB
~21K SLoC