Tauri 构建跨端桌面应用程序。具备 更小、更快、更平安 的个性。

tauri 相较于 electron 构建的利用更快、更小。同样的hello world我的项目，electron 打包后体积64M，而 tauri 打包后体积4M。

因为 electron 应用了体积宏大的 Chromium 内核和Nodejs。所以构建慢，打包后体积大。

目前在github下面star达到53K。而且增长趋势很快。

开始之前

在开发之前您须要装置 Rust 及其他零碎依赖。

  • "C++ 生成工具" 和 Windows 10 SDK。
  • Tauri 须要 WebView2 能力在 Windows 上出现网页内容，所以您必须先装置WebView2。
  • Rust

https://tauri.app/zh/v1/guide...

实现了以上几个步骤，接下来就能欢快的开发了。

tauri初始化我的项目

npm create tauri-app

如下图：tauri提供了十分多的前端框架供选择。

运行调试

tauri dev

打包构建

tauri build

上面就介绍通过封装 WebviewWindow 构建多窗口。

import { WebviewWindow } from '@tauri-apps/api/window'const webview = new WebviewWindow('theUniqueLabel', {  url: 'index.html',})webview.once('tauri://created', function () {  // webview window successfully created})webview.once('tauri://error', function (e) {  // an error happened creating the webview window})
createWin({    label: 'Home',    title: '主页',    url: '/home',    width: 800,    height: 600,})

新建 windows 目录，用来封装多窗口及调用办法。

/** * @desc    封装新开多窗体 * @author: YXY  Q：282310962 * @time    2022.10 */import { WebviewWindow, appWindow, getAll, getCurrent } from '@tauri-apps/api/window'import { relaunch, exit } from '@tauri-apps/api/process'import { emit, listen } from '@tauri-apps/api/event'import { setWin } from './actions'// 零碎参数配置export const windowConfig = {    label: null,            // 窗口惟一label    title: '',              // 窗口题目    url: '',                // 路由地址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 = null    }    // 获取窗口    getWin(label) {        return WebviewWindow.getByLabel(label)    }    // 获取全副窗口    getAllWin() {        return getAll()    }    // 创立新窗口    async createWin(options) {        const args = Object.assign({}, windowConfig, options)        // 判断窗口是否存在        const existWin = getAll().find(w => w.label == args.label)        if(existWin) {            if(existWin.label.indexOf('main') == -1) {                await existWin?.unminimize()                await existWin?.setFocus()                return            }            await existWin?.close()        }        // 创立窗口对象        let win = new WebviewWindow(args.label, args)                // 是否最大化        if(args.maximized && args.resizable) {            win.maximize()        }        // 窗口创立结束/失败        win.once('tauri://created', async() => {            console.log('window create success!')            ...        })        win.once('tauri://error', async() => {            console.log('window create error!')        })    }    // 开启主过程监听事件    async listen() {        // 创立新窗体        await listen('win-create', (event) => {            console.log(event)            this.createWin(JSON.parse(event.payload))        })        // 显示窗体        await listen('win-show', async(event) => {            if(appWindow.label.indexOf('main') == -1) return            await appWindow.show()            await appWindow.unminimize()            await appWindow.setFocus()        })        // 暗藏窗体        await listen('win-hide', async(event) => {            if(appWindow.label.indexOf('main') == -1) return            await appWindow.hide()        })        // 退出利用        await listen('win-exit', async(event) => {            setWin('logout')            await exit()        })        // 重启利用        await listen('win-relaunch', async(event) => {            await relaunch()        })        // 主/渲染过程传参        await listen('win-setdata', async(event) => {            await emit('win-postdata', JSON.parse(event.payload))        })    }}export default Windows
import { WebviewWindow } from '@tauri-apps/api/window'import { emit } from '@tauri-apps/api/event'// 创立新窗口export async function createWin(args) {    await emit('win-create', args)}// 获取窗口export async function getWin(label) {    return await WebviewWindow.getByLabel(label)}/** * @desc 设置窗口 * @param type {string} 'show'|'hide'|'close'|'min'|'max'|'max2min'|'exit'|'relaunch' */export async function setWin(type) {    await emit('win-' + type)}// 登录窗口export async function loginWin() {    await createWin({        label: 'Login',        title: '登录',        url: '/login',        width: 320,        height: 420,        resizable: false,        alwaysOnTop: true,    })}// ...

通过如下形式即可疾速创立多窗口。

const createManageWin = async() => {    createWin({        label: 'Manage',        title: '治理页面',        url: '/manage',        width: 600,        height: 450,        minWidth: 300,        minHeight: 200    })}const createAboutWin = async() => {    createWin({        label: 'About',        title: '对于页面',        url: '/about',        width: 500,        height: 500,        resizable: false,        alwaysOnTop: true    })}

只须要传入配置参数即可。大家还能够进行进一步优化封装办法。

OK，基于tauri+vue3创立多窗口就先分享到这里。

Electron-Vue3-MacUI仿MacOs桌面治理框架

Vue3.0+Electron仿QQ聊天室|electron跨平台聊天利用