0
点赞
收藏
分享

微信扫一扫

Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建

Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建

前言

最近自己有个小的需求,是做一个能编辑本地特定文本的工具,需要跨平台, Windows 和 macOS,这样,如果用原生开发的话,Windows 就要用 ​​c#​​​ macOS 就要用 ​​swift​​​,学习成本高,并且学完用处也不是很大。
我本身是前端开发的,发现了这个 ​​​electron​​​ 能满足我的需求,跨平台运行,内部是 js 驱动的,简直就是如鱼得水。
顺便把学习的经历写出来,分享需要的人,我会按标题序号渐进式地编写内容。
如果你喜欢这个文章,欢迎点赞评论支持。

什么是 ​​electron​

​electron​​​ 其实就是个壳子,一个可以展示网页内容的壳子,相当于一个独立的浏览器,而这个浏览器可以提供给你一些接口,去调用系统的资源。
一般在浏览器中网页是没有权限去调用系统资源的,本地文件都无法自主获取,只能通过用户操作喂给浏览器才行。
有了 ​​​electron​​​ 就自由了,可以调用 ​​electron​​​ 提供的一些系统功能,所有 ​​nodejs​​ 中可以使用的功能都可以。

你看到的 ​​electron​​​ 程序内的界面全是 ​​html​​​ + ​​css​​ 搭建的,并不是原生系统的界面方法。

​electron​​​ 的一个很大的优势是可以做到一套代码通吃各平台,因为它的核心逻辑是 ​​js​​ 写的,只需要给不同平台的应用套上一个对应的外壳即可。

应用场景
我感觉有两种应用场景很适合用 ​​​electron​​,都是趋于本地化的:

  • 一种是希望给现有项目打包成可执行文件,直接双击打开使用,不需要布署​​web​​ 服务器
  • 另一种是想做一个本地化的工具,能操作系统资源,并且能跨平台使用

实例
其实你正在用的应用中就有不少是用 ​​​Electron​​​ 做的, ​​VSCode​​​ 就是,你敢信?还有比较不错的下载工具 ​​Motrix​

由来
​​​electron​​​ 的前身是 ​​atom​​ 编辑器,是在它的基础上实现过来的一套解决方案,

参阅:​​Introducing Electron​​

​electron​​具体能实现些什么功能,具体可以看这里

​​https://www.electronjs.org/docs​​

环境搭建

1. 所需的基础文件

基础的环境搭建只需要三个文件

github: ​​https://github.com/KyleBing/electron-demo​​

.
├── app.js
├── index.html
└── package.json

所有使用 ​​npm​​​ 的项目都是一个 ​​npm​​​ 包,只不过你的包是私密的。这个可以去看 ​​npm​​ 基础。

package.json

​package.json​​​ 中只需要在 ​​devDependencies​​​ 标签中添加 ​​electron​​​ 即可
字段 ​​​main​​​ 指定程序的入口 js 文件,也就是上面的 ​​app.js​​​,
这个名字自己随便定, ​​​main.js​​ 也行,对应上就可以。

​electron​​ 的版本号不一定非是这个,用最新的就好了。这个我写教程时最新的版本。

{
"name": "electron-demo",
"version": "0.1.0",
"private": true,
"author": {
"name": "KyleBing",
"email": "kylebing@163.com"
},
"description": "demo-electron",
"main": "app.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^13.1.7"
}
}

app.js

这是程序的入口文件,​​electron​​ 的主进程就是这个。里面是关于 electron app 的一些生命周期方法

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

const url = require("url");
const path = require("path");


let mainWindow

function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})

mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'), // 指定好对应的主页文件就好了
protocol: "file:",
slashes: true
})
)
mainWindow.on('closed', function () {
mainWindow = null
})

mainWindow.webContents.openDevTools() // 显示这个窗口的调试窗口,如果不想显示,删除该段即可
}

// 程序启动时
app.on('ready', ()=>{
createWindow()
})

// 所有窗口关闭时
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

// 程序处于激活状态时
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})

index.html

目前只是简单的 html 主页文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Eelctron-Demo</title>
</head>
<body>
<h1>Electron Demo</h1>
<p>你好呀!</p>
</body>
</html>

2. 安装依赖

在当前目录下,终端执行 npm 包的安装即可,可以使用 npm

npm i

Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建_html

也可以使用 yarn

yarn

Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建_跨平台_02

我喜欢使用 yarn, npm 老是时不时的出错,烦了。

3. 运行

现在就可以运行了

npm run start

Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建_js_03

就是这么简单

再具体点的可以看官方文档:
​​​http://www.electronjs.org/docs/tutorial/quick-start​​

关于打包等一些高级操作,请看专栏后续文章


举报

相关推荐

0 条评论