Electron 开发桌面应用 | 幸福的猪窝

Electron 开发桌面应用

1.环境安装

默认大家电脑上已经有可用的Nodejs环境,如果没有请自行安装。Nodejs安装参考官网

2. 创建一个空白的React 应用

1
2
3
4
5
##创建应用
npx create-react-app electron-demo
cd electron-demo
npm start
## 如果能启动浏览器看到如下界面表示React应用创建成功。

React默认App截屏

3. 集成Electron

1.安装组件

1
npm install  electron --save

package.json中添加这两行main是指定electron主文件的位置。electron-star是指定electron的启动脚本这样就可以通过 你npm run electron-start 来启动了。

1
2
3
4
5
6
{
"main": "src/electron/main.js",
"scripts": {
"electron-start": "electron ."
},
}

2.添加Electron启动脚本

我们在package.json中指定的electron的主程序路径在src/electron下。首先在创建主文件main.js

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/**
* Electron 主入口
*/
// 引入Electron
const { app, BrowserWindow} = require('electron');

// 定义默认启动窗口参数
let global_cfg = {
window : {width:800,height:600},
islocal : true,
openDevTools : true
}

//定义窗口主对象。
let win = null

//创建窗口
function createWindow() {

// 创建浏览器窗口。
let winCfg = global_cfg.window;
win = new BrowserWindow(winCfg);

//如果是本地调试状态从React监听的url打开,打包后从本地文件读取
if ( global_cfg.islocal ) {
win.loadURL('http://localhost:3000')
}else{
win.loadURL(`file://${path.join(__dirname, '../build/index.html')}`)
}

// 打开开发者工具
if(global_cfg.openDevTools){
win.webContents.openDevTools()
}

// 当 window 被关闭,这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
win = null
})
}

//系统初始化函数
function sysInit(){
createWindow();
}

// Electron 会在初始化后并准备 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', sysInit)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})

3.测试

1
npm run electron-start

顺利的话就能看到一个程序界面启动,内容就是第二步完成的React项目的内容。

到此一个 Electron + React 的项目框架就算初步完成。

  • 本文作者: Vincent
  • 本文链接: 172.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!