Electron入门

2022-11-13 本文已影响0人无敌未央様

Electron是什么？
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux

安装要求：

代码编辑器
命令行工具，如terminal
git
node.js与npm。请使用平台预构建的 Node.js 安装器来进行安装，否则，可能会遇到与不同开发工具不兼容的问题。虽然需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用系统的 Node.js 环境来运行它的代码。相反地，它使用它内置的 Node.js 运行时。这意味着您的终端用户不需要 Node.js 环境也可以运行应用。

创建项目：

初始化项目
```
mkdir my-electron-app && cd my-electron-app
npm init
npm install electron --save-dev
```
这时候报错：RequestError: connect ETIMEDOUT 20.205.243.166:443

尝试：npm config set registry https://registry.npm.taobao.org/，无效

尝试：修改hosts文件，解决

编辑package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^19.0.0"
  }
}

编写main.js文件

console.log(`欢迎来到 Electron 👋`)

运行
```
npm run start
```
出现乱码

解决方式：chcp 65001

运行成功后，尝试写入BrowserWindow

新建index.html

<!DOCTYPE html>
<html>
  <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'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

修改main.js

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

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

  win.loadFile('index.html')
}

//也可以采用app.whenReady()来实现
app.on('ready').then(() => {
  createWindow()
  // 即使没有打开任何窗口，macOS 应用通常也会继续运行。 在没有窗口可用时调用 app 会打开一个新窗口。为了实现这一特性，可以监听模组的 activate 事件，如果没有任何活动的 BrowserWindow，调用 createWindow() 方法新建一个。因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 要实现这个，仅监听 whenReady() 回调即可。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
})

//如果所有窗口都关闭，则退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

使用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"
    }
  ]
}

使用vscode打开当前文件夹

在调试栏选择选项 Main+renderer

Main 用来运行主程序，并且暴露出 9222 端口用于远程调试 (--remote-debugging-port=9222) 。我们将把调试器绑定到那个端口来调试 renderer 。因为主进程是 Node.js 进程，类型被设置为 node。
Renderer 用来调试渲染器进程。因为后者是由主进程创建的，我们要把它 “绑定” 到主进程上 ()"request": "attach"，而不是创建一个新的。渲染器是 web 进程，因此要选择 chrome 调试器。
Main + renderer 是一个复合任务，可同时执行前两个任务。

这样按F5即可启动调试应用

Electron入门

猜你喜欢

热点阅读