• electron快速入门

    新建electronstu01文件夹

    以管理员身份运行powershell，切换到该文件下

    npm init -y

    • 1

    在这里插入图片描述
    安装依赖包

    npm install --save-dev electron

    • 1

    在这里插入图片描述
    失败
    在这里插入图片描述

    npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --save-dev electron

    • 1
    • 2

    在这里插入图片描述
    修改 package.json

    "start": "electron ."

    • 1

    启动

    npm start

    • 1

    此脚本将告诉 Electron 在您项目根目录运行 此时，您的应用将立即抛出一个错误提示您它无法找到要运行的应用

    在这里插入图片描述
    新建index.js，内容为空
    新建index.html

    DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!title>
  head>
  <body>
    <h1>你好!h1>
    我们正在使用 Node.js <span id="node-version">span>,
    Chromium <span id="chrome-version">span>,
    和 Electron <span id="electron-version">span>.
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    index.js修改代码

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

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

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

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    启动项目
    在这里插入图片描述
    虽然现在可以打开一个浏览器窗口，但你还需要一些额外的模板代码使其看起来更像是各平台原生的。 应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。

    当所有窗口都关闭的时候除了macos系统，其他系统应该关闭

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

    • 1
    • 2
    • 3

    macos上如果没有新的窗口则创建一个

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    此时窗口控件应功能齐全

    js内容动态渲染

    不能直接在主进程中编辑DOM，因为它无法访问渲染器doucument上下文。 它们存在于完全不同的进程，所以需要预处理
    新建preload.js

    window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
    //访问 Node.js process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    上面的代码要起作用需要在现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。

    const { app, BrowserWindow } = require("electron");
//引入nodejs的path模块
const path = require("node:path");
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

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

app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    __dirname:字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
    path.join :将多个路径联结在一起，创建一个跨平台的路径字符串。

    index.html引入

    <script src="./renderer.js">script>

    • 1

    启动应用
    在这里插入图片描述

    打包

    使用 Electron Forge
    添加依赖

    # cnpm install --save-dev @electron-forge/cli
# npx electron-forge import
# 上面代码失败，下面可以
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
npm config ls
# C:\Users\16471\.npmrc 修改npmrc即可
npx electron-forge import

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    在这里插入图片描述
    一直失败可以直接复制package.json

    {
  "name": "electronstu01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^6.4.2",
    "@electron-forge/maker-deb": "^6.4.2",
    "@electron-forge/maker-rpm": "^6.4.2",
    "@electron-forge/maker-squirrel": "^6.4.2",
    "@electron-forge/maker-zip": "^6.4.2",
    "@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
    "electron": "^26.2.2"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    使用 Forge 的 make 命令来创建可分发的应用程序：

    npm run make

    • 1

    在这里插入图片描述
    添加上配置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    进入文件夹之后有一个exe双击运行即可

  • 相关阅读:
    rabbitMq 针对于当前监听的队列，来控制消费者并发数量，不影响其他队列，代码示例
    Tesla_V100加速卡详细参数
    2203 CSDN课程-python入门课
    国际版阿里云/腾讯云免费：阿里云产品-弹性核算简介(依据官网转载)
    责任链模式 - Unity
    10. python字典
    架构师必备-DDD之落地实践
    CAS 机制的实现原理分析
    Acwing 890. 能被整除的数
    CAD插入文件，使文件不跟随源对象而改变
  • 原文地址：https://blog.csdn.net/qq_36437991/article/details/133280201