介绍
electron-egg 是一个业务框架；就好比 Spring 之于 java，thinkphp 之于 php，nuxt.js 之于 vue；electron 只提供了基础的函数和 api，但你写项目的时候，业务和代码工程化是需要自己实现的，ee 就提供了这个工程化能力。
- Electron： 基于 JavaScript 开发的多平台桌面应用框架，支持 MacOS 、Linux、Windows 等操作系统。
安装与使用
安装
1
2
3
4
5
|
git clone https://gitee.com/dromara/electron-egg.git
git clone https://github.com/dromara/electron-egg.git
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
npm config set registry=https://registry.npmmirror.com
npm config set disturl=https://registry.npmmirror.com/-/binary/node
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/
npm install
npm i node-gyp -g
npm run re-sqlite
npm --vs2015 i -g --production windows-build-tools
或者
npm i -g --production windows-build-tools
|
开始使用
前端
1
2
3
4
5
6
7
8
|
cd frontend
npm install
npm run serve
|
逻辑代码
1
2
3
4
5
|
npm run dev
npm run reload
|
项目配置
1
2
3
4
5
6
7
8
9
|
./electron/config/
config.default.js // 默认配置文件，开发环境和生产环境都会加载
config.local.js // 开发环境配置文件，追加和覆盖default配置文件
config.prod.js // 生产环境配置文件，追加和覆盖default配置文件
encrypt.js // 代码加密的配置
nodemon.json // 开发环境，代码（监控）热加载
|
项目结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| project
├── package.json npm包配置
├── bulid 打包用的资源和脚本
├── icons 软件图标（打包用到）
├── extraResources 额外资源目录
├── electron 主进程服务
├── addon 插件目录
├── example demo插件（代码示例）
├── config 配置文件
├── config.default.js 默认配置，都会加载
├── config.local.js dev环境加载
├── config.prod.js 生产环境加载
├── encrypt.js 加密配置文件
├── controller 控制器
├── service 业务层
├── preload 预加载，在程序启动时加载，如托盘、自动升级等功能要提前加载代码
├── library 一些封装库
├── frontend 前端目录（demo是用vue编写的）
├── out 打包后生成的可执行文件
├── latest.yml 自动升级文件
├── xxx.exe window应用安装包
├── xxx.exe.blockmap window应用增量升级包（未测试过）
├── xxx.dmg mac应用安装包
├── xxx.deb linux应用安装包后缀有多种
├── run 一些运行缓存
├── logs 日志
├── main.js 入口文件
├── public 资源目录
├── dist 前端资源会移动到这里，生产环境加载
├── electron 业务js加密后的文件
├── html 一些模板
├── images 一些图片
├── data 内置数据库文件
├── system.json 框架使用的数据库
├── demo.json 示例json数据库
├── sqlite-demo.db 示例sqlite数据库
|
demo 改写步骤
- 1.编写接口
- 在 electron\controller\demo.js 中编写方法
1
2
3
4
5
6
7
8
|
openBrowser(){
this.messageShowConfirm("ok?");
window.open("http://baidu.com");
this.messageShow("success.");
}
|
- 2.定义接口
- 在 frontend\src\api\main.js 中定义接口
1
2
3
| const ipcApiRoute = {
openBrowser: "controller.example.openBrowser",
};
|
1
2
3
4
5
| openBrowserClick(){
this.$ipc.invoke(ipcApiRoute.openBrowser).then(r => {
console.log(r);
})
}
|
打包发布应用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
npm config set electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
npm run build-w
npm run build-w-32 (64位)
npm run build-w-64 (64位)
npm run build-w-arm64 (arm64)
npm run build-wz
npm run build-wz-32 (32位)
npm run build-wz-64 (64位)
npm run build-wz-arm64 (arm64)
npm run build-m
npm run build-m-arm64 (m1芯片架构)
npm run build-l (32位 deb包)
npm run build-l-64 (64位 deb包)
npm run build-l-arm64 (64位 deb包 arm64)
npm run build-l-armv7l (64位 deb包 armv7l)
npm run build-lr-64 (64位 rpm包)
npm run build-lp-64 (64位 pacman包)
|
See
