Electron快速入门（一）：用VS Code快速创建html+js+css编写的项目

与妖为邻

已于 2024-06-21 05:57:24 修改

阅读量312

点赞数 7

文章标签： electron javascript 前端 Electron快速入门 html

于 2024-06-20 11:10:18 首次发布

本文链接：https://blog.csdn.net/lulei5153/article/details/139818658

版权

创建一个文件夹（例如：start或者create-electron 都是小写英文字母有的插件才不会报错），并进入该文件夹，打开 vscode创建3个文件：

1. 名为 main.js 的文件是主进程

// main.js

//用于控制应用程序寿命和创建本地浏览器窗口的模块
const { app, BrowserWindow } = require("electron");
const path = require("node:path");
const createWindow = () => {
  //创建浏览器窗口。
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  // 加载 index.html
  mainWindow.loadFile("index.html");
  // 加载指定网址
  //mainWindow.loadURL('https://blog.csdn.net/lulei5153')
  // 打开开发工具
  // mainWindow.webContents.openDevTools()
};

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

2.名为 preload.js的文件是给主进程和渲染进程之间传递消息和数据。

// preload.js

// 所有的 Node.js API 接口 都可以在 preload 进程中被调用.
// 它拥有与 Chrome 扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
    }
    for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
    }
    })

3.名为 index.html 的文件是渲染进程

<!--index.html-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    我们正在使用Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
   和Electron <span id="electron-version"></span>.
    <!-- 您也可以此进程中运行其他文件 -->
    <script src="./renderer.js"></script>
  </body>
</html>

VS Code终端输入命令

1.初始化配置命令：

yarn init -y

出现一个 package.json 配置文件：找到 "main" 字段，将其值从

"main": "index.js", 改为

"main": "main.js",

在花括号内增加一条启动命令（注意electron的后面的一个点.必须有个空格）：

"scripts": {
    "dev": "electron ."
  }

2.安装 Electron 依赖包命令（有安装过Electron 依赖包用命令：yarn add --dev electron也可以）：

npm install electron --save-dev

3.启动命令：

yarn dev

Electron官网：快速入门 | Electron (electronjs.org)

与妖为邻

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Electron快速入门（一）：用VS Code快速创建html+js+css编写的项目

Electron快速入门：用VS Code快速创建html+js+css编写的项目：创建3个文件输入3个命令完成一个初始项目
复制链接

扫一扫

Electron快速入门（一）：用VS Code快速创建html+js+css编写的项目

“相关推荐”对你有帮助么？