如何快速搭建Electron应用?

本文为Electron+Vue3开发桌面端软件系列文章第一篇

通过本文,你将获得:

  1. 如何快速搭建一个Electron项目
  2. 了解Electron的基本配置及修改

技术选型

开发桌面端有如下几种技术方案:

  1. Electron:使用HTML、CSS和JS构建跨平台的桌面应用程序,基于Chromium和Node.js。
  2. NW.js:(也称node-webkit)类似于Electron。
  3. React Native:使用React和JS。
  4. Flutter:使用Dart编程语言,可构建高度定制的桌面应用程序。

本文这里选择Electron。

创建项目

基于electron-vite创建,执行pnpm create @quick-start/electron

启动项目,会自动打开一个electron应用,如下图所示:

出现如上画面说明,基于electron-vite脚手架创建的项目成功了。

改造项目结构

首先来认识一下默认的项目目录结构。

scss 复制代码
|-src
	|-main
    |-index.js  // electron主程序执行
	|-preload
    |-index.js  // 预加载脚本的包
	|-renderer
  	|-src  // 业务代码
  	|-index.html  // 渲染页面

那对应的是,官网的这张图:

明白了项目结构,那最先可以改造的可以从renderer下手。renderer下就是常见的Vue3项目代码,清理App.vue中代码,修改成如下:

xml 复制代码
<template>Electron TodoList</template>
<script setup></script>
<style lang="less"></style>

画面会实时更新,如下图所示:

配置修改

修改renderer下的代码只会更新主窗口界面,那如何修改应用窗口的配置?例如窗口上名称,图标等。

标题

renderer/index.html,修改title

xml 复制代码
<title>Electron TodoList</title>

窗口上的标题会随之改变,如下图所示:

图标

准备一个png图片,尺寸建议在256*256

在根目录下的resources文件夹下,可以同名替换icon.png也可以自定义名称添加。例如,我在resources下放入一个图片chickenLeg.png

窗体的配置都在main/index.js中,new一个BrowserWindow时传入配置项,其中就有icon的配置。

javascript 复制代码
import chickenLeg from '../../resources/chickenLeg.png?asset'
const mainWindow = new BrowserWindow({
  ...
  icon: chickenLeg
})

main代码修改之后,都需要重新执行pnpm dev,正常如期显示:

其他配置

BrowserWindow其他配置参数,可以参考官网:www.electronjs.org/docs/latest...

常见的有:

  1. width:窗口的宽度,默认值为 800。
  2. height:窗口的高度,默认值为 600。
  3. show:窗口是否在创建时显示,默认值为 true。
  4. alwaysOnTop:窗口是否永远在别的窗口的上面,默认值为 false。
  5. frame:设置为 false 时可以创建一个无边框窗口,默认值为 true。
  6. backgroundColor:窗口背景色,默认值为 #FFF(白色)。
  7. autoHideMenuBar:自动隐藏菜单栏,除非按了Alt键,默认值为 false。

总结

  1. 通过脚手架electron-vite创建Electron项目,执行pnpm create @quick-start/electron
  2. BrowserWindow中修改Electron相关配置。
相关推荐
0wioiw04 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠29 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯36 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调44 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined21 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js