electron 第一眼
先看一下我用 electron做的工具软件,你也可以看看vscode,也是electron做的.
看到没有,我用了3年的vscode挺稳,所以我就用它一样的开发环境.
electron 是什么
是一套使用js的开发工具,可以开发桌面程序(win,linux,macOS),为啥桌面,肯定是因为移动端资源有限.
注定它是个臃肿的工具,开发出的软件也臃肿....
electron 逻辑
第一页你看红字, Node.js 14.16.0, Chromium 91.0.4472.164, and Electron 13.6.9,其中vscode也同样在关于处可以看到.
Chromium -->这个不用说了吧,大名鼎鼎的chrome的内核,用来做前端UI的,也支持浏览器的各种功能,html+js+css.Electron -->套上 Chromium 就是它了,你就当它是半成品的浏览器,里面带了一些API接口,桥梁么?Node.js -->在后台处理数据的,类似浏览器中bs模式的s,例如服务器的php等.
electron 运行原理
- electron 启动一个exe,
- 然后创建一个网页容器(webview,或其它方式的网页)
- 启动后台服务器node.js 线程
- electron 做一个桥梁,暴露一部分功能,或全部功能给网页容器(渲染)线程.
- 网页容器打开一个本地的html或者远程的网址
- 这个容器就有了比普通浏览器更多的权限,例如访问tcp udp,本地文件,等等等....
- 就这样了....
electron 优势
使用现代web技术,主打一个现代化,没了.
快速入门
这个开发工具,说实在的,真的是很烦,一堆概念.... 但是烦也要学的,好了,开始全新的概念.
这个开发工具本身也是用nodejs来做的,所以,所以,你得了解什么是nodejs???? 实话实说,这个是我学的最累的工具
nodejs是什么?
它其实就是一个脱离浏览器,运行在服务器上的javascript脚本语言,和php一样一样的.
node.js入门
什么?又入门....node.js流行,就是它有一个管理器叫Node Package Manager,简称npm,它有超过150万个模块(插件)，支持全栈JavaScript开发,就这样, 你知道了node.js,然后又要了解npm了...因为你要开发的第一件事,就是用npm下载 electron开发用到的 模块(插件)
嗨,累了,累了....
package.json
有一个重要文件,重要概念 package 就是包,要下载什么工具,什么插件,然后程序入口,打开那个js文件,全在这里定义..
看到这里, 你肯定和我一样,已经很迷糊了!!!! 真的是个超级垃圾的玩意,累死人...
package例子
需要增加webdav客户端功能,
- 在package.json的dependencies 增加一行,
名称:"版本号"
npm i webdav安装,详细说明看项目主页: https://www.npmjs.com/package/webdav
重新编译
npm run xxx,其中xxx根据这个 package.json的定义来调用,
例如编译windows的: npm run build:win
node.js服务器 docker
FROM node:lts-alpine
# 创建并设置工作目录
WORKDIR /usr/src/app
# 复制依赖文件并安装，随后清理npm缓存
COPY package*.json ./
RUN npm install && \
npm cache clean --force
# 复制应用代码
COPY . .
# 启动应用
CMD ["npm", "start"]
- docker 下载镜像
node:lts-alpine - 创建一个镜像 路径挂接 ./app:/usr/src/app ,端口映射 -p 3000:3000
- 进入镜像 /usr/src/app
npm install安装依赖库- npm start 启动服务应用
下载镜像: docker pull node:lts-alpine
启动镜像: docker run -it --rm --name my-nodejs-container -v /opt/share/node:/usr/src/app node:lts-alpine /bin/sh
修改源
npm config set registry https://registry.npmmirror.com/
文件路径结构
快速调试
编译一份后,直接可以动态在 resources\ 增加库node_modules 或者增加你的应用,直接可以运行.
常用资源
Electron官网: https://www.electronjs.org/zh/docs/latest/why-electon
Electron版本: https://www.electronjs.org/zh/docs/latest/tutorial/electron-timelines
node.js的模块: https://www.npmjs.com/
公网tcp/udp/mqtt/http等服务器: http://mqtt.xnkiot.com/
公网tcp/udp/服务器: https://netlab.luatos.com/
