0-前言
前段时间兄弟说希望可以把他的博客弄成桌面应用以便查阅,正好我摸了一下Electron的文档,于是尝试了一下。
1-使用到的技术/框架/工具
- electron
- vue
- vuex
- node.js
- element-ui
2-设计思路
<webview>
展示内容- 使用
vuex
,引入createPersistedState
存储收藏列表
3-详细介绍
3.1-主界面
主界面去除了electron默认的边框,使用自定义样式实现了工具栏。最小化、最大化和关闭按钮绑定事件,使用ipcRenderer
和主进程通信,主进程中ipcMain.on()
处理渲染进程发送的消息,触发相应的最大化、最小化以及关闭事件。
- 渲染进程
App.vue
window_max() {
ipcRenderer.send('window-max')
},
window_min() {
ipcRenderer.send('window-min')
},
window_close() {
ipcRenderer.send('window-close')
},
- 主进程
//最小化
ipcMain.on('window-min', () => mainWindow.minimize())
//最大化
ipcMain.on('window-max', () => {
if (mainWindow.isMaximized()) {
mainWindow.restore()
} else {
mainWindow.maximize()
}
})
//关闭窗口
ipcMain.on('window-close', () => mainWindow.close())
- 边框的拖拽
在使用无边框后,窗体是无法拖拽的,这时使用CSS来解决。在工具栏的样式上加上-webkit-app-region: drag
,需要点击的按钮部分不需要拖拽,所以加上-webkit-app-region: no-drag;
3.2-添加&删除网站
- 添加网站
- 删除网站
新增网站用了一个对话框,添加的网站名称和网址会以数组的形式保存在state
中,然后使用createPersistedState()
做一个持久化。
删除网站通过渲染网站列表时为每一项绑定删除事件,传入索引,再通过mutation
里面的方法删除state
里面对应的项目。
electron-vue的store.js中默认会使用createSharedMutations()
来进行共享vuex的Mutations()
,如果希望使用this.$store.commit()
形式的话(尽量不使用),需要将createSharedMutations()
注释掉,否则会出错。
3.3-浏览网页
使用<webview>
标签绑定src,通过点击列表时在state
中获得相应网站名称的链接,就可以显示不同的页面了。<webview>
和iframe
不同,<webview>
的进程是独立的。然后根据官网,好像并不推荐使用<webview>
:【考虑其他替代方案,如 iframe 、Electron的 BrowserView 或完全避免嵌入内容的体系结构。】。然后试了一下iframe
,貌似并无显示(可能我哪里搞错了)。
有些网站加载的时间比较久,会在页面中出现一段空白时期,这样不友好,所以使用element-ui的组件做了个加载效果,在页面挂载的时候绑定事件监听器,加载开始会调用this.loadstart
: webview.addEventListener('did-start-loading', this.loadstart)
,,加载结束自然就是loadstop