作为快速桌面应用开发的首选,小巧灵活Electron 的核心理念。 实现一个 Hello World 应用仅需编写很少量的代码。


前情:关于 Electron


上手体验 - Hello World!

开始前请确保安装了 Node.js 和相应的软件包管理软件。 yarnnpm 都是 Node.js 生态圈优秀的软件包/依赖管理程序。

第一步:项目设置

运行 yarn initnpm init 创建项目。

package.json 中进行基本的设置:

{
  "name": "myapp",
  "main": "index.js",  // <<--- 指定程序的入口
  "scripts": {
    "start": "electron ."  // <<--- 启动应用
  }
  ...
}

第二步:安装 electron

yarn add -D electronnpm install --save-dev electron

第三步:加入关键代码片段

创建文件 index.js。 这个文件是程序入口,我们指定: 在程序启动时,创建一个宽度 800px,高度 600px 的窗口,并在窗口中加载 index.html

const { app, BrowserWindow } = require('electron')  // <<--- electron.app 用于管理应用的生命周期,electron.BrowserWindow 用于创建窗口

function createWindow () {
  let win = new BrowserWindow({ width: 800, height: 600 })  // <<--- 创建用户界面窗口
  win.loadFile('index.html')  //  <<--- 窗口中加载 index.html
}

app.on('ready', createWindow)

接着创建 index.html。 这是一个最简单的 hello world 页面,展示了一行文本标题。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

最后一步:成功运行!

为了看到以上代码的效果,我们要让程序运行起来。

进入程序目录,在命令行中执行 yarn startnpm start

hello world screenshot

一个完整的程序开始运行。 Electron 按照我们的要求创建了窗口,加载指定的页面文件。 窗口的样式也与系统风格完全一致。


作为初步了解,这是一个好的开端。 为了实现更强大的软件功能,还需要其它的一些工具和软件库。 稍后的内容即将介绍。


后续:工程化·项目实践


公众号推荐

知识分享行动
每天 10:24
只聊技术细节
扫码立即参与
知识分享行动