Electron安装配置-CFANZ编程社区

Electron安装配置

Electron把Chromium和HTML Web页面整合到了一起，最终成为一个GUI桌面应用，还有其他很强大的功能，如访问硬件、通信等。

安装配置环境

# 安装yarn
$npm install -g yarn

# 初始化
$yarn init

# 配置镜像
$yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/

# 增加依赖
$yarn add electron --dev --platform=win64
"devDependencies": {
    "electron": "^19.0.8"
  }

配置package.json

{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "electron test",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "electron": "^19.0.8"
  },
  "scripts": {
    "start": "electron index.js"
  }
}

新建入口程序（主进程）：index.js

var electron = require("electron");
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;
app.on("ready", ()=>{
    win = new BrowserWindow({
        "webPreferences": {nodeIntegration: true}
    });
    win.loadFile("index.html");
    win.on('close', ()=>{
        win=null;
    });
});
app.on('window-all-closed', ()=>{
    app.quit();
});

新建渲染程序(渲染进程)：index.html

<html>
    <head>
        <title>窗口标题</title>
    </head>
    <body>
        <div style="padding: 60px;font-size:38px;font-weight:bold;text-align:center;">
            Hello World
        </div>
    </body>
</html>

运行

yarn

Electron安装配置_javascript

vscode调试配置

修改.vscode/launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "调试主进程",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"},
            "args": ["."],
            "outputCapture": "std"
        }
    ]
}

Electron安装配置_html_02

参考

https://www.electronjs.org/docs/latest

0 条评论