项目介绍
登录图
界面图
项目的初衷：
公司内部员工，获取解决问题，发布员工租房，二手物品出售等交易信息和咨询问题，可以清楚的了解公司组织架构以及企业文化
公司行政人事，发布公司规章制度和企业最新公告的OA平台
electron项目有哪些有意思的功能：
-
下载文件到指定目录（1颗星）
渲染进程代码 // 下载附件 downloadFile(val) { const url = `http://office.xmhaini.com/api/public/uploads/admin/noticeFile/${val}` // this.$electron.shell.openExternal(url) this.$electron.remote.dialog.showOpenDialog({ properties: ['openDirectory'], // 选择操作，此处是打开文件夹 filters: [{ name: 'All', extensions: ['*'] }] // 过滤条件，默认全部文件 }, res => { // 回调函数内容，此处是将路径内容显示在input框内 if (res) { // 渲染器进程代码 const downloadAddress = res[0] //此处与主进程通信，将下载文件地址与存放地址传给主进程 this.$electron.ipcRenderer.send('download', downloadAddress + '+' + url) } else { this.$message.warning('请先选择文件目录') } }) }, 主进程代码： //引入ipcMain，监听渲染进程 const { ipcMain, BrowserWindow, app } = require('electron') // 下载文件 ipcMain.on('download', (evt, args) => { const arr = args.split('+') downloadpath = arr[0] // 文件要存放的本地地址 const folderpath = arr[1] // 文件的链接 mainWindow.webContents.downloadURL(folderpath) }) // 监听文件下载事件 mainWindow.webContents.session.on('will-download', (event, item, webContents) => { item.setSavePath(downloadpath + `\\${item.getFilename()}`) // 设置文件存放位置 item.once('done', (event, state) => { if (state === 'completed') { mainWindow.webContents.send('success-down', state) } else { mainWindow.webContents.send('error-down') } }) }) -
消息通知时， 闪烁任务栏的图标（2颗星）
主要实现思路是，与服务器建立websocket连接，当接收到新消息通知，就给主进程发送广播，主进程监听到广播，调用闪烁函数 渲染进程代码： semdNotify() { createSocket(this.token) // 创建 // 监听ws数据响应 const getDataFunc = e => { const data = e.detail.data.data if (data === '200') { this.$store.dispatch('GetUnReadNum') this.$electron.ipcRenderer.send('shan-shuo') if (this.systemSettingObj.soundChoice) { // 新消息提示音 this.$refs.sound.play() } } } window.addEventListener('onmessageWS', getDataFunc) } 主进程代码： ipcMain.on('shan-shuo', e => { if (currentShan) { // 节流阀 // 闪烁图标 timer = setInterval(function() { count++ if (count % 2 === 0) { tray.setImage(path.join(__static, 'empty.ico')) } else { tray.setImage(path.join(__static, 'favicon-active.ico')) } currentShan = false }, 500) }}) -
获取服务器上最新版本，自动更新（3颗星）
思路是通过electron提供的autoUpdater方法，首先设置远端存放更新包服务器路径，然后依次监听更新，整个更新生命周期包括，error监听错误， checking-for-update监听到有差异文件，update-available，更新开始，download-progress更新进度，update-downloaded 更新完成，退出并自动安装更新。 // 执行自动更新检查autoUpdater.checkForUpdates() //退出并安装更新 autoUpdater.quitAndInstall() -
开机自启动（1颗星）
const ex = process.execPath // 获取可执行文件位置 ipcMain.on('openAutoStart', () => { app.setLoginItemSettings({ openAtLogin: true, path: ex, args: [] }) }) // 关闭 开机自启动 ipcMain.on('closeAutoStart', () => { app.setLoginItemSettings({ openAtLogin: false, path: ex, args: [] }) }) -
快捷键唤出应用（1颗星）
import { globalShortcut } from 'electron' const ret = globalShortcut.register('ctrl+h+n', function() { mainWindow.show() }) -
自定义顶部操作栏，放大缩小，关闭应用（2颗星）
最大化：mainWindow.maximize() 最小化： mainWindow.minimize() 还原：mainWindow.restore() 最大化和还原难点在于监听，双击窗口顶部，还原，避免最大化还原按钮未随窗口改变而改变 mounted中监听原型链上的unmaximize方法： remote.getCurrentWindow().addListener('unmaximize', _ => { this.$nextTick(_ => { this.isMax = false }) }) -
打开外部浏览器到指定网址（1颗星）
this.$electron.shell.openExternal(linkUrl) // linkUrl为网页地址 -
天气预报（2颗星）
https://v0.yiketianqi.com/api?version=v9&appid=61281254&appsecret=xXGs7BhV&city=${this.currentCity}&vue=1`
#初始化项目
1.安装vue/cli-init
cnpm i -g @vue/cli-init， 因为electron目前是基于vue-cli2.x的
2.使用创建项目
vue init simulatedgreg/electron-vue my-vue-app // 本项目使用的electron-vue，是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动建立起 electron 应用程序，很方便。
3.创建好项目后如下图，这时候就开始写项目了，main主进程中，主要是使用electron提供的api，控制窗口，与系统之间的联系和逻辑，如创建窗口，托盘，监听服务器差异文件用来提示更新等，reneder渲染进程主要负责样式结构编写。
初始化项目图
目录结构
#项目打包
-
项目第一次打包,需要四个依赖文件,提示下载。
坑点：使用了npm下载的还是有文件未找到,然后nrm ls看了一眼,发现还是淘宝镜像,nrm use npm 后重新下载node_models，重新下载还是报错, Error !include: could not find: ****StdUtils.nsh"，这个原因是文件夹路径有中文!!总结就是，依赖必须用npm下载，项目路径不可包含中文。
总结：
本项目功能相对简单，基本上都能在文档中找到想要实现的功能，我的第一个桌面应用，总体来说还比较满意，学到了很多新知识，没有想象中难，而且做完后，感觉比web项目有成就感，可能是比较新奇，最后附上文档地址，以便有缘人开启新世界electron文档和地址二，。
