Vue 3 + Vite + Eectron from Beginning to Hands-on series of (three) an Electron warm-up exercise (a)

Previously, we have taken the basicEnvironment ConfigurationOkay, before we start coding our first page, let's try a couple of small experiments to experience theelectron of fun.

Change the name of our application

The system defaults to a name from which we can change here.

{
  "name": "electron-vue3"
}

• 1
• 2
• 3

After the change, we restart the app and we can see our changed name in the taskbar.

If it doesn't work, then you can see if the title has a value in the html. The title value will override the name value in the html.
Delete the value of title and restart the app. You will see the changed app name.

It's too much of a hassle to change the name every time you want to change it. Then delete the title value and change it in the main process file.

// 
win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, ""),
  },
  title: "Human resources management system",
});

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

The same applies to the icon icon, change it in. The icon size is required, it must be 256x256, otherwise it will report an error with a message, not a big problem.

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

• 1
• 2
• 3

Read system information

Inside our rendering process, we can use the process object to get the application version number, system information, and so on.
Add the code inside

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

• In our html page, add a div element to display the version information.

<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

This way, we can see the corresponding version information.

Determine application networking status

Effect on the web side

Desktop effect

In App.vue in the mounted lifecycle, add the code.

<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

Add code to the rendering process.

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

• Listening for messages in the master process

const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, ""),
    },
    title: "Human resources management system",
    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

Modify the page title

Add the code in.

<el-button type="danger" @click="changeTitle">Modify the title</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

Add code to the rendering process.

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

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

• 1
• 2
• 3
• 4
• 5

Add code to the main process. To add code to the creatWindowfunction (math.)Add in.

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