Vue 3+Vite+Eectron从入门到实战系列之(四)一Electron热身运动(二)

在electron里面能不呢实现暗黑模式和明亮模式的切换？我们怎么读取主进程里面的数据和系统数据。这篇就是来实现这几个效果的

实现效果

更改系统的主题色

在 App.vue 中添加代码。

<el-button type="warning" @click="changeTheme">更改系统主题颜色</el-button>

const themeMode = ref("light");
const changeTheme = () => {
  themeMode.value = themeMode.value === "light" ? "dark" : "light";
  window.electronAPI.changeTheme(themeMode.value);
};

在渲染进程的 preload.js 中添加代码。

之前，我们是在渲染进程中send，现在我们使用invoke，通过invoke来激活一个事件。

changeTheme(data) {
  ipcRenderer.invoke("change-theme", data);
}

主进程 main.js 中添加代码。

通过ipc.handle来注册一个事件，当主进程接收到渲染进程的消息时，就会触发该事件。

//触发更改主题的事件
ipc.handle("change-theme", (event, data) => {
  console.log("change theme", data);
  nativeTheme.themeSource = data;
});

send 和 invoke 的区别，我们在后面再详细分析。

读取渲染进程的自定义数据

在渲染进程的 preload.js 中添加代码。

sysLists: [
    {
      name: "系统设置",
      icon: "el-icon-setting",
      path: "/system/sysSetting",
    },
    {
      name: "系统日志",
      icon: "el-icon-document",
      path: "/system/sysLog",
    },
    {
      name: "系统用户",
      icon: "el-icon-user",
      path: "/system/sysUser",
    },
  ],

展示到我们的页面上

<ul>
  <li v-for="item in sysLists" :key="item.id">{{ item.name }}</li>
</ul>

const sysLists = computed(() => {
  return window.electronAPI.sysLists;
});

读取渲染进程中的系统信息

在渲染进程的 preload.js 中添加代码。

getSystemVersion: () => process.getSystemVersion(),

展示到我们的页面上

<h3>系统版本:{{ sysInfo }}</h3>

const sysInfo = computed(() => {
  return window.electronAPI.getSystemVersion();
});

这样，我们就实现了这几个效果。