python与Electron联合编程记录之三(Hello，Electron！)

superanet

已于 2022-10-06 10:44:19 修改

阅读量2k

点赞数 3

分类专栏： python与Electron联合编程文章标签： python electron npm flask 后端

于 2022-09-18 21:11:30 首次发布

本文链接：https://blog.csdn.net/weixin_45193154/article/details/126923214

版权

python与Electron联合编程专栏收录该内容

9 篇文章 26 订阅

订阅专栏

Hello，Electron！

在这一节中，我们将创建一个最简单的Electron应用

1、新建项目

选择新建项目，在左侧项目语言栏选择Node.js项目，项目位置选择自己创建项目的路径，我这里的路径是

E:\python\Electron

如果前面环境准备章节没有问题，nodejs和npm安装成功的话，在Node.js项目新建界面底部更多设置会自动识别出node节点解释器的位置以及npm软件包管理器的位置，具体的安装步骤请看第二部分，最后按创建进入项目。

新建项目后，弹出项目主界面，

在底部的运行窗口可以看到Pycharm通过以下命令自动帮我们执行了项目初始化命令，生成了package.json文件

npm.cmd init -y

这个命令等效于在终端中输入

npm init -y

注意：-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成默认的package.json。如果不带-y，需要挨个确定package.json中的每个条目，需要多次敲击回车。

我们将package.json中的条目进行如下修改，修改完后保存关闭。

{  
  "name": "electron",  
  "version": "1.0.0",  
  "description": "demo",  
  "main": "main.js",  
  "scripts": {  
  "start": "electron ."  
  },  
  "keywords": [],  
  "author": "chaos超sir",  
  "license": "ISC"  
}

注意："main"和"scripts"条目是必须修改的。"main"条目是作为我们程序中主进程的入口；修改"scripts"条目内容为electron . , 这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

注意："scripts"条目中electron和点中间有个空格。

注意：author(作者)、license(开源许可证) 和 description(描述)条目的内容是随意的，不过打包文件时可能需要指定。

2、配置npm运行环境

在Pycharm菜单栏中的’‘运行和调试配置’‘选项选择’‘编辑配置’‘，

点击左上角’‘添加新配置’‘，然后选择npm选项

然后在弹出的配置界面中’‘命令’‘栏中选择’‘start’'命令确定。

3、安装预编译的 Electron 二进制文件

在底部的终端窗口中输入以下命令并回车，将Electron安装为项目的devDependencies，即仅在开发环境需要的额外依赖。

npm i --save-dev electron

下载速度可能会很慢，或者卡在某一个下载阶段很长时间，或者会报错，我的情况是像下面这样报错：

这是就要根据第二章节的第三部分在Pycharm终端中使用nrm命令切换npm镜像，我这里使用的是淘宝镜像，输入下列命令回车。

nrm use taobao

像这样就说明切换npm镜像成功。

再次输入electron安装命令并回车可能还是会安装不成功，此时还需要配置下electron 镜像位置(截止到2022年9月15日该方法有效)：

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

此时输入electron安装命令并回车，如下图所示就安装完成了：

此时在项目文件夹中会出现一个node_modules 文件夹，其中包含了 Electron 可执行文件。

4、编辑html

在项目根目录新建html文件夹，并新建一个index.html文件,文件内容如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Hello Electron!</title>  
</head>  
<body>  
 <h1>Hello Electron!</h1>  
</body>  
</html>

5、创建主程序入口文件main.js

在项目根目录新建主程序入口文件main.js，文件内容如下：

const { app, BrowserWindow } = require('electron')  
  
const createWindow = () => {  
  const win = new BrowserWindow({  
    width: 800,  
  height: 600,  
  })  
  
  win.loadFile('html/index.html')  
}  
  
app.whenReady().then(() => {  
  createWindow()  
})