前言
身为一名热爱开源的程序员，如果自己的项目在开源社区被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.调用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 } }, 复制代码
做一个数据的判断，并且如果有数据更新就触发提示函数。
