electron 基础（2）

const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    // 当运行第二个实例时,将会聚焦到mainWindow这个窗口
    if (process.platform === "win32") {
    	if (mainWindow) {
	      if (mainWindow.isMinimized()) {
			mainWindow.restore()
		  }
		  if (mainWindow.isVisible) {
			mainWindow.focus()	
		  } else {
			mainWindow.show()	
		  }
	    }
    }
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 自定义菜单
1. 定义模板
	let tmp = [{
		label: "关于",
		click: () {
			shell.openExternal('https://www.baidu.com') // 打开外链接
		}
	}, {
		label: "打开",
		click(){
			BrowserWindow.getFocusedWindow.webContents.send('openUrl') 
			// BrowserWindow.getFocusedWindow() 获取当前聚焦窗口
			// BrowserWindow.getFocusedWndow.webContents.send() // 给渲染进程发消息
			// ipcRenderer.on("openUrl", (data) => {}) // 渲染进程接收消息
		}
	}]
2. 生成模板
	let menu = Menu.buildFromTemplate(tmp)
3. 挂载
	Menu.setApplicationMenu(menu)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 电脑右下角信息提示框
let option = {
	title: '拉钩教育',
	body: '互联网的实战大学, 大前端',
	icon: './img.png'
}
let myNotification = new window.Notification(option.title, option) // 如下图所示
myNotification.onclick = function () { // 监听弹窗关闭事件
	console.log("")
}

// 修改 my-electron 标题： 在主进程中设置 app.setAppUserModelId("my-electron")
1
2
3
4
5
6
7
8
9
10
11
12

// 注册快捷键
	app.on('ready', () => {
		// 注册
		let ret = globalShortcut.register('ctrl + q', () => {
			console.log('快捷键注册成功')
		})
		if (!ret) { // globalShortcut.isRegistered('ctrl + q') // 判断快捷键是否注册成功
			console.log('注册失败')
		}
	})

// 取消快捷键
	app.on("will-quit", () => {
		globalShortcut.unregister('ctrl + q') // 取消某个快捷键
		globalShortcut.unregisterAll() // 取消所有的快捷键
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 复制、粘贴
const { clipboard } = require('electron')

let ret = clipboard.writeText("1231231") // 复制内容

clipboard.readText(ret) // 粘贴内容
1
2
3
4
5
6

// 粘贴图片
let oImage = nativeImage.createFromPath('./msg.png') // 将图片放置于剪切板当中的时候要求图片类型属于 nativeImage 实例
clipboard.writeImage(oImage)

let oImg = clipboard.readImage() // 将剪切板中的图片做为 DOM 元素显示在界面上
let oImgDom = new Image()
oImgDom.src = oImg.toDataURL()
document.body.appendChild(oImgDom)
1
2
3
4
5
6
7
8

// nodemon 实时监听文件变化 (package.json) 文件
	"script": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"start": "nodemon --watch main.js --exec npm run serve",
		"serve": "electron ."
	}

1
2
3
4
5
6
7

// 防止白屏
// 将创建窗口独立成一个函数
function createWindow () {
	let mainWin = new BrowserWindow({
		x: 100,
		y: 100, // 设置窗口显示的位置, 相当于当前屏幕的左上角
		show: false, // 防止白屏
		width: 800,
		height: 400,
		maxWidth: 1200,
		maxHeight: 600,
		minWidth: 400,
		minHeight: 200, // 可以通过 min、max 设置当前应用窗口的最大和最小尺寸
		resizable:false, // 是否允许缩放应用的窗口大小
		frame: true, // 用于自定义 menu, 设置 false 可以将默认的菜单栏隐藏, 以及导航栏
		autoHideMenuBar: true, // 只隐藏菜单
		icon: 'logo.png', // 可以设置图片路径, 可以自定义当前应用的显示图标
		title: "标题", // 导航标题
		webPreferences: {
			webSecurity:false, // 解决跨越问题
			nodeIntegration: true, // 允许渲染进程使用 node 模块
			enableRemoteModule: true // 允许渲染进程使用 remote 模块
		}
	})

	mainWin.loadFile('index.html')
	mainWin.on('ready-to-show', () => {
		mainWin.show()
	})
	mainWin.on('close', () => {
		mainWin = null
	})
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 渲染进程中使用 remote
const { remote } = require('electron')

// window.addEventListener('DOMContentLoaded', () => {}) // 同 window.onload = function() {} 监听页面加载完成事件
// remote.getCurrentWindow() 获取当前窗口对象

let newWin = new remote.BrowserWindow({
	width: 200,
	height: 200
})

newWin.loadFile('list.html')
newWin.on('close', () => {
	newWin = null
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16