网站优化西安,如何做自己个人网站,wordpress yeti,网站建设不开单Electron是一个开源的桌面应用程序开发框架#xff0c;它允许开发者使用Web技术#xff08;如 HTML、CSS 和 JavaScript#xff09;构建跨平台的桌面应用程序#xff0c;它的出现极大地简化了桌面应用程序的开发流程#xff0c;让更多的开发者能够利用已有的 Web 开发技能… Electron是一个开源的桌面应用程序开发框架它允许开发者使用Web技术如 HTML、CSS 和 JavaScript构建跨平台的桌面应用程序它的出现极大地简化了桌面应用程序的开发流程让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序这对于提升开发效率和应用程序的快速交付具有重要意义。 本文将带领您进入 Electron 的世界探索如何通过其强大的功能和灵活的架构为您的应用程序实现一个完善的用户登录流程具体的框架搭建和基本配置这里就不再赘述了可以参考我之前的文章地址 里面的路由和组件库的配置这里就不再赘述了
目录
框架搭建
首页搭建
登录框搭建
跳转首页 框架搭建
这里就仿照一下新版QQ进行登录界面的内容进行编写 首先我们来到主进程对用户的登录界面进行一个简单的处理代码如下所示 然后我们在App根组件中设置通配符选项然后设置页面不可以进行文字复制
templatediv classcontainerrouter-view/router-view/div
/templatescript setup langts/scriptstyle langscss
* {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.getany, any(https://api.uomg.com/api/rand.qinghua).then((res) {famousRemark.value res.data.content})
}
在html代码中我们拿到名言的接口数据然后通过animationiteration函数设置每执行完一次动画效果之后重新调用接口函数
div classheaderdiv classheader-leftdiv classheader-iconel-icon colorredVideoCamera //el-icon/divdiv classheader-textspan animationiterationgetFamousRemark{{ famousRemark }}/span/div/divdiv classheader-rightdiv classemplace clickhandleEmplaceel-icon :size15Connection classicon //el-icon/divdiv classclose clickhandleCloseel-icon :size15Close //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 classcontentdiv classcontent-titleMY QQ/divdiv classcontent-imageimg :srcavatar alt头像 //divdiv classcontent-loginLoginForm/LoginForm/divdiv classlogin-footerFooter/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
})
然后这里我们再在首页设置一个跳转到登录页的按钮
templatediv classhomediv classheader头部/divdiv classcontainerdiv登录界面/divel-button typeprimary clickgoBack跳转登录页/el-button/div/div
/templatescript setup langts
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) 最终呈现的效果如下所示 项目地址地址。
