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()
})
6、运行
在Pycharm工具栏中点击运行
按钮,出现如下程序界面,这就实现了一个最简单的Electron程序。
根基有了,后续我们将通过添加枝叶实现更多其他功能。