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

前面我们已经把基础环境配置好了，在开始我们编写第一个页面之前，先尝试几个小的实验，体验下 electron 的乐趣。

更改我们应用的名称

系统默认的名字是从 中读取的，我们可以在这里更改。

{
  "name": "electron-vue3"
}

• 1
• 2
• 3

更改后，我们重新启动应用，在任务栏中可以看到我们更改后的名字。

如果没有生效，那可以在 html 中看看 title 是否有值，title 的值会覆盖 中的 name 值。
删掉 title 的值，重新启动应用。即可看到更改后的应用名称。

每次改名字都要到 中改，太麻烦。那就删除 title 的值，在主进程文件 中更改。

// 
win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, ""),
  },
  title: "人资管理系统",
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

同理应用 icon 图标，在 中更改。图标大小是有要求的，必须是 256x256 的尺寸，否则会报错，会有提示信息，问题不大。

win = new BrowserWindow({
  icon: path.join(__dirname, "../public/"),
});

• 1
• 2
• 3

读取系统信息

在我们的渲染进程里面，我们可以通过 process 对象来获取应用版本号、系统信息等。
里面添加代码

window.addEventListener("load", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = `${selector}----${text}`;
  };

  for (const dependency of ["chrome", "node", "electron"]) {
    replaceText(`${dependency}-version`, process.versions[dependency]);
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 在我们的 html 页面中，添加一个 div 元素，用来显示版本信息。

<template>
  <div id="chrome-version"></div>
  <div id="node-version"></div>
  <div id="electron-version"></div>
  <router-view />
</template>

• 1
• 2
• 3
• 4
• 5
• 6

这样，我们就能看到对应的版本信息了。

判断应用联网状态

web端的效果

桌面端的效果

在 App.vue 中的 mounted 生命周期中，添加代码。

<script setup>
  import { onMounted } from "vue";

  onMounted(() => {
    var alertOnlineStatus = function () {
      // ( ? "online" : "offline");
      const status = navigator.onLine ? "online" : "offline";
      console.log("???? ~ alertOnlineStatus ~ :", status);
      window.electronAPI.onLineChange(status);
    };
    console.log("???? ~ alertOnlineStatus ~ :", navigator.onLine);
    window.addEventListener("online", alertOnlineStatus);
    window.addEventListener("offline", alertOnlineStatus);
    alertOnlineStatus();
  });
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

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

const { contextBridge, ipcRenderer } = require("electron/renderer");

contextBridge.exposeInMainWorld("electronAPI", {
  // setTitle: (title) => ("set-title", title),
  onLineChange: (data) => {
    console.log("???? ~ onLineChange:", data);
    ipcRenderer.send("online-status-changed", data);
  },
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 在主进程中监听消息

const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, ""),
    },
    title: "人资管理系统",
    icon: path.join(__dirname, "../public/"),
  });
  ...
  ipc.on("online-status-changed", (event, status) => {
    console.log("status", status);
  });
  ...
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

修改页面标题

在 中添加代码。

<el-button type="danger" @click="changeTitle">修改标题</el-button>

• 1

const count = ref(0);
const changeTitle = () => {
  console.log("???? ~ changeTitle ~ :", window.electronAPI);
  window.electronAPI.setTitle("Hello, Electron!" + count.value++);
};

• 1
• 2
• 3
• 4
• 5

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

const { contextBridge, ipcRenderer } = require("electron/renderer");

contextBridge.exposeInMainWorld("electronAPI", {
  setTitle: (title) => ipcRenderer.send("set-title", title),
});

• 1
• 2
• 3
• 4
• 5

在主进程 中添加代码。要在 creatWindow 函数中添加。

ipc.on("set-title", (event, title) => {
  const webContents = event.sender;
  const win = BrowserWindow.fromWebContents(webContents);
  console.log("???? ~  ~ title:", title);
  win.setTitle(title);
});

• 1
• 2
• 3
• 4
• 5
• 6