对于electron-vue而言，renderer进程其实大部分就是在写我们平时常写的前端页面

安装Element UI⁍

Element UI⁍

Element UI是饿了么开发的一套开源的基于Vue的UI框架，属于Javascript UI框架，与CSS UI框架（Bootstrap等）不同，除了提供CSS的修饰，还提供了更加遍历的控件操作方法。[1]

通过组件 | Element快速查看可用的组件。

安装Element UI并更换主题⁍

组件 | Element

1
yarn add element-ui

(未成功)安装主题工具⁍

1
yarn add element-theme --dev

安装白垩主题

1
yarn add element-theme-chalk -D

初始化变量文件

主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参数指定文件输出目录。

1
et -i [可以自定义变量文件]

非全局安装

1
node_modules/.bin/et -i

报错[2]

image-20220227163239063

graceful-fs 与 node 版本不兼容

(各种处理见 { % post_link “Electron-vue开发实战（一）plus- Node16.8.0不降级安装Electron-vue+ElementUI开发环境” %} )

其他主题⁍

element-ink-theme: 指南 | Ink (elpsy.cn)

引入/按需引入（后期待改）⁍

组件 | Element

在src/renderer/main.js中写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: (h) => h(App),
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

Render进程开发⁍

在开发模式下，由于使用的是webpack-dev-server开启的服务器，所以BrowserWindow加载的是来自于类似http://localhost:9080这样的地址的页面。

而在生产模式下，却是使用的file://的协议，比如file://${__dirname}/index.html来指定窗口加载的页面。

假如我有一个子路由地址为child。如果不启用Hash模式，在开发模式下没啥问题，http://localhost:9080/child，但是在生产模式下，file://${__dirname}/index.html/child却是无法匹配的一条路径。因此在electron下，vue-router请不要使用history模式，而使用默认的hash模式。

👆 见Picgo src\main\apis\app\window\constants.ts

自定义titlebar⁍

在创建的BrowserWindow的配置里加上一句

1
titleBarStyle: 'hidden',

然后你就可以自行在renderer进程的页面里模拟一个顶部的titlebar了

在css样式里添加拖拽/不可拖拽

1
2
3
4
5
6
7
.fake-title-bar { // bar
  -webkit-app-region: drag;
}

.handle-bar { // 右边的缩小/关闭按钮
  -webkit-app-region: no-drag;
}

main进程和renderer进程的通信⁍

remote模块：渲染器进程访问主进程⁍

remote模块是electron为了让一些原本在Main进程里运行的模块也能在renderer进程里运行而创建的。

在electron-vue里内置了vue-electron这个模块，可以在vue里很方便的使用诸如this.$electron.remote.xxx来使用remote的模块。

注意路径转义

shell⁍

让默认图片应用打开一张图片、让默认浏览器打开一个url。

具体api： shell | Electron (electronjs.org)

dialog⁍

打开原生对话框

api：dialog | Electron (electronjs.org)

实例：

需求：点击按钮，弹出hexo文章的根目录，选择相应文章，用默认应用（即typora打开）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
openFile () {
  this.$electron.remote.dialog
    .showOpenDialog({
      title: '打开文件',
      defaultPath: '[hexo_root]\\source\\_posts',
      properties: ['openFile']
    })
    .then((result) => {
      console.log(result.filePaths) // 获得打开的文件路径
      this.$electron.remote.shell.openPath(result.filePaths[0])
    })
    .catch((err) => {
      console.log(err)
    })
}

深入remote模块⁍

注意：

remote即将被electron弃用，PicGo项目中实际也并没有用到这个模块

remote模块未主进程可以访问的模块创建一个镜像，以此提供一个代理，将渲染器进程需要执行的操作委托给主进程执行。

当调用remote对象的方法或属性是，它会想主进程发送一条同步消息，在主进程中执行相应的方法或属性，然后将结果发送回渲染器进程

从主进程向渲染器进程发送内容⁍

webContents⁍

webContents其实是BrowserWindow实例的一个属性，它存储了调用时的Web浏览器窗口对象，管理者渲染器进程中Web页面的生命周期，触发各种事件。

也就是如果我们需要在main进程里给某个窗口某个页面发送消息，则必须通过win.webContents.send()方法来发送。

ipcMain和ipcRenderer⁍

通过ipcMain和ipcRenderer来实现非父子组件通信

其中ipcMain是在main进程里使用的，而ipcRenderer是在renderer进程里使用的。

1
2
3
4
5
6
7
8
9
10
11
// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.returnValue = 'pong'
})
1
2
3
4
5
6
7
8
// In renderer process (web page).
const {ipcRenderer} = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

其中ipcMain只有监听来自ipcRenderer的某个事件后才能返回给ipcRenderer值。而ipcRenderer既可以收，也可以发。

ipcMain无法主动发消息给ipcRenderer。因为ipcMain只有.on()方法没有.send()的方法。(要用webContent)

📜使用ipcMain和ipcRender实现伪窗口的关闭和最小化⁍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// index.js
import { app, BrowserWindow, Menu, ipcMain } from 'electron'


ipcMain.on('minimize_w', () => {
  const window = BrowserWindow.getFocusedWindow()
  window.minimize()
})

ipcMain.on('close_w', () => {
  const window = BrowserWindow.getFocusedWindow()
  if (process.platform === 'linux') {
    window.hide()
  } else {
    window.close()
    app.quit()
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--Entry.vue-->
<template>
<!--...-->
        <i class="el-icon-minus" @click="minimizeWindow"></i>
        <i class="el-icon-close" @click="closeWindow"></i>
<!--...-->
</template>

<script>
export default {
  methods: {
    minimizeWindow () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.send('minimize_w')
    },

    closeWindow () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.send('close_w')
    }
  }
}
</script>
  • 注意script里面的函数要按照html代码里引用的顺序来写

  1. 朱建昕《Spring Boot+Vue开发实战》 ↩︎

  2. https://blog.csdn.net/qq1808814025/article/details/120234560 ↩︎