electron学习之路-0

最新推荐文章于 2024-10-12 19:14:50 发布

无味1858

最新推荐文章于 2024-10-12 19:14:50 发布

阅读量59

点赞数

文章标签： electron 学习 javascript

本文链接：https://blog.csdn.net/wuwei121313/article/details/131463512

版权

注：node环境自己整，本机node版本：v14.17.6

1、创建文件夹：

mkdir my-electron-test

2、安装electron：

npm install electron --save-dev 或 yarn add electron --dev

3、初始化package：

npm init（默认就一直敲回车，注意初始化后main配置的是index.js还是main.js）

4、新建main/index.js（注意第三步main配置的是啥）：

console.log("Hellow word"); //随便整点内容

5、package（scripts对象新增electron启动命令）：

{
    "name": "my-electron-test",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
        "start": "electron .",  /这里是新增的electron启动命令
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "electron": "^25.2.0"
    }
}

6、对Electron单独设置淘宝源：

npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

7、安装electron：

npm install electron 或者 yarn add electron

8、启动：

npm run start 或 yarn run start

9、网页装载到 BrowserWindow：

新建index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
</body>

</html>

修改main.js

/**
 * 导入electron相关模块
 * @param {app} 控制应用程序的事件生命周期
 * @param {BrowserWindow} 创建和管理应用程序窗口
 */
const { app, BrowserWindow } = require('electron')


/**
 * createWindow() 将您的页面加载到新的BrowserWindow（管理应用程序窗口）实例中
 */
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })
    win.loadFile("index.html")
}

/**
 * 应用准备就绪时创建窗口
 */
app.whenReady().then(() => {
    createWindow()

    app.on("activate", () => {
        /* 检查当前打开窗口数据是否为0，是则调用createWindow创建窗口 */
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
        console.log("activate监听到了");
    })
})

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

10、新建launch文件（可选）：

如果您希望使用 VS Code 调试您的程序，您需要让 VS Code 监听主进程 (main process) 和渲染器进程 (renderer process) 。 下面为您提供了一个简单的配置文件。 请在根目录新建一个 .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"
    }
  ]
}

11、最终启动

npm run start 即可得到一个带界面的window运行程序

无味1858

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