1. electron-vue 中隐藏顶部菜单
// src/main/index.js
mainWindow.setMenu(null)
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
mainWindow.setMenu(null)
}
2. electron-vue 中隐藏关闭 最大化 最小化按钮
// src/main/index.js
mainWindow = new BrowserWindow({
height: 620,
useContentSize: true,
width: 1280,
frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/
})
3 .electron-vue 自定义关闭/最大化最小化按钮
// 注意在mac下不需要监听窗口最大最小化、以为系统默认支持,这个只是针对windows平台
ipc.on('window-min',function() {
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
ipc.on('window-close',function() {
mainWindow.close();
})
4. electron-vue 自定义导航可拖拽
- 可拖拽的
css
:-webkit-app-region: drag;
- 不可拖拽的
css
:-webkit-app-region: no-drag;
一..配置开发环境
1. 项目搭建
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
2. 安装一些依赖
# 安装 sass-loader:
npm install --save-dev sass-loader node-sass
# 安装elementUI、js-md5
npm i element-ui js-md5 -S
- 在
.electron-vue/webpack.renderer.config.js
中配置sass-loader
就可以编写``sass`了 -
<!--vue 文件中修改 style 为如下代码:--> <style lang="scss"> body { /* SCSS */ } </style>
二. 主进程配置
1. src/main/index.js
function createWindow () {
// 去掉顶部菜单
mainWindow.setMenu(null)
// 菜单项
require('./model/menu.js');
// 系统托盘相关
require('./model/tray.js');
2. src/main/menu.js
菜单配置
const { Menu,ipcMain,BrowserWindow} = require('electron');
//右键菜单
const contextMenuTemplate=[
{
label: '复制', role: 'copy' },
{
label: '黏贴', role: 'paste' },
{ type: 'separator' }, //分隔线
{
label: '其他功能',
click: () => {
console.log('click')
}
}
];
const contextMenu=Menu.buildFromTemplate(contextMenuTemplate);
ipcMain.on('contextmenu',function(){
contextMenu.popup(BrowserWindow.getFocusedWindow());
})
3. src/main/tray.js
系统托盘配置
托盘点击监听事件只有在windows
下才生效,mac
系统默认支持
(function () {
const path=require('path');
const {app,Menu,BrowserWindow,Tray, shell} = require('electron');
//创建系统托盘
const tray = new Tray(path.resolve(__static, 'favicon.png'))
//给托盘增加右键菜单
const template= [
{
label: '设置',
click: function () {
shell.openExternal('http://blog.poetries.top')
}
},
{
label: '帮助',
click: function () {
shell.openExternal('http://blog.poetries.top/2019/01/06/electron-summary')
}
},
{
label: '关于',
click: function () {
shell.openExternal('https://github.com/poetries/yuqing-monitor-electron')
}
},
{
label: '退出',
click: function () {
// BrowserWindow.getFocusedWindow().webContents().send('close-main-window');
app.quit();
}
}
];
const menu = Menu.buildFromTemplate(template);
tray.setContextMenu(menu);
tray.setToolTip('舆情监控系统');
//监听关闭事件隐藏到系统托盘
// 这里需要注意:在window中才生效,mac下系统默认支持
// var win = BrowserWindow.getFocusedWindow();
// win.on('close',(e)=>{
// if(!win.isFocused()){
// win=null;
// }else{
// e.preventDefault(); /*阻止应用退出*/
// win.hide(); /*隐藏当前窗口*/
// }
// })
// //监听托盘的双击事件
// tray.on('double-click',()=>{
// win.show();
// })
})()
4. src/main/shortCut.js
快捷键配置
在src/main/index.js
中引入(require('src/main/shortCut.js')
)即可,不需要放到app
监控中
var {globalShortcut, app} = require('electron')
app.on('ready', ()=>{
// 注册全局快捷键
globalShortcut.register('command+e', ()=>{
console.log(1)
})
// 检测快捷键是否注册成功 true是注册成功
let isRegister = globalShortcut.isRegistered('command+e')
console.log(isRegister)
})
// 退出的时候取消全局快捷键
app.on('will-quit', ()=>{
globalShortcut.unregister('command+e')
})
三. 渲染进程配置
1. src/render/main.js配置
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueHighcharts from 'vue-highcharts';
import VueSocketIO from 'vue-socket.io'
Vue.use(ElementUI);
Vue.use(VueHighcharts);
//引入socket.io配置连接
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://118.123.14.36:3000',
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
}
}))
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
components: { App },
router,
store,
template: '<App/>'
}).$mount('#app')
2. 路由配置src/renderer/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: require('@/components/Home').default
},
{
path: '/report',
name: 'report',
component: require('@/components/Report').default
},
{
path: '/negativereport',
name: 'negativereport',
component: require('@/components/NegativeReport').default
},
{
path: '/positivereport',
name: 'positivereport',
component: require('@/components/PositiveReport').default
},
{
path: '/keyword',
name: 'keyword',
component: require('@/components/KeyWord').default
},
{
path: '/alarm',
name: 'alarm',
component: require('@/components/Alarm').default
},
{
path: '/msg',
name: 'msg',
component: require('@/components/Msg').default
},
{
path: '*',
redirect: '/home'
}
]
})
3. 在渲染进程中使用主进程方式
// electron挂载到了vue实例上 $electron
this.$electron.shell
四. 多平台打包
需要注意的是打包mac
版本在mac
系统上打包,打包window
则在windows
上打包,可以避免很多问题
# 在不同平台上执行即可打包应用
npm run build
1. electron 中构建应用最常用的模块
electron-packager
electron-builder
electron-packager
和electron-builder
在自己单独创建的应用用也可以完成打包功 能。但是由于配置太复杂所以我们不建议单独配置
2. electron-forge
https://github.com/electron-userland/electron-forge
electron-forge package
electron-forge make
electron-forge make
3. electron-vue中的打包方式
# https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using-electron-packager. html
# 之需要执行一条命令
npm run build
2 修改应用信息
1. 修改package.json
2. 修改src/index.ejs标题信息
3. 修改build/icons图标
4.3 打包遇到的问题
1. 创建应用托盘的时候可能会遇到错误
- 把托盘图片放在根目录
static
里面,然后注意下面写法。 -
var tray = new Tray(path.join(__static,'favicon.ico'))
- 如果托盘路径没有问题,还是包托盘相关错误的话,把托盘对应的图片换成
.png
格式重试
2. 模块问题可能会遇到的错误
解决办法
- 删掉
node_modules
然后重新用npm install
安装依赖 - 用
yarn
来安装模块 - 用手机创建一个热点电脑连上热点重试
最后执行yarn run build
即可
项目截图
舆情监控系统页面
系统系统托盘、electron
消息通知 (类似腾讯新闻)
消息通知