Electron 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

安装

网上好多小伙伴 直接用 npm 安装一直报错 挂代理也没用

所以直接 cnpm 最省心

sudo cnpm install electron -g复制代码

目录结构

我们新建一个项目目录 并且创建一个 package.json 文件

mkdir hello-electroncd hello-electronnpm init复制代码

再在里面新建如下文件

• main.js
• index.html

打开 package.json 将 main 字段修改为

"main": "main.js"复制代码

并且添加 script 命令用于启动 Electron

"scripts": {    "start": "electron ."}复制代码

Hello World

现在我打开 main.js 添加如下代码

// 引入 app 模块 用于控制你的应用程序的事件生命周期// 引入 BrowserWindow 模块 用于创建和控制浏览器窗口const { app, BrowserWindow } = require('electron');// 创建一个全局变量 名字任意 相当于普通网页的 window 对象let win;// 创建浏览器窗口函数function createWindow() {    // 设定应用程序宽高    win = new BrowserWindow({        width: 1240,        height: 800    });    // 加载本地html文件    win.loadURL(`file://${__dirname}/index.html`);    // 打开开发者工具    win.webContents.openDevTools();    // 当窗口被关闭时调用    win.on('closed', () => {        // 窗口已经关闭时触发 当你接收到这个事件的时候 你应当删除对已经关闭的窗口的引用对象和避免再次使用它        win = null;    });};// 当 Electron 完成初始化时被触发app.on('ready', () => {    createWindow();});复制代码

接着打开 index.html 潇洒的写上

Hello World!!!
复制代码

打开终端帅气的敲上

npm start复制代码