Electron是一款使用Html、Css、JS开发跨平台桌面应用的框架。
话不多说直接开搞。

必坑指南：

  • node版本>=18.0
  • 使用淘宝镜像安装npm相关包；
  • 把下面两行配置放到你的npmrc文件中
    electron_mirror=https://npm.taobao.org/mirrors/electron/ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

创建项目

使用下面命令创建一个空项目

mkdir electron-demo && cd electron-demonpm init

安装electron依赖包，等待安装完成

cnpm install --save-dev electron

写代码

创建index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><h1 id="hello"></h1></body></html>

创建preload.js，会在应用加载渲染进程之前执行这个文件的代码

// dom内容加载成功的监听window.addEventListener('DOMContentLoaded', () => {// 加载页面成功之后设置元素的内容const element = document.getElementById('hello')element.innerText = 'Hello,Electron!'})

创建main.js，整个项目的入口js文件

const { app, BrowserWindow } = require('electron')const {join} = require("path");// 创建应用窗口const createWindow = () => {const win = new BrowserWindow({// 窗口尺寸width: 800,height: 600,webPreferences: {// 设置渲染前执行的js文件preload: join(__dirname, 'preload.js')}})// 加载的html文件win.loadFile('index.html')}app.whenReady().then(() => {createWindow()})

启动项目

修改package.json
设置入口js文件

"main": "main.js",

设置启动脚本

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

执行脚本

npm start

正常情况会出现下面这个窗口