前面我们已经把基础环境配置好了,在开始我们编写第一个页面之前,先尝试几个小的实验,体验下 electron 的乐趣。
更改我们应用的名称
系统默认的名字是从 package.json 中读取的,我们可以在这里更改。
{
"name": "electron-vue3"
}
更改后,我们重新启动应用,在任务栏中可以看到我们更改后的名字。
如果没有生效,那可以在 html 中看看 title 是否有值,title 的值会覆盖 package.json 中的 name 值。
删掉 title 的值,重新启动应用。即可看到更改后的应用名称。
每次改名字都要到 index.html 中改,太麻烦。那就删除 title 的值,在主进程文件 main.js 中更改。
// main.js
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
title: "人资管理系统",
});
同理应用 icon 图标,在 main.js 中更改。图标大小是有要求的,必须是 256x256 的尺寸,否则会报错,会有提示信息,问题不大。
win = new BrowserWindow({
icon: path.join(__dirname, "../public/favicon.ico"),
});
读取系统信息
在我们的渲染进程里面,我们可以通过 process 对象来获取应用版本号、系统信息等。
preload.js 里面添加代码
window.addEventListener("load", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector