Electron入门 (一)

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

安装

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

所以直接 cnpm 最省心

sudo cnpm install electron -g
复制代码

目录结构

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

mkdir hello-electron
cd hello-electron
npm 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 潇洒的写上

<h1>Hello World!!!</h1>
复制代码

打开终端帅气的敲上

npm start
复制代码