永久免费做网站,服务企业是什么,无锡企业推广,网站开发的小结在数字化的浪潮中#xff0c;桌面应用依旧占据着其独特而重要的位置#xff0c;不论是在企业解决方案、专业工具软件还是个性化应用领域中都是如此。随着技术的演进#xff0c;创建这些应用的过程已经变得更为简单和可行#xff0c;尤其是随着Electron等框架的出现。Electr…在数字化的浪潮中桌面应用依旧占据着其独特而重要的位置不论是在企业解决方案、专业工具软件还是个性化应用领域中都是如此。随着技术的演进创建这些应用的过程已经变得更为简单和可行尤其是随着Electron等框架的出现。Electron通过让开发者使用熟悉的Web技术—HTML, CSS和JavaScript—来开发跨平台的桌面应用极大地降低了开发难度为快速的原型设计和产品迭代提供了强有力的支持。
这篇文章的目标是向对桌面应用开发感兴趣的新手以及那些想要将自己的Web开发技术应用到桌面开发领域的经验丰富开发者介绍如何使用Electron框架来快速构建桌面应用。从Electron的基础概念讲起本文将带你一步一步了解其主要组件并指导你如何实际搭建起一个应用从界面设计到功能实现再到最终的打包和发布。 Electron环境配置
在安装Electron之前请确保你的开发环境满足以下条件 Node.jsElectron是基于Node.js运行的因此你需要在你的计算机上安装Node.js。你可以访问Node.js官网下载并安装适合你操作系统的最新稳定版本。 npmNode包管理器npm通常会与Node.js一起安装。它是管理Node.js包的工具也将用于安装Electron。
安装步骤
创建你的项目目录首先选择一个合适的位置在你的计算机上创建一个新目录作为你的项目工作空间。通过命令行或文件浏览器都可以完成这个步骤。
初始化Node.js项目打开命令行或终端切换到你的项目目录。运行以下命令来初始化一个新的Node.js项目 npm init -y
这个命令将创建一个package.json文件这是你项目的配置文件其中包含了项目的依赖信息和其他配置。
安装Electron在项目目录中运行以下命令来安装Electron
npm install electron --save-dev
这会将Electron添加到你项目的开发依赖中并允许你通过Node.js的require命令来使用它。
验证安装
安装完成后你可以通过运行以下命令来验证Electron是否正确安装
npx electron -v
如果一切顺利这个命令将输出Electron的版本号表明Electron已经成功安装到你的项目中。 Electron项目搭建
接下来展示一下怎么快速搭建一个桌面应用程序。
创建你的主进程文件
Electron应用的入口通常是一个名为main.js的文件它在Electron的主进程中运行。这个文件负责创建应用窗口并处理与操作系统的交互。
在你的项目根目录下创建一个名为main.js的文件并添加以下代码
const { app, BrowserWindow } require(electron);function createWindow () {
// 创建浏览器窗口
const mainWindow new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});// 并加载应用的index.html
mainWindow.loadFile(index.html);// 打开开发者工具可选
mainWindow.webContents.openDevTools();
}// Electron将在初始化完成后准备创建浏览器窗口时调用这个函数
app.whenReady().then(createWindow);// 所有窗口关闭时退出应用
app.on(window-all-closed, () {
// 在macOS上除非用户用Cmd Q确实地退出否则绝大部分应用及其菜单栏会保持激活
if (process.platform ! darwin) {
app.quit();
}
});app.on(activate, () {
// 在macOS上当点击dock图标并且没有其他窗口打开时通常会在应用中重新创建一个窗口
if (BrowserWindow.getAllWindows().length 0) {
createWindow();
}
});
2. 创建你的Web页面
Electron窗口将展示一个HTML页面。在你的项目根目录下创建一个名为index.html的文件并添加一些基本的HTML代码例如
!DOCTYPE html
html
head
meta charsetUTF-8
titleHello Electron!/title
/head
body
h1Hello, Electron!/h1
p这是我的第一个Electron应用。/p
/body
/html
3. 修改
你的package.json文件以设置应用的入口点。打开package.json找到main:字段将其值改为main.js确保Electron知道从哪个文件启动你的应用。你的package.json中相应的部分应该看起来像这样
main: main.js,
同时为了能够方便地启动你的Electron应用你可以在package.json文件的scripts部分添加一个启动脚本
scripts: {
start: electron .
},
这样你就可以通过在命令行中运行npm start来启动你的应用了。
4. 启动你的应用
在你的项目目录中打开命令行或终端执行以下命令来启动你的Electron应用
npm start
如果一切顺利你的电脑屏幕上将出现一个新的窗口展示了index.html中的内容——这就是你的第一个Electron应用
下一步
到这里你已经成功地使用Electron创建了一个简单的桌面应用。接下来你可以探索Electron提供的更多功能比如与本地文件系统交云访问操作系统的底层API或者使用Electron的IPC进程间通信机制来在渲染进程和主进程之间发送消息。 Electron项目发布
上面我们启动electron的应用都是使用的node_modules中的electron包我们想要得到一个真正可以安装的安装包还需要使用第三方打包工具进行打包上面有提到过我们将使用electron-builder打包成可安装的安装包。上面我们已经安装了electron-builder下面我们需要在package.json中配置build属性来自定义安装配置。限于自身设备问题这里只介绍在Windows系统的打包配置electron可以打包成各种安装包使其可以在macLinux系统上运行其他系统的配置可自行查阅资料。下面我们介绍一下配置内容和各个配置含义。
{name: desktop,productName: Harbour,version: 1.0.0,description: ,main: main/index.js,scripts: {dev-electron: cross-env NODE_ENVdevelopment electron main/index.js,prod-electron: cross-env NODE_ENVproduction electron main/index.js,build-electron-win64: electron-builder -w --x64},build: {productName: Harbour,appId: harbour.electron.app,files: [build/**/*,main/**/*],directories: {output: dist},nsis: {oneClick: false,allowElevation: true,allowToChangeInstallationDirectory: true,installerIcon: ./main/assets/logo.ico,uninstallerIcon: ./main/assets/logo.ico,installerHeaderIcon: ./main/assets/logo.png,createDesktopShortcut: true,createStartMenuShortcut: true,shortcutName: Harbour},win: {icon: ./main/assets/logo.ico,artifactName: ${productName}-${version}-${os}-${arch}.${ext},target: nsis},electronDist: ./electron},keywords: [],author: ,license: ISC,devDependencies: {cross-env: ^7.0.3,electron: ^26.1.0,electron-builder: ^24.6.3}
} 配置解释 productName指定了您的应用程序的产品名称通常用于构建过程中生成的安装程序文件名等地方。 appId指定了您的应用程序的唯一标识符这个值在打包和部署时会用到。 files指定打包时所需打包的文件 directories.output指定了输出目录的路径即构建后的文件将会保存在 dist 目录中。 nsis指定了 NSISNullsoft Scriptable Install System打包的相关配置。 oneClick指定是否启用一键安装模式。 allowElevation是否允许提升权限进行安装。 allowToChangeInstallationDirectory是否允许用户更改安装目录。 installerIcon安装程序的图标文件路径。 uninstallerIcon卸载程序的图标文件路径。 installerHeaderIcon安装程序的头部图标文件路径。 createDesktopShortcut是否在桌面上创建快捷方式。 createStartMenuShortcut是否在开始菜单中创建快捷方式。 shortcutName创建的快捷方式的名称。 win指定了 Windows 平台的配置。 icon指定应用程序的图标文件路径。 artifactName定义生成的构建文件的命名规则模板。 target指定构建的目标平台这里是 NSIS。 electronDist指定了预先下载的 Electron 包的路径。
特别注意 这里有几个需要特别注意的点 首先我们用的logo.ico文件尺寸大小至少是256*256的 由于打包时需要使用electron的相关包文件为了提高打包速度我们一般会提前下载与我们node_modules相同版本的.zip包然后打包时使用electronDist指定打包用的文件目录可以缩减打包时间 自定义artifactName该名称就是打包后我们可安装的.exe可执行文件的名称 electron-builder打包原理实际上是将package.json同目录的所有文件进行整体打包输出如下图所示在package.json同级目录下有一些文件夹我们是不需要进行打包的其中dist下是我们上次打包输出的内容electron是我们预下载的打包所需的.zip包node_modules下面是我们开发时所用的依赖包这些都不需要打包进去。因此我们需要指定我们打包时所需要打包的文件夹此时就需要用到package.json里面build配置中的files属性如上配置我们只需要将build目录下的文件和main下面的文件打包即可。 这里的build目录下是渲染层的代码main下面都是我们主进程的代码 Electron常用API
Electron提供了一系列强大的API使得开发跨平台桌面应用成为可能。这些API允许开发者访问底层系统的功能如文件系统操作、窗口管理、系统通知等。以下是一些Electron中常用的API
主进程中的常用API app控制应用生命周期的事件和操作如应用启动、关闭。 BrowserWindow创建和管理应用窗口可以创建多个窗口每个窗口在其自己的渲染进程中加载web页面。 Menu 和 MenuItem自定义应用菜单和上下文菜单。 dialog显示文件打开、保存对话框和警告框等。 ipcMain处理主进程和渲染进程之间的异步或同步消息通信。 globalShortcut注册和监听全局键盘快捷键。 shell管理文件和URLs如打开外部浏览器访问网页、在文件管理器中显示文件等。
渲染进程中的常用API ipcRenderer从渲染进程到主进程的异步或同步消息通信。 webFrame自定义当前web页面的渲染。 remote从渲染进程访问主进程中的对象(注意从Electron 14开始remote模块被标记为废弃并推荐使用electron/remote模块代替。) desktopCapturer捕获屏幕音视频数据用于实现屏幕分享等功能。
通用API clipboard访问系统剪贴板内容。 screen获取屏幕尺寸、显示器信息等。 notification发送系统通知。 nativeImage创建和管理应用中使用的图像支持多种格式。
这些API为Electron应用提供了强大的功能使得开发者可以更容易地实现桌面应用的各种需求。借助这些API你可以创建丰富多样的桌面应用从简单的工具到复杂的企业级应用。
如果对Electron感兴趣的想学习这个框架的话可以关注下方公众号在公众号中扣“E框架”
