electron.js入门-为生产环境构建应用程序

10 篇文章 3 订阅

在本章中,我们将学习如何使用可执行文件生成生产应用程序;为此,我们将使用以下软件包:
https://www.electron.build/
需要注意的是,当您有兴趣生成应用程序的可执行文件时,必须在每个Electron.js项目中安装此包,因为它不是全局安装的依赖项,如果不是本地安装的话。
让我们在上一章中生成的聊天项目中安装该软件包:

cnpm install electron-builder -D

在这里插入图片描述
安装后,我们将配置以下命令:

"dev:macos": "electron-builder --macos --dir",
"pro:macos": "electron-builder --macos",
"dev:win":"electron-builder --win --x64 --dir",//不带--x64就是32位的
"pro:win":"electron-builder --win --x64", //不带--x64就是32位的
"dev:linux": "electron-builder --linux --dir",
"pro:linux": "electron-builder --linux"

然后可以根据您的操作系统执行任何命令;例如:

npm run dev:win

国内会因为网络问题失败,下面是解决办法

# 查看npmrc所在位置
npm config ls 
# C:\Users\16471\.npmrc 修改npmrc即可,写入内容如下
electron-builder-binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

在这里插入图片描述
生产环境打包

npm run pro:win

以可分发格式打包(例如,dmg、windows安装程序、deb包)。在执行上一个命令时,我们会将项目生成为可执行文件:<project>/dist一些文件如下所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
当执行可执行文件时,在MacOS的情况下是DMG,在Windows的情况下,它将是EXE和对于Linux,这取决于您使用的风格,我们将看到应用程序:
在这里插入图片描述

在这里插入图片描述
另一个非常重要的细节是,根据您正在执行的项目,您必须进行额外的修改,因为工作空间是不同的;尤其是与外部文件的集成,在开发应用程序时指定的目录与生产中使用的目录不一致,在整本书中,我们将看到一些示例。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架,可以使用 HTML、CSS 和 JavaScript构建跨平台的桌面应用程序。在本文中,我们将介绍如何使用 Python 和 Flask 结合 Electron 编写一个简单的桌面应用程序。 1. 安装 Electron 首先,我们需要安装 Electron。可以通过 npm 来安装它: ``` npm install electron --save-dev ``` 2. 创建 Electron 应用程序 接下来,我们需要创建一个基本的 Electron 应用程序。在项目根目录下创建一个名为 main.js 的文件,并添加以下代码: ``` const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') win.webContents.openDevTools() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这段代码创建了一个基本的窗口,加载了一个名为 index.html 的文件,并打开了开发者工具。 3. 创建 Flask 应用程序 然后,我们需要创建一个 Flask 应用程序。在项目根目录下创建一个名为 server.py 的文件,并添加以下代码: ``` from flask import Flask, jsonify app = Flask(__name__) @app.route('/api') def api(): return jsonify({'message': 'Hello, World!'}) if __name__ == '__main__': app.run(debug=True) ``` 这段代码创建了一个简单的 Flask 应用程序,具有一个名为 /api 的路由,返回了一个 JSON 响应。 4. 集成 Flask 应用程序 现在,我们需要将 Flask 应用程序集成到 Electron 应用程序中。在 main.js 文件中添加以下代码: ``` const { app, BrowserWindow } = require('electron') const path = require('path') const { spawn } = require('child_process') let flaskProcess = null const flaskPath = path.join(__dirname, 'server.py') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') win.webContents.openDevTools() } app.whenReady().then(() => { flaskProcess = spawn('python', [flaskPath]) createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('before-quit', () => { flaskProcess.kill() }) ``` 这段代码启动了一个 Python 进程来运行 Flask 应用程序,并在应用程序关闭之前杀死该进程。 5. 发起请求 最后,我们需要在渲染进程中发起请求。在项目根目录下创建一个名为 index.html 的文件,并添加以下代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello, World!</title> </head> <body> <h1 id="message"></h1> <script> const { ipcRenderer } = require('electron') ipcRenderer.on('message', (event, message) => { document.getElementById('message').textContent = message }) fetch('http://localhost:5000/api') .then(response => response.json()) .then(data => { ipcRenderer.send('message', data.message) }) .catch(error => console.error(error)) </script> </body> </html> ``` 这段代码使用 IPC 通信来从 Python 进程接收消息,并使用 fetch API 发起一个请求来获取 Flask 应用程序的响应。 6. 运行应用程序 现在,我们可以通过运行以下命令来启动应用程序: ``` npm start ``` 这将同时启动 Electron 应用程序和 Flask 应用程序,并打开一个窗口,显示来自 Flask 应用程序的消息。 至此,我们已经成功地构建了一个使用 Python、Flask 和 Electron 框架的桌面应用程序

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

假装我不帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值