vue3+tauri创建多开窗口桌面应用

最近一直在体验 Tarui 结合 Vue3 开发桌面端exe应用。之前也开发了几个 Electron 桌面应用。相较于 Electron 构建慢、打包后程序体积大&＃xff0c;Tauri 构建的程序则具有更小、更快、更安全的优势。

在github上面star已经达到了53K。

https://github.com/tauri-apps/tauri

使用 tauri 和 electron 构建同样的一个 Test 程序。

electron打包体积 53 M&＃xff0c;tauri打包体积才只有 3 M。

由于 electron 使用了体积庞大的 Chromium 内核和Nodejs&＃xff0c;所以每次构建新开应用&＃xff0c;打开非常慢。

如下图&＃xff1a;tauri构建应用还提供了很多前端初始化框架模板。

开发准备

在开发之前&＃xff0c;首先您需要安装 Rust 及其他系统依赖。

• “C&＃43;&＃43; 生成工具” 和 Windows 10 SDK。
• Tauri 需要 WebView2 才能在 Windows 上呈现网页内容&＃xff0c;所以您必须先安装 WebView2。
• Rust

大家可以请前往 https://tauri.app/zh/v1/guides/getting-started/prerequisites 来查看详细操作步骤。

tauri创建初始化项目

npm create tauri-app


开发/打包构建

tauri dev
tauri build


官网提供了多种构建多窗口方式&＃xff0c;具体的操作大家可以去查看。
https://tauri.app/zh/v1/guides/features/multiwindow

接下来给大家分享tauri封装多窗口&＃xff0c;调用方式如下&＃xff1a;

createWin({
label: &＃39;Home&＃39;,
title: &＃39;主页&＃39;,
url: &＃39;/home&＃39;,
width: 800,
height: 600,
})


url就是vue-router创建的path路径&＃xff0c;这样就能快速创建一个新窗口。

index.js文件

/**
* &＃64;desc 封装多开窗口
* &＃64;author: YXY Q&＃xff1a;282310962
* &＃64;time 2022.10
*/
import { WebviewWindow, appWindow, getAll, getCurrent } from &＃39;&＃64;tauri-apps/api/window&＃39;
import { relaunch, exit } from &＃39;&＃64;tauri-apps/api/process&＃39;
import { emit, listen } from &＃39;&＃64;tauri-apps/api/event&＃39;
import { setWin } from &＃39;./actions&＃39;
// 系统参数配置
export const windowConfig &＃61; {
label: null, // 窗口唯一label
title: &＃39;&＃39;, // 窗口标题
url: &＃39;&＃39;, // 路由地址url
width: 900, // 窗口宽度
height: 640, // 窗口高度
minWidth: null, // 窗口最小宽度
minHeight: null, // 窗口最小高度
x: null, // 窗口相对于屏幕左侧坐标
y: null, // 窗口相对于屏幕顶端坐标
center: true, // 窗口居中显示
resizable: true, // 是否支持缩放
maximized: false, // 最大化窗口
decorations: false, // 窗口是否无边框及导航条
alwaysOnTop: false, // 置顶窗口
}
class Windows {
constructor() {
this.mainWin &＃61; null
}
// 获取窗口
getWin(label) {
return WebviewWindow.getByLabel(label)
}
// 获取全部窗口
getAllWin() {
return getAll()
}
// 创建新窗口
async createWin(options) {
const args &＃61; Object.assign({}, windowConfig, options)
// 判断窗口是否存在
const existWin &＃61; getAll().find(w &＃61;> w.label &＃61;&＃61; args.label)
if(existWin) {
if(existWin.label.indexOf(&＃39;main&＃39;) &＃61;&＃61; -1) {
await existWin?.unminimize()
await existWin?.setFocus()
return
}
await existWin?.close()
}
// 创建窗口对象
let win &＃61; new WebviewWindow(args.label, args)

// 是否最大化
if(args.maximized && args.resizable) {
win.maximize()
}
// 窗口创建完毕/失败
win.once(&＃39;tauri://created&＃39;, async() &＃61;> {
console.log(&＃39;window create success!&＃39;)
...
})
win.once(&＃39;tauri://error&＃39;, async() &＃61;> {
console.log(&＃39;window create error!&＃39;)
})
}
// 开启主进程监听事件
async listen() {
// 创建新窗体
await listen(&＃39;win-create&＃39;, (event) &＃61;> {
console.log(event)
this.createWin(JSON.parse(event.payload))
})
// 显示窗体
await listen(&＃39;win-show&＃39;, async(event) &＃61;> {
if(appWindow.label.indexOf(&＃39;main&＃39;) &＃61;&＃61; -1) return
await appWindow.show()
await appWindow.unminimize()
await appWindow.setFocus()
})
// 隐藏窗体
await listen(&＃39;win-hide&＃39;, async(event) &＃61;> {
if(appWindow.label.indexOf(&＃39;main&＃39;) &＃61;&＃61; -1) return
await appWindow.hide()
})
// 退出应用
await listen(&＃39;win-exit&＃39;, async(event) &＃61;> {
setWin(&＃39;logout&＃39;)
await exit()
})
// 重启应用
await listen(&＃39;win-relaunch&＃39;, async(event) &＃61;> {
await relaunch()
})
// 主/渲染进程传参
await listen(&＃39;win-setdata&＃39;, async(event) &＃61;> {
await emit(&＃39;win-postdata&＃39;, JSON.parse(event.payload))
})
}
}
export default Windows


