+
+
Posts List
  1. Before that…
  2. 目录结构及文件
  3. 启动应用

1 打造你的第一个Electron应用

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
{
"name": "app-name",
"version": "0.1.0",
"main": "main.js"
}

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

  • main.js

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

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的内容。

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

启动应用

在文件夹下执行npm start

本文作者: rhinoc

本文链接: http://rhinoc.top/post/electron_1.html

版权声明: 本博客所有文章除特别声明外,均采用BY-NC-SA 4.0国际许可协议,转载请注明。

Support
Support Me
  • Through WeChat
  • Through Alipay