一、介绍 😆 😁 😉
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。
这里我已经搭建好了项目 👉👉👉 快速搭建Electron+Vite3+Vue3+TypeScript5脚手架
在没有任何配置的情况下，项目启动以后会自己带着logo、title、最大化最小化关闭以及工具栏。这些都是可以通过配置去自定义的。原项目启动的UI如下
二、去掉Electron自带的导航 😝 😝 😝
修改Electron下的main.ts文件，修改完成以后重新启动自带的导航就不会在显示了。
win = new BrowserWindow({
icon: './public/logo.png',
frame: false, // 去掉导航最大化最小化以及关闭按钮
width: 1200,
height: 800,
minWidth: 1200,
minHeight: 800,
center: true,
skipTaskbar: false,
transparent: false,
webPreferences: {
contextIsolation: false,
webSecurity: false,
}
})三、增加自定义导航 😝 😝 😝
自定义导航其实很简单，只需要根据自己的需求去编写相对应的导航vue页面即可。UI组件的化根据自己的需求安装，这里我以element-plus为例。为了后续能够一次性完成代码的编写，把路由也一起安装了。
1、安装依赖 👇 👇 👇
yarn add element-plus vue-router 因为electron已经删除了remote，所以还需要安装一下@electron/remote
yarn add @electron/remote2、初始化remote 👇 👇 👇
修改electron下的main.ts，这里除了初始化remote，重点还在nodeIntegration和contextIsolation的设置，为了能在vue文件中使用require。
const { app, BrowserWindow } = require('electron')
const path = require('path')
const remote = require("@electron/remote/main");
remote.initialize();
const NODE_ENV = process.env.NODE_ENV
let win
/**
* @Description: electron程序入口
* @Author: Etc.End
* @Copyright: TigerSong
* @CreationDate 2023-05-20 14:39:26
*/
const createWindow = () => {
win = new BrowserWindow({
icon: './public/logo.png',
frame: false, // 去掉导航最大化最小化以及关闭按钮
width: 1200,
height: 800,
minWidth: 1200,
minHeight: 800,
center: true,
skipTaskbar: false,
transparent: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
webSecurity: false,
}
})
win.loadURL(
NODE_ENV === 'development' ? 'http://localhost:5173/' : `file://${path.join(__dirname, '../dist/index.html')}`
)
if (NODE_ENV === 'development') {
win.webContents.openDevTools()
}
remote.enable(win.webContents);
}
app.whenReady().then(() => {
createWindow()
})
/**
* @Description: 限制只能打开一个页面
* @CreationDate 2023-05-20 14:35:52
*/
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, commandLine, workingDirectory) => {
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
}
app.on('window-all-closed', function () {
if(process.platform !== 'darwin') app.quit()
})
3、编写自定义导航 👇 👇 👇
在src/components下新建文件夹header，接着在header文件夹下创建index.vue文件，这里面除了Electron的API调用意外，还有一个重点就是-webkit-app-region: drag;的样式设置，让我们的元素具有拖拽效果，整个header都可以拖拽，但是最小化最大化关闭又得关闭拖拽，让其可以点击，所以又加上了-webkit-app-region: no-drag;的样式属性。
<template>
<div class="ts-header">
<div>
<span>Tiger Song</span>
</div>
<div style="-webkit-app-region: no-drag;">
<el-button title="最小化" @click="minimize()" link type="primary">
最小化
</el-button>
<el-button title="最大化" v-if="!isMaximized" @click="maximize()" link type="primary">
最大化
</el-button>
<el-button title="还原" v-else @click="maximize()" link type="primary">
还原
</el-button>
<el-button title="退出" @click="close()" link type="primary">
退出
</el-button>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from "vue";
import 'element-plus/es/components/button/style/css'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'Header',
components: {
ElButton
},
setup() {
// @ts-ignore
const remote = require("@electron/remote");
const win = remote.getCurrentWindow()
const state = reactive({
isMaximized: false
})
const minimize = () => {
win.minimize()
}
const maximize = () => {
if (win.isMaximized()) {
state.isMaximized = false
win.restore()
} else {
state.isMaximized = true
win.maximize()
}
}
const close = () => {
win.close()
}
onMounted(() => {
state.isMaximized = remote.getCurrentWindow().isMaximized()
})
return {
...toRefs(state),
minimize,
maximize,
close,
}
}
})
</script>
<style>
.ts-header {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-app-region: drag;
background-color: #2b2b2b;
color: white!important;
font-size: 14px;
padding: 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
</style>4、修改App.vue 👇 👇 👇
<template>
<Header />
<div>123</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import Header from './components/header/index.vue'
export default defineComponent({
components: {
Header
},
setup() {
return {
}
}
})
</script>
<style>
html, body, #app {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
5、src下的main.ts去掉样式 👇 👇 👇
此时如果你src下的main,ts在编辑器里面报错TS2307: Cannot find module './App.vue' or its corresponding type declarations.的话，修改src文件夹下的vite-env.d.ts
declare module '*.vue' {
import {DefineComponent} from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
6、全部修改完成以后重新启动应用即可。 👇 👇 👇
这里我只是一个demo演示，如果需要把最大化最小化关闭等设置成图标，整个vite项目自动按需引入的话可以查看我的另一篇文章，照着配置即可。Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]
四、最终效果预览 😝 😝 😝
我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。
文章来源：https://www.toymoban.com/news/detail-454575.html
👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇文章来源地址https://www.toymoban.com/news/detail-454575.html
到了这里，关于第二章 Electron自定义界面(最大化、最小化、关闭、图标等等)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
