electron踩坑记录

electron踩坑记录

---

[TOC]

文档

• electron官方文档：https://electronjs.org/docs
• github地址：https://github.com/SimulatedGREG/vue-electron
• electron-vue: https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
• Electron中BrowserWindow对象的所有可设置项：https://www.jianshu.com/p/0387bd0f8a70?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

创建项目

• 创建命令：vue init simulatedgreg/electron-vue
• 文档：https://www.jianshu.com/p/7f64daa9264c

Electron如何隐藏窗体的菜单栏

要创建无边框窗口，只需在src/main/index.js中的BrowserWindow的options中将frame设置为 false

自定义区域拖拽

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

• 参考文档：https://blog.csdn.net/fukaiit/article/details/91351448

自定义最大最小关闭窗口功能

方法一 通信

在index.js中

import { ipcMain } from 'electron'
ipcMain.on('min', e => mainWindow.minimize()) // 最小化窗口
ipcMain.on('max', e => mainWindow.maximize()) // 窗口最大化
ipcMain.on('close', e => mainWindow.close()) // 关闭窗口
ipcMain.on('resetWindow', e => mainWindow.unmaximize()) // 还原窗口
// 使用方式
const { ipcRenderer } = require('electron')
ipcRenderer.send('min')

方法二

const electron = require('electron')
const remote = electron.remote
remote.getCurrentWindow().maximize() // 最大化

监听窗口变化

• underscore文档: https://underscorejs.org/
• 判断窗口是否最大化: remote.getCurrentWindow().isMaximized()

// 使用依赖 underscore.js
const _ = require('underscore')
let currentWindow = remote.getCurrentWindow().removeAllListeners()
// 设置100毫秒内只触发一次
currentWindow.on('resize', _.debounce(() => {
}, 100))

编译问题

npm run build失败 下载依赖超时 403

• 加速国内github访问： https://blog.csdn.net/w958660278/article/details/81161224
• 修改本机的hosts文件 增加以下内容

192.30.253.112 github.com
185.199.108.153 assets-cdn.github.com
151.101.185.194 github.global.ssl.fastly.net

• 记得重启cmd

链接数据库 sqlite3

已解决 请查看另一篇文章