electron—用electron如何构建一个桌面应用以及遇到的问题

最新推荐文章于 2024-03-09 14:45:50 发布

猿-阿焱

最新推荐文章于 2024-03-09 14:45:50 发布

阅读量459

点赞数 7

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/miaoLovesen/article/details/134970457

版权

首先，默认大家了解JavaScript、HTML 、 CSS和nodejs等前置知识，并且电脑已经安装了基本的IDE以及node等开发环境。Electron 是网页应用 (web apps) 的一个原生包装层，在 Node.js 环境中运行。我们用三步构建一个能都在终端运行的Electron应用。

一：创建项目

mkdir my-electron-app && cd my-electron-app
npm init

创建一个文件夹，并且在文件中下初始化一个项目，其中选项自己配置即可，配置后生成package.json文件，其中入口文件设置为main.js；接下来安装electron。

npm install electron --save-dev

这里安装会报错，官网也没有过多的解释。

如果您无法访问GitHub，或者您需要提供自定义构建，则可以通过提供镜像或现有的缓存目录来实现。

例如，使用一个中国的镜像：
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

经过我尝试，最终发现安装electron的正确姿势：

set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/&& npm install electron --save-dev

完成以上步骤后，要执行这个脚本，需要在 package.json 的 scripts 字段中添加一个 start 命令，内容为 electron . 。这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

最终生成的package.json文件如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}

我们可以用如下命令运行：

npm run start

二；将网页装载到BrowserWindow

首先在根目录创建一个index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Electron</h1>
    <p>Hello!!</p>
  </body>
</html>

下面我们将这个网页装载到main.js程序中，在程序中做了详细的解释：

//CommonJs语法导入两个electron模块，
//app，它负责您应用程序的事件生命周期。BrowserWindow，它负责创建和管理应用窗口。
const { app, BrowserWindow } = require('electron/main')

// createWindow() 函数将您的页面加载到新的 BrowserWindow 实例中
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

// 在应用准备就绪时调用函数
app.whenReady().then(() => {
  createWindow()

  // 如果没有窗口打开则打开一个窗口 (macOS)
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

//关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

三、VS Code 调试

如果想用vscode来调试，请在根目录新建一个 .vscode 文件夹，然后在其中新建一个 launch.json 配置文件。如下：

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Main + renderer",
      "configurations": ["Main", "Renderer"],
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "name": "Renderer",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": [".", "--remote-debugging-port=9222"],
      "outputCapture": "std",
      "console": "integratedTerminal"
    }
  ]
}

今天的分享就到这里，感谢大家，我是猿-阿焱！

猿-阿焱

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
electron—用electron如何构建一个桌面应用以及遇到的问题

electron创建应用以及electron安装等问题解决
复制链接

扫一扫

electron—用electron如何构建一个桌面应用以及遇到的问题

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