RUST语言跨平台GUI框架Dioxus制作桌面应用入门教程(一)

简介

构建外观和使用体验在各操作系统上都相同的独立原生桌面应用程序。

使用 Dioxus desktop 构建的应用程序使用系统 WebView 来渲染页面。这使得应用程序的最终体积比使用其他 WebView 渲染器的应用程序小得多(通常小于 5MB)。

尽管桌面应用程序是在 WebView 中渲染的,但您的 Rust 代码是本机运行的。这意味着浏览器 API 不可用,因此渲染 WebGL、Canvas 等不像在 Web 上那样容易。但是,可以访问原生系统 API,因此流媒体、WebSockets、文件系统等都可以通过系统 API 轻松访问。

Dioxus desktop 是基于 Tauri 构建的。目前,Dioxus 对菜单栏、事件处理等的抽象有限。在某些地方,您可能需要直接使用 Tauri——通过 Wry 和 Tao。

安装

在开始之前,先安装好rust环境,直接从官方网站安装即可。此处省略。

Windows系统

Windows 应用程序依赖 WebView2——一个应该在所有现代 Windows 发行版中安装的库。如果你安装了 Edge,那么 Dioxus 可以正常工作。如果你没有 WebView2,可以通过微软安装它。微软提供了三种选择:

  1. 一个小型“evergreen”引导程序,从微软的 CDN 获取安装程序。
  2. 一个小型安装程序,从微软的 CDN 获取 WebView2。
  3. 在最终二进制文件中静态链接 WebView2 的版本,用于离线用户。

对于开发目的,请使用选项 1。

Linux系统

WebView运行在 Linux上程序需要WebkitGtk,它可能是.rpm或.deb中依赖树的一部分。但是,有的用户可能已经拥有了WebkitGtk。

sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev

当使用Debian/bullseye时,libappindicator3-dev不再可用,而是由libayatana-appindicator3-dev取代

# on Debian/bullseye use:
sudo apt install libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev

Mac系统 

Mac系统 已经内置了所有的东西,如果使用的是nightly版本,可能有会问题,去官方查找解决吧。

开始使用

创建一个新的crate

cargo new --bin demo
cd demo

添加相关的依赖

cargo add dioxus
cargo add dioxus-desktop

在编辑器(我用vscode)中输入以下代码:

#![allow(non_snake_case)]
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
use dioxus::prelude::*;

fn main() {
    // launch the dioxus app in a webview
    dioxus_desktop::launch(App);
}

// define a component that renders a div with the text "Hello, world!"
fn App(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            "Hello, world!"
        }
    })
}

执行

cargo run

执行结果 

PS D:\project\dioxus\demo> cargo run       
   Compiling demo v0.1.0 (D:\project\dioxus\demo)
    Finished dev [unoptimized + debuginfo] target(s) in 3.50s
     Running `target\debug\demo.exe`

阅读列表:

RUST语言跨平台GUI框架Dioxus制作桌面应用入门教程之编写第一个组件(二)
  • 15
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值