actions.js文件

/**
* 处理渲染器进程到主进程的异步通信
*/
import { WebviewWindow } from &＃39;&＃64;tauri-apps/api/window&＃39;
import { emit } from &＃39;&＃64;tauri-apps/api/event&＃39;
/**
* &＃64;desc 创建新窗口
*/
export async function createWin(args) {
await emit(&＃39;win-create&＃39;, args)
}
/**
* &＃64;desc 获取窗口
* &＃64;param args {string}
*/
export async function getWin(label) {
return await WebviewWindow.getByLabel(label)
}
/**
* &＃64;desc 设置窗口
* &＃64;param type {string} &＃39;show&＃39;|&＃39;hide&＃39;|&＃39;close&＃39;|&＃39;min&＃39;|&＃39;max&＃39;|&＃39;max2min&＃39;|&＃39;exit&＃39;|&＃39;relaunch&＃39;
*/
export async function setWin(type) {
await emit(&＃39;win-&＃39; &＃43; type)
}
/**
* &＃64;desc 登录窗口
*/
export async function loginWin() {
await createWin({
label: &＃39;Login&＃39;,
title: &＃39;登录&＃39;,
url: &＃39;/login&＃39;,
width: 320,
height: 420,
resizable: false,
alwaysOnTop: true,
})
}
// ...


在需要创建新窗口的.vue页面&＃xff0c;引入 actions.js 文件。

import { loginWin, createWin } from &＃39;&＃64;/windows/actions&＃39;

const manageWin &＃61; () &＃61;> {
createWin({
label: &＃39;Manage&＃39;,
title: &＃39;管理页面&＃39;,
url: &＃39;/manage&＃39;,
width: 600,
height: 450,
minWidth: 300,
minHeight: 200
})
}
const aboutWin &＃61; () &＃61;> {
createWin({
label: &＃39;About&＃39;,
title: &＃39;关于页面&＃39;,
url: &＃39;/about&＃39;,
width: 500,
height: 500,
resizable: false,
alwaysOnTop: true
})
}


这样就能愉快随意的创建多窗口了&＃xff0c;大家还可以在此基础上优化一些功能。

好了&＃xff0c;今天的分享就先到这里吧&＃xff0c;后续还会分享一些tauri实例项目&＃xff0c;到时也会进行一些技术分享。

最后附上几个 electron&＃43;vue3 实例项目

vue3&＃43;electron开发仿QQ桌面应用程序

vite2&＃43;electron&＃43;elementPlus仿macOs桌面框架