探索 Electron：构建用户友好的登录页面流程

Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。

本文将带领您进入 Electron 的世界，探索如何通过其强大的功能和灵活的架构，为您的应用程序实现一个完善的用户登录流程，具体的框架搭建和基本配置这里就不再赘述了，可以参考我之前的文章：地址，里面的路由和组件库的配置，这里就不再赘述了！

框架搭建

首页搭建

登录框搭建

跳转首页

框架搭建

这里就仿照一下新版QQ进行登录界面的内容进行编写：

首先我们来到主进程对用户的登录界面进行一个简单的处理，代码如下所示：

然后我们在App根组件中设置通配符选项，然后设置页面不可以进行文字复制：

<template><div class="container"><router-view></router-view></div>
</template><script setup lang="ts"></script><style lang="scss">
* {margin: 0;padding: 0;box-sizing: border-box;user-select: none; /* 禁止选择文本 */-webkit-user-select: none; /* Safari 和 Chrome 的兼容性 */-moz-user-select: none; /* Firefox 的兼容性 */-ms-user-select: none; /* IE 和 Edge 的兼容性 */
}
.container {width: 100%;height: 100%;
}
</style>

最终达到的效果如下所示：

然后这里我们需要用到element-plus组件库的内容，配置参考开局引出的链接即可，

首页搭建

然后这里我们借助elementPlus组件库中的icon图标设置登录页顶部右侧的一些小按钮，然后左侧设置一个通告栏的效果，在通过栏处我们通过axios拿到对应的接口数据：

let famousRemark = ref('') // 名言数据
// 获取名言数据
const getFamousRemark = () => {axios.get<any, any>('https://api.uomg.com/api/rand.qinghua').then((res) => {famousRemark.value = res.data.content})
}

在html代码中，我们拿到名言的接口数据，然后通过animationiteration函数设置每执行完一次动画效果之后，重新调用接口函数：

<div class="header"><div class="header-left"><div class="header-icon"><el-icon color="red"><VideoCamera /></el-icon></div><div class="header-text"><span @animationiteration="getFamousRemark">{{ famousRemark }}</span></div></div><div class="header-right"><div class="emplace" @click="handleEmplace"><el-icon :size="15"><Connection class="icon" /></el-icon></div><div class="close" @click="handleClose"><el-icon :size="15"><Close /></el-icon></div></div>
</div>

在首页这里我们也给出了一个背景图的效果，最终呈现的效果如下所示：

然后我们给头部右侧的图标设置一下点击事件，这里我们借助electron中的渲染进行的函数往主进程发送对应的信息，获取版本数据是主进程往渲染进程发数据，处理关闭事件是渲染进程往主进程发送数据，如下所示：

const { ipcRenderer } = require('electron')let versions = ref() // 版本数据
let dialogVisible = ref(false) // 弹窗
// 获取版本事件
const handleEmplace = async () => {const result = await ipcRenderer.invoke('getVersion')versions.value = resultdialogVisible.value = true
}
// 处理关闭事件
const handleClose = () => {ipcRenderer.send('close-main-window')
}

然后我们在主进程中开启渲染进程可以使用node模块的配置：

然后调用主进程的ipcMain函数进行数据的传递与接收：

// 获取版本数据
ipcMain.handle('getVersion', () => {const versions = {electron: process.versions.electron,node: process.versions.node,chrome: process.versions.chrome,  // 如果需要的话，也可以获取 Chrome 的版本};return versions;})
// 关闭窗口
ipcMain.on('close-main-window', (event) => {event.preventDefault()mainWindow.close()
})

最终呈现的效果如下所示：

登录框搭建

接下来借助elementPlus中的表单组件进行一个登录框页面的搭建，这里我把表单元素和底部的组件抽离出一个单独的组件进行设置：

<div class="content"><div class="content-title">MY QQ</div><div class="content-image"><img :src="avatar" alt="头像" /></div><div class="content-login"><LoginForm></LoginForm></div><div class="login-footer"><Footer></Footer></div>
</div>

页面搭建很简单，这里就不再一一赘述了，最终呈现的效果如下所示：

然后底部的组件的话，这里使用了一些小的svg增加了一点趣味性：

跳转首页

当我们要跳转的首页的时候，肯定要进行一个页面的大小的调整，不可能也是登录页的大小，所以我们在进入到首页的时候，页面加载完成时向主进程发送一个消息，通知主进程调整页面的大小：

onMounted(() => {ipcRenderer.invoke('home-window-size')
})

来到主进程，我们设置要调整的窗口大小已经设置其他初始化的时候页面的配置：

// 首页窗口大小
ipcMain.handle('home-window-size', () => {mainWindow.setSize(800, 600) // 设置窗口大小mainWindow.setMaximizable(true) // 允许最大化窗口mainWindow.center() // 居中窗口mainWindow.setResizable(true) // 允许窗口缩放, 默认是 false
})

然后这里我们再在首页设置一个跳转到登录页的按钮：

<template><div class="home"><div class="header">头部</div><div class="container"><div>登录界面</div><el-button type="primary" @click="goBack">跳转登录页</el-button></div></div>
</template><script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const { ipcRenderer } = require('electron')const router = useRouter()const goBack = () => {router.push('/')
}onMounted(() => {ipcRenderer.invoke('home-window-size')
})
</script>

在登录页面，我们在页面刚加载的时候也向主进程发送一个跳转窗口大小的指令：

onMounted(() => {ipcRenderer.invoke('login-window-size')
})

在主进程中也通样设置一下登录页面的窗口设置：

// 登录页窗口大小
ipcMain.handle('login-window-size', () => {mainWindow.setSize(320, 450) // 设置窗口大小mainWindow.setMinimizable(true) // 允许最小化窗口mainWindow.center() // 居中窗口mainWindow.setResizable(false) // 允许窗口缩放, 默认是 false
})

然后默认配置上，我们设置不可双击最大化，然后在具体需要最大化的地方再调用下面的函数即可，这里我们设置登录页不可最大化，然后首页可以：mainWindow.setMaximizable(true)