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-demo
npm 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
正常情况会出现下面这个窗口