一、外部引入需要用的js
1.将文件目录放在public/static下
是为打包时不被编译的文件
2.在index.html中使用script引入
3.在需要的页面引用
二、electron设置去除顶部导航栏和menu
1.electron项目
在创建BrowserWindow实例的main.js页面添加frame:false属性
2.electron-vue项目
在src/main/index.js文件下找到创建窗口的方法(createWindow),在mainWindow中添加frame:false属性
function createWindow() {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 800,
useContentSize: true,
width: 1200,
frame: false, //顶部菜单显隐
webPreferences: {
nodeIntegration: true,
// 官网似乎说是默认false,但是这里必须设置contextIsolation
contextIsolation: false,
enableRemoteModule: true,
webSecurity: false,
// allowRunningInsecureContent:true
}
})
如图:
三、electron-vue设置一进页面全屏显示
在src/main/index.js文件下找到创建窗口的方法(createWindow),在mainWindow中添加frame:false属性
function createWindow() {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 800,
useContentSize: true,
width: 1200,
frame: false, //顶部菜单显隐
fullscreen: false,//一进页面是否全屏
webPreferences: {
nodeIntegration: true,
// 官网似乎说是默认false,但是这里必须设置contextIsolation
contextIsolation: false,
enableRemoteModule: true, //新增行
webSecurity: false,
// allowRunningInsecureContent:true
}
})
四、electron设置可以拖动区域,模拟原来的顶部导航栏拖拽操作
1.绘制好需要进行拖拽的区域,添加样式:
style='-webkit-app-region: drag;'
2.如果有不拖拽区域,添加样式:
style='-webkit-app-region: nodrag;'
五、electron窗口去除自带导航栏后自定义窗口最小化,窗口全屏,恢复窗口,关闭窗口按钮操作
1.主进程代码:
1>在electron的入口文件main.js中引入ipcMain
const { ipcMain } = require ( ‘electron’ )
2>调用ipcMain实例的on方法,进行放大缩小关闭操作
①最小化
给ipcMain添加 ‘min’ 方法:
ipcMain.on( ‘min’, e=> win .minimize() )
②全屏,恢复窗口
给ipcMain添加 ‘max’ 方法,并在方法中判断窗口是否已经最大化,如果最大化则进行恢复窗口操作,如果不是最大化,进行全屏操作
ipcMain.on( ‘max’ , ()=>{
If( win.isMaximized() ){ //判断窗口是否最大化
win.restore() //将窗口恢复为之前的状态
}else{
win.maximize() //将窗口全屏
}
} )
③关闭窗口
给iocMain添加 ‘close’ 方法:
ipcMain.on( ‘close’ e=>win.close() )
3>在新建窗口配置项里配置webPreferences
let windowConfig = {
width: 800,
height: 600,
frame: false, //顶部菜单显隐
fullscreen: false,//一进页面是否全屏
webPreferences: { //这里是配置项
nodeIntegration: true,
contextIsolation: false
}
}; //窗口配置程序运行窗口的大小
主进程全部代码展示:
2.渲染进程代码:(调用方法的vue页面)
1>在操作栏vue页面从electron引入ipcRenderer对象
const { ipcRenderer } = window.require( ‘electron’ )
2>在三个操作按钮上分别定义click事件,small,big,close
html部分代码:
<el-button style=’-webkit-app-region: no-drag’ @click=’small()’> - </el-button>
<el-button style=’-webkit-app-region: no-drag’ @click=big()’> □ </el-button>
<el-button style=’-webkit-app-region: no-drag’ @click=close()’> x </el-button>
JS部分代码:
small(){
ipcRenderer.send( ‘ min ’ )
}
big(){
ipcRenderer.send( ‘ min ’ )
}
close(){
ipcRenderer.send( ‘ min ’ )
}
渲染进程全部代码展示: