(1/7)Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建(1/7)
(1/7)Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建
Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建
Electron教程(二)启动过程:主进程,渲染进程是什么
Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程
Electron教程(四)使用 Vue Browser 版,创建小工具应用
Electron教程(五)读取本地文件内容, ipcMain ipcRenderer 之间的交互
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
。
好像新版 macOS 的 QQ 也是用类似 electron 的东西做的
由来
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 mainWindowfunction 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. 安装依赖
安装依赖会比较麻烦,electron 安装的时候需要从外网下载对应系统的依赖文件,而这个下载是不会经过 npm 的,也就是说使用国内的 npm 源地址是无法正常安装的。
如果你已经使用了国内的 npm 源地址,请将它调整回官方的 npm 源地址,不然将无法正常安装 electron。
nrm 的使用
正常国内网络基本上无法安装 electron, 速度10kb/s 左右吧,最终都会因超时而失败。只能用代理装。
写程序这块,如果没有代理简直跟瞎了一样,建议找个渠道整一个。
http://kylebing.cn/diary/#/share/6592
你安装的时候也可能会遇到一些问题,比如:
macOS Electron 环境安装时的错误 Cannot find module ‘macos-alias‘ 解决
在当前目录下,终端执行 npm 包的安装即可,可以使用 npm
npm i
也可以使用 yarn
yarn
我喜欢使用 yarn
3. 运行
现在就可以运行了
npm run start
就是这么简单。
接下来要做的就是丰富这个页面内容,必要时跟系统、文件系统、网络进行交互,实现更高级的功能。
再具体点的可以看官方文档:
http://www.electronjs.org/docs/tutorial/quick-start
关于打包等一些高级操作,请看专栏后续文章
四、它可以做成什么样子
就像前面提到的, VScode 就是用它做的,还有 Motrix。
我自己写了一个工具,大体样子是这样:
五笔助手 https://github.com/KyleBing/wubi-dict-editor
当然,这肯定不是一天就写成的,从无到有还是要有个过程的:
WubiDictEditor 的进化过程
(1/7)Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建(1/7)相关推荐
- 【疯壳·机器人教程3】人形街舞机器人-控制主板设计及开发环境搭建
多自由度人形双足舞蹈机器人 --疯壳·机器人开发系列 控制主板设计及开发环境搭建 1 控制主板简介 我们主板正面如下图所示,其中有 3 片 74HC244,是用来增加电流驱动. ...
- electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- 【菠萝狗四足机器人】二次开发教程--第一章 【简介与开发环境搭建】
Py-apple Dynamics 简介与开发环境搭建 1 简介 1.1 何为 菠萝狗 和 Py-Apple Dynamics 1.2 目前支持的功能 2 开发环境搭建 2.1 硬件的搭建 2.1 软 ...
- win2012 r2 iis php,Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建wordpress博客教程
运行环境搭建教程 一.环境说明: 操作系统:Windows Server2012 R2 PHP版本:php 5.5.8 MySQL版本:MySQL5.6.15 二.相关软件下载: 1.PHP下载地址: ...
- Electron教程(七)结语
Electron教程(七)结语 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭建 Electron教程(二)启动过程:主进程,渲染进程是什么 Ele ...
- Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程
Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭 ...
- Electron教程3_使用VSCode来调试Electron
Electron教程3_使用VSCode来调试Electron 1. 使用VSCode打开项目的文件夹 2. 点击debug 功能 3. 自动创建launch.json 文件 4. 修改launch. ...
- Electron教程-程序目录结构
Electron教程-程序目录结构 程序目录结构 主进程 渲染进程 主进程模块目录 1.通用模块 2.日志模块 3.配置模块 4.进程通信模块 5.应用间通信模块 6.窗口管理模块 渲染进程模块目录 ...
- Electron 教程_20201007
Electron 教程 Electron 教程简介 Electron 快速入门 Electron 桌面环境集成 Electron 在线/离线事件探测 Electron 进程 Electron 支持的 ...
最新文章
- malloc 初始化_关于内存分配malloc、calloc、realloc的区别
- 怎样设定目标(五)——设定目标失败的七大原因
- vs2005制作安装包(自动安装.net framework 2.0)(小寿原创)
- C# Winform验证码
- 自定义SpringBoot start 自动打印日志
- gin 项目结构_Go Web 框架 Gin 路由的学习
- CSS3属性选择器(CSS3)
- [serial]基于select/poll/epoll的串口操作
- NLP提效,除了选择合适的模型,就是数据增强了
- 把Oracle数据库移植到Microsoft SQL Server 7.0
- JavaScript内置对象之Array对象总结(附实例)
- 黑马程序员-学习日志-文件的合并
- ps两张图片合在一起
- 理财投资理念黄金法则
- docker容器内开启22 ssh_细述docker容器中创建SSH服务镜像
- Java执行引擎工作原理:方法调用
- 剑指Offer66题之每日6题 - 第六天
- matplotlib报Unknown symbol: \rule, found ‘\‘ (at char 42), (line:1, col:43)
- ADO.NET中5大对象简介
- 02.爬虫工具的使用