基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(一)

简介: 下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。

前言

身为一名热爱开源的程序员,如果自己的项目在开源社区被star是非常开心的事情,那么如果我们每天工作或者学习的时候打开电脑,就能看到我们的github情况,又或者这个时候有人送给你了一个star,那心情,立马就好起来了,除此之外,之后还会不断扩展其他的好用的组件,来丰富应用。

下面我会从这个应用的一些功能的实现细节讲起,包括初始化托盘菜单开机自启存储用户数据GitHub信息健康翻页时钟打包配置除此之外还有还有项目的使用方式功能介绍,希望可以给掘友带来帮助。

项目使用vue + electron,是为了未使用过electron,但是熟悉Vue的掘友提供可扩展开发的方式,其中项目为了掘友们可以开发出自己的桌面组件,已经在其目录下制定好了基本的布局与路由,掘友们可以据此随心开发,希望掘友们可以创造出出好玩的桌面组件。

应用初始化

在app目录入口文件main.js中我们需要如下工作:

  1. 引入模块
  2. 选择模式(因为选要有调试模式使用一些工具)
  3. 注册协议
  4. 窗口配置
  5. 就绪启动

调试模式

通过环境的判断来设置布尔值

const isDevelopment = process.env.NODE_ENV !== 'production'
复制代码

通过布尔值来进行开发工具的启用,因为是使用vue+electron,所以用到了vue-devtools

app.on('ready', () => {
  if (isDevelopment && !process.env.IS_TEST) {
    try {
      installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
})
复制代码

就绪启动

在应用初始化的ready事件中进行启动,关于app控制应用程序的事件生命周期。可以参考官方文档app | Electron (electronjs.org)

app.on('ready', async () => {
  initTray()
  appEvent()
  setTimeout(() => {
    autoWindow()
  }, 300)
  autoUpdater.checkForUpdatesAndNotify()
})
复制代码
  • 初始化系统托盘:initTray()
  • 应用事件监听: appEvent()
  • 启动窗口:autoWindow()(这里需要注意的是使用了定时器是因为其用于适配Linux系统窗口不透明的问题)
  • 检查更新:autoUpdater.checkForUpdatesAndNotify()

路由

托盘菜单

electron托盘的创建是依靠Tray来实现的,所以我们第一步是创建一个Tray,参数为图标路径

let TrayMenu = new Tray(__static + '/icon.png')
复制代码

之后通过Menu.buildFromTemplate创建菜单项,比如

const contextMenu = Menu.buildFromTemplate([
    { label: '插件列表', submenu: pluginMenu },
    { label: '插件自启', submenu: pluginOpen },
    { label: '退出', click: () => app.quit() },
  ])
复制代码

通过我们创建的托盘实例调用setContextMenu,传入我们的菜单项,设置菜单

TrayMenu.setContextMenu(contextMenu)
复制代码

最后在入口文件调用即完成托盘的初始化

开机自启

  1. 在托盘模块引入app
import { app, Tray, Menu } from 'electron'
复制代码
  1. 在托盘中设置开机自启功能项
{
      label: '开机自启',
      type: 'checkbox',
      checked: app.getLoginItemSettings.openAtLogin,
      click: () => {
      },
},
复制代码
  1. 获得是否选择开机自启的布尔值
const open = app.getLoginItemSettings.openAtLogin
复制代码

4.调用setLoginItemSettingsapi设置启动

app.setLoginItemSettings({ openAtLogin: !open })
复制代码

存储用户数据

由于桌面应用退出后需要保存用户的信息,vue是无法保存的,所以我使用了electron-store,在应用退出后来保存用户的github数据,并且它是以文件形式缓存数据,保存,当然我们首先npm install electron-store,这里是封装了一个storage文件模块化调用即可。

import Store from 'electron-store'
// 初始化 store
const store = new Store({
  // 版本更新初始化
  migrations: {
    '>=0.3.0': (store) => {
      store.clear()
    },
  },
})
// 获取存储值
export const cget = (node, key, def) => {
  const value = store.get(node + '.' + key)
  return value === undefined ? def : value
}
// 设置存储值
export const cset = (node, key, value) => {
  return store.set(node + '.' + key, value)
}
复制代码

GitHub信息监控

数据获取

在页面组件中我们通过上面封装的函数进行数据的设置与获取,这里又封装了一下,让参数更加自由一些

// 信息获取
const get = (key, def) => {
  return cget('github', key, def)
}
// 信息保存
const set = (key, value) => {
  return cset('github', key, value)
}
复制代码

在我们的data项中直接初始化设置数量,比如star数

star: get('star', 0), // star 数
 newStar: get('star', 0), // 新 star 数
复制代码

实时更新

在mounted生命周期中使用定时器调用getGithubData()函数进行数据更新,一分钟更新一次

setInterval(() => {
      this.getGithubData()
}, 60000)
复制代码

数据更新

定时获取后我们是通过计算属性来拿到实时更新的加减,下面拿计算属性中的fork数更新举例

forkChange() {
      const changeNum = this.newFork - this.fork
      if (changeNum != 0) {
        this.sendNotice('fork is changed')
      }
      if (changeNum >= 0) {
        return '+' + changeNum
      } else {
        return changeNum
      }
    },
复制代码

做一个数据的判断,并且如果有数据更新就触发提示函数。


目录
打赏
0
0
0
0
69
分享
相关文章
|
18天前
|
vue使用iconfont图标
vue使用iconfont图标
103 1
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
162 64
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
54 8
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
55 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
51 1
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
45 1
vue学习第四章