探索 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 = result
  dialogVisible.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)

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

项目地址：地址。