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)
最终呈现的效果如下所示:
项目地址:地址。