打造你的第一个Electron应用
avatar
rhinoc
February 03, 2019

Before that…

在上手之前,先简要介绍一下Electron。简要来说,Electron是一个允许你用开发网站的方式开发应用程序的框架。当你打开一个Electron构建的应用时,实际上是打开了一个浏览器,而这个浏览器只能加载指定的网页文件,这些网页文件负责呈现程序的UI。既然能「用Web写App」,那么Electron的最吸引人的优点也就一目了然了——跨平台性。

想要更深入地了解Electron,可以看看这篇文章:Electron,从玩玩具的心态开始,到打造出一款越来越优秀的桌面客户端产品 —— 一份不是「Hello Word」的吊胃口的Quick Start

目录结构及文件

使用npm init创建一个Electron应用文件夹。下面是一个最最最基本的Electron应用目录结构:

app-name/  
├── package.json  
├── main.js  
└── index.html  
  • pacakge.json
COPY
{
  "name": "app-name",
  "version": "0.1.0",
  "main": "main.js"
}

main字段指向的js文件即为应用启动时运行的脚本

  • main.js

package.json中指定了启动时运行的脚本main.js

COPY
const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  win = new BrowserWindow({ width: 800, height: 600 })

  // 然后加载index.html
  win.loadFile('index.html')
}

app.on('ready', createWindow)
  • index.html

main.jswin.loadFile('index.html')使程序显示index.html的内容。

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

启动应用

在文件夹下执行npm start

<TOC/>