electron-vue开发一个简单的桌面网站收藏应用

685 阅读2分钟

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

项目github