electron-util 里面封装了常用的帮助库
camelcase 是用来转事件名的,改成驼峰式命名
添加
export default [
'accessibility-support-changed',
'activate',
'activity-was-continued',
'before-quit',
'browser-window-blur',
'browser-window-created',
'browser-window-focus',
'certificate-error',
'continue-activity',
'gpu-process-crashed',
'login',
'new-window-for-tab',
'open-file',
'open-url',
'quit',
'ready',
'select-client-certificate',
'update-activity-state',
'web-contents-created',
'will-continue-activity',
'will-finish-launching',
'will-quit',
'window-all-closed'
]
里面存放的是所有需要转换到 ,等会我们会让它们自动做绑定。
import util from 'electron-util'
import camelcase from 'camelcase'
import events from './events'
构造函数里面第一个要准备的是 ready 事件,只有当这个事件都完成的时候,才能继续做一些事情,假如你想直接把 electron
上面的东西通过 拷贝到 this 上面,会报错,因为没有准备好,能拷贝某些模块也会报错。 electron 上面的属性其实是一些 getter
。
绑定 ready 的时候不要忘记绑定 this,要不然 this 会丢失,这是 js 的陷阱之一。
class Application {
constructor() {
electron.app.on('ready', this.ready.bind(this))
}
}
然后在 ready 里面创建窗口和初始化事件绑定
创建窗口,要做一些兼容,使用 util 会简洁不少,比如判断环境载入不同的开始文件。
createMainWindow(opts) {
const win = new electron.BrowserWindow(opts)
if (util.is.development) {
win.webContents.openDevTools()
win.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
} else {
util.loadFile(win, 'index.html')
}
win.on('close', () => {
this.mainWindow = null
})
win.webContents.on('devtools-opened', () => {
win.focus()
setImmediate(() => win.focus())
})
return win
}
初始化事件,假如自身没有这个方法的时候不要绑定,要不然绑个 undefined 会报错
initEvent() {
events.forEach(name => {
}
})
}
windowAllClosed() {
if (util.is.macos) {
electron.app.quit()
}
}
activate() {
if (!this.mainWindow) {
this.mainWindow = this.createMainWindow()
}
}
这样我们就实现了一个约定优先的 Electron 开发框架,只要你封装的够好,完全可以实现一个快速开发框架。
修改 main/index.js
, 够刚刚的类进行实例化。
在编程中,对于初学者最头疼的可能就是循环依赖了,假如你有一个 Tray.js 来控制通知栏的一些逻辑,建议在 ready 里面实例化,并把this
传递进去,这样不仅可以避免循环依赖,还可以避免有些逻辑没有准备好,导致的错误。
import Tray from './tray'
async ready() {
this.tray = new Tray(this)
}
另外一种方式就是属性注入。
let app = new Application()
electron.app.on('ready', () => {
app.tray = new Tray()
app.tray.app = app
})
或者使用一个依赖管理中心
const depHub = {}
let app = new Application(depHub)
electron.app.on('ready', () => {
let tray = new Tray(depHub)
depHub.app = app
})