【electron】常用Api

此文章仅记录作者在学习和开发electron项目时比较常用的一些api和习惯
大家可以一起互相交流学习

一、外部引入需要用的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 ’ )
}

渲染进程全部代码展示：