一、外部引入需要用的js

1.将文件目录放在public/static下

是为打包时不被编译的文件

electron怎么调用java electron调用windowapi_electron

2.在index.html中使用script引入

electron怎么调用java electron调用windowapi_electron_02

3.在需要的页面引用

electron怎么调用java electron调用windowapi_拖拽_03

二、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怎么调用java electron调用windowapi_全屏_04

三、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
    }
}; //窗口配置程序运行窗口的大小

主进程全部代码展示

electron怎么调用java electron调用windowapi_electron_05

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 ’ )
}

渲染进程全部代码展示

electron怎么调用java electron调用windowapi_全屏_06