Electron 学习快速入门篇

最新推荐文章于 2024-05-16 11:00:00 发布

爱你'非我莫属。

最新推荐文章于 2024-05-16 11:00:00 发布

阅读量298

点赞数

分类专栏： VUE学习第一天文章标签： webpack 前端

本文链接：https://blog.csdn.net/weixin_42892543/article/details/117076061

版权

VUE学习第一天专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1. 安装Node.js

在使用Electron进行开发之前，您需要安装 Node.js。我们建议您安装最新可用的 LTS 或 Current 版本。

请使用为你平台预构建的 Node.js 安装器来进行安装，否则，您可能会遇到与不同开发工具不兼容的问题。

要检查 Node.js 是否正确安装，请在您的终端输入以下命令：

node -v
npm -v

这两个命令应输出了 Node.js 和 npm 的版本信息。如果这两个命令都执行成功，你就可以开始准备安装 Electron了。

2.安装 Electron

为您的项目创建一个文件夹并安装 Electron：

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

3. 修改main.js

如果生成的目录中没有main.js ，新建文件main.js
写入:

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

function 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()
  }
})

4.修改index.html

如果没有文件，新建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

6.修改preload.js

如果没有，创建preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

7.修改package.json

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

8. 运行程序

npm start

在这里插入图片描述

9.将应用程序打包

1.  > npm install --save-dev @electron-forge/cli

2.  > npx electron-forge import

3.  > npm run package

运行结果

爱你'非我莫属。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Electron 学习快速入门篇

1. 安装Node.js在使用Electron进行开发之前，您需要安装 Node.js。我们建议您安装最新可用的 LTS 或 Current 版本。请使用为你平台预构建的 Node.js 安装器来进行安装，否则，您可能会遇到与不同开发工具不兼容的问题。要检查 Node.js 是否正确安装，请在您的终端输入以下命令：node -vnpm -v这两个命令应输出了 Node.js 和 npm 的版本信息。如果这两个命令都执行成功，你就可以开始准备安装 Electron了。2.安装 Elect
复制链接

扫一扫

专栏目录