「Electron｜快速开始」来写个Hello World桌面应用吧

Table of Contents

主要步骤

  • 创建项目目录
  • 初始化项目信息
  • 安装electron
  • 创建electron应用最小所需文件
  • 运行并验证

一、准备工作

创建项目

我们需要创建一个目录作为electron项目的根目录，以下命令创建一个名为hello-electron-app的目录并进入该目录中：

  • mkdir hello-electron-app && cd hello-electron-app

然后我们运行下面的命令并且一路回车完成初始化项目环境的工作：

  • npm init

完成之后我们可以看到目录下生成的package.json内容大致如下：

1{
2  "name": "hello-electron-app",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC"
11}

安装electron

运行以下命令安装electron: npm install --save-dev electron 如果安装过程遇到报错，可以参考这篇文章

二、编写electron应用所需的基本内容

如果我们这时就运行electron启动命令npm start，则会出现找不到start指令（npm ERR! Missing script: "start"）的错误。这是因为在存储项目信息的package.json里面没有编写start对应的命令，需要在package.json中增加如下信息：

1{
2  ......
3  "scripts": {
4    "test": "echo \"Error: no test specified\" && exit 1",
5    "start": "electron ."
6  },
7  ......
8}

这时我们再执行npm start就会提示新的错误了(●ˇ∀ˇ●)
在这里插入图片描述
 这是因为我们项目目录空空如也，还没有electron的入口文件可以运行。

首先，我们需要给electron应用一个入口

  • 创建一个作为入口的js文件，文件名称可以自取，这里直接叫做main.js
  • main.js文件中可以暂时不填写任何代码内容

由于项目初始化生成package.json时，默认的入口文件名称叫做index.js，所以我们要将package.json中的main字段内容修改如下：

1{
2  ......
3  "main": "main.js",
4  ......
5}

这时候再运行就不会报错了。虽然没有任何应用窗口出现，但是命令行输出如下：

1> hello-electron-app@1.0.0 start
2> electron .
3

创建窗口

我们在main.js先引入electron控制应用的模块app，BrowserWindow，其中：

  • app模块用来控制应用
  • BrowserWindow模块用来控制应用中的浏览器窗口

加入以下代码，表示在应用启动完毕时运行一段代码：

1// main.js
2
3app.whenReady().then(() => {
4    // do something
5  })

然后我们编写一段创建宽800高600的窗口的代码并进行调用，如下:

1const { app, BrowserWindow } = require('electron')
2const createWindow = () => {
3    const win = new BrowserWindow({
4      width: 800,
5      height: 600
6    })
7}
8  
9
10app.whenReady().then(() => {
11    createWindow()
12  })

再次运行npm start就可以看到有应用窗口出现：
在这里插入图片描述

往窗口里面放一个HTML界面，写上"Hello World!"

我们创建一个HTML文件index.html（名称任意） 然后放入VSCode生成的HTML基础模板（打一个感叹号!就会弹出代码片段提示）：

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    
11</body>
12</html>

在body部分加上 <h1>Hello World!</h1>

然后我们需要在窗口加载这个HTML文件，在main.js的createWindow添加加载页面的逻辑，修改后完整代码如下:

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600
    })

    win.loadFile("index.html")
}
  

app.whenReady().then(() => {
    createWindow()
  })

现在我们再次运行npm start，就可以看到hello world了！
在这里插入图片描述

你学会了吗？(●ˇ∀ˇ●)

如果对你有帮助，就点个赞吧~👇

Mastodon