前言
身为一名热爱开源的程序员,如果自己的项目在开源社区被star是非常开心的事情,那么如果我们每天工作或者学习的时候打开电脑,就能看到我们的github情况,又或者这个时候有人送给你了一个star,那心情,立马就好起来了,除此之外,之后还会不断扩展其他的好用的组件,来丰富应用。
下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。
项目使用vue + electron,是为了未使用过electron,但是熟悉Vue的掘友提供可扩展开发的方式,其中项目为了掘友们可以开发出自己的桌面组件,已经在其目录下制定好了基本的布局与路由,掘友们可以据此随心开发,希望掘友们可以创造出出好玩的桌面组件。
应用初始化
在app目录入口文件main.js
中我们需要如下工作:
- 引入模块
- 选择模式(因为选要有调试模式使用一些工具)
- 注册协议
- 窗口配置
- 就绪启动
调试模式
通过环境的判断来设置布尔值
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) 复制代码
最后在入口文件调用即完成托盘的初始化
开机自启
- 在托盘模块引入app
import { app, Tray, Menu } from 'electron' 复制代码
- 在托盘中设置开机自启功能项
{ label: '开机自启', type: 'checkbox', checked: app.getLoginItemSettings.openAtLogin, click: () => { }, }, 复制代码
- 获得是否选择开机自启的布尔值
const open = app.getLoginItemSettings.openAtLogin 复制代码
4.调用setLoginItemSettings
api设置启动
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 } }, 复制代码
做一个数据的判断,并且如果有数据更新就触发提示函数。