欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Electron - 搭建Electron项目

程序员文章站 2022-06-04 14:53:30
...

Electron是什么

使用HTML、CSS和Javascript 构建跨平台的桌面应用程序。

环境要求

  • Windows运行环境需要win7及以上，因为Electron是基于Chrome V8 ，它不支持xp
  • nodejs 和 npm，这两个使用稳定版，越新越好
  • 代码编辑器，推荐使用vscode

搭建Electron项目

  • 创建项目的根目录文件夹
  • 在根目录下运行 npm init 命令
  • 修改package.json文件
//修改的内容主要有两个，main节点值改成main.js(程序入口，不一定是这个名字，默认使用它),scripts节点增加start
{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}
  • 安装electron
    建议配置npm的淘宝镜像和electron镜像，否则安装速度会很慢，甚至安装不上。
npm config set registry https://registry.npm.taobao.org
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

# 在根目录下运行
npm install --save-dev electron
  • 创建main.js，编写代码运行（npm start 运行）
    简单示例：
//main.js
const {app,BrowserWindow} = require('electron');

function createWindow(){
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadFile('index.html');

}
app.whenReady().then(createWindow);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Electron</title>
</head>
<body>
    <h1>Welcome to the Electron's world!!!</h1>
</body>
</html>
相关标签： # ElectronJs

上一篇： electron 环境搭建

下一篇： PHP操作AD,adLDAP类API详解与实例

推荐阅读