李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

快速入门 electron ​

从一个小例子开始，把 chatgpt 封装成一个桌面端应用程序。

适合人群 ​

想要了解的 electron 开发客户端的同学。

课程要求 ​

了解一定的 html、javascript 知识。

所需环境 ​

打开官网 ​

https://www.electronjs.org/

初始化&安装 electron ​

创建文件 main.js

bash
touch main.js

创建文件 index.html

bash
touch index.html

生成 package.json

bash
npm init

将 electron 包安装到应用的开发依赖中

bash
npm install --save-dev electron

package.json 添加 scripts

bash
{
  "scripts": {
    "start": "electron ."
  }
}

创建.gitignore

bash
touch .gitignore

给 index.html 文件增加内容

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>electron chatgpt</title>
  </head>
  <body>
    快速入门 electron 开发
  </body>
</html>

给 main.js 增加内容

js
const {app, BrowserWindow} = require('electron');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });

  win.loadFile('index.html');
};

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

运行 electron

bash
npm start