关于rust:taurivue3vite3封装多窗体tauri窗口多开器

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 跨平台聊天利用