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();
});
这样，我们就实现了这几个效果。