无需WebView，Vue也能开发跨平台桌面应用

前言

一直以来，使用Vue开发桌面应用大部分都是使用基于webview的方案，如electron,tauri等。不依赖webview的，移动端倒有不少，如Weex,NativeScript等，桌面端寥寥无几。
最近，Deft框架完成了Vue3的适配，支持使用Vue+Rust开发跨平台应用，不依赖Webview，目前支持Linux,Windows,MacOS和Android等系统，后续计划将支持鸿蒙和iOS。
快速开始

开始前，系统需要先安装nodejs,Rust,clang14+，如果未安装，直接去官网下载安装即可。
执行下面命令，快速创建新工程，my-vue-app为新工程名称。

1. npm create deft@latest my-vue-app

复制代码

可以根据自己的喜好选择语言和框架，这里，以TypeScript+Vue为例。
命令执行完后，会在当前目录下创建一个my-vue-app项目，执行下面命令启动项目。

1. cd my-vue-app
2. npm install
3. npm run dev

复制代码

启动成功后，会得到如下输出：

1. ...
2. Rspack compiled successfully in 2.31 s
4. ==============================================
5. Press r to run on this device
6. Press a to run on connected android device
7. Press q to quit
8. ==============================================

复制代码

按r，即可开始构建预览应用。首次构建，需要下载依赖，所以耗时可能会比较长，可以配置cargo镜像提高下载速度。
构建成功后，就能看到预览窗口了，可以直接修改ui目录下的JS/TS文件实时预览效果。

资源占用

在Win11下内存占用仅12M，应用体积包20M，压缩后仅9M。
系统接口调用

开发桌面应用的过程中，有时会遇到调用系统接口的需求，特别是开发本地工具类应用的时候。JS本身不提供系统调用的接口，但是Rust可以非常方便的进行系统接口调用，我们可以使用Rust编写系统调用逻辑，然后提供接口给JS调用，从而扩展JS的能力。
以获取系统和内存信息为例，不同系统提供的底层接口往往不一样，为了抹平不同系统之间的差异，我们可以借助sysinfo库来简化我们的工作。
增加依赖

首先，在命令行切换到我们的工程目录，执行以下命令增加cargo依赖。

1. cargo add sysinfo serde

复制代码

定义数据交换结构

然后，需要定义Rust和JS之间的通信数据结构，打开项目下的main.rs，增加如下内容：

1. use deft::js_serialize;
2. use serde::Serialize;
4. #[derive(Serialize)]
5. #[serde(rename_all = "camelCase")]
6. pub struct SysInfo {
7.     pub mem_total: u64,
8.     pub mem_free: u64,
9.     pub mem_used: u64,
10.     pub sys_name: Option<String>,
11.     pub sys_kernel_version: Option<String>,
12.     pub sys_os_version: Option<String>,
13.     pub sys_hostname: Option<String>,
14.     pub cpu_count: usize,
15. }
17. js_serialize!(SysInfo);

复制代码

js_serialize宏在这里的作用是使SysInfo结构体能序列化为js对象，而#[serde(rename_all = "camelCase")]可以将字段的下划线命名规则自动转换成小驼峰命名。
使用Rust编写接口

定义好结构体后，就可以使用Rust编写接口了。继续在main.rs增加如下内容：

1. use deft::js_func;
2. use sysinfo::{CpuRefreshKind, MemoryRefreshKind, RefreshKind, System};
5. #[js_func]
6. pub async fn get_sys_info() -> SysInfo {
7.     let mut sys = System::new_with_specifics(
8.         RefreshKind::nothing()
9.             .with_cpu(CpuRefreshKind::everything())
10.             .with_memory(MemoryRefreshKind::everything()),
11.     );
12.     sys.refresh_all();
13.     let mem_total = sys.total_memory();
14.     let mem_used = sys.used_memory();
15.     let mem_free = sys.free_memory();
16.     let sys_name = System::name();
17.     let sys_kernel_version = System::kernel_version();
18.     let sys_os_version = System::os_version();
19.     let sys_hostname = System::host_name();
20.     let cpu_count = sys.cpus().len();
22.     SysInfo {
23.         mem_total,
24.         mem_used,
25.         mem_free,
26.         sys_name,
27.         sys_kernel_version,
28.         sys_os_version,
29.         sys_hostname,
30.         cpu_count,
31.     }
32. }

复制代码

这里有两个点需要关注的：

• 函数使用[js_func]注解，表明这是一个可供js调用的函数。
  
• 函数前使用async关键字修饰，表明这是一个异步执行的函数，这样即使在函数里执行了耗时任务，也不会阻塞UI线程。如果需要在UI线程同步执行，则去掉async即可。
  

注册接口

万事具备，只欠东风。最后，我们只需把我们定义的get_sys_info方法注册到js引擎即可。找到main.rs里的init_js_engine方法，增加以下代码：

1. js_engine.add_global_func(get_sys_info::new());

复制代码

修改UI

接口完成了，现在我们来修改一下我们的UI。
声明接口

如果使用了TS,需要我们声明一下我们使用Rust导出的函数，不然TS编译器会报错。打开deft-env.d.ts文件（或者在项目中新建一个d.ts文件）,增加如下内容：

1. declare interface SysInfo {
2.     cpuCount: number;
3.     memTotal: number;
4.     memFree: number;
5.     memUsed: number;
6.     sysName: string;
7.     sysKernelVersion: string;
8.     sysOsVersion: string;
9.     sysHostname: string;
10. }
12. declare function get_sys_info(): Promise<SysInfo>

复制代码

在JS调用Rust接口

现在我们可以在JS里调用Rust编写的get_sys_info函数了。打开项目里的App.vue文件，script部分修改为:

1. const sysInfo = ref({} as SysInfo);
3. let stopped = false;
5. async function updateInfoLoop() {
6.   if (stopped) {
7.     return;
8.   }
9.   sysInfo.value = await get_sys_info();
10.   setTimeout(updateInfoLoop, 1000);
11. }
13. updateInfoLoop();
15. onUnmounted(() => {
16.   stopped = true;
17. })

复制代码

这里，使用计时器，不停的刷新数据。
最后，在template里把这个数据渲染出来即可。

1. <container :>
2.     <container :>
3.       <container>
4.         <container>系统名称：{{sysInfo.sysName}}</container>
5.         <container>系统版本：{{sysInfo.sysOsVersion}}</container>
6.         <container>内核版本：{{sysInfo.sysKernelVersion}}</container>
7.         <container>处理器数：{{sysInfo.cpuCount}}</container>
8.         <container>总内存量：{{formatMem(sysInfo.memTotal)}}</container>
9.       </container>
10.    
11.       <container :>
12.         <container :>
13.           <container>已用内存：{{ formatMem(sysInfo.memUsed) }}</container>
14.           <container>可用内存：{{ formatMem(sysInfo.memTotal - sysInfo.memUsed) }}</container>
15.         </container>
16.         <container :>
17.           <container :></container>
18.         </container>
19.       </container>
20.     </container>
21. </container>

复制代码

这里的container相当于h5里的div。目前所有元素只支持内联样式，不支持通过class等选择器设置样式。
2025.04.20更新：从v0.4版开始，已支持CSS选择器。
最终运行效果：

打包

执行下面命令即可打包

1. npm run build

复制代码

打包完成后，会在target/你的系统架构/release/目录下生成一个单独的可执行二进制文件（包含编译后的JS代码），将其拷贝出来即可。
相关链接

Deft框架：https://github.com/deft-ui/deft
Deft文档：https://deft-ui.github.io/guides/what-is-deft/
本文代码：https://github.com/deft-ui/deft-vue-examples/tree/main/system-info

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！