(待填坑)Electron学习笔记

Electron我们现在没有用到，但是我有种预感，终有一天我会用上它的，因此这里先开个文章，有空的时候学习并记录下。

本地文件读写

https://blog.csdn.net/weixin_46187747/article/details/105396764

经验

如何解决控制台中文乱码问题

1
2
const iconv = require('iconv-lite');
console.log( iconv.decode(data, 'cp936'));

如何用指定的程序打开指定的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const spawn = require("child_process").spawn;

function testCMD() {
  return new Promise(function(resolve, reject) {
      // start '' '程序路径' '文件路径' 
      const result = spawn('cmd.exe', ['/c', 'start', '', 'D:\\software\\Typora\\Typora.exe', 'D:\\git\\blog\\source\\_posts\\可视化组件开发的教训与技巧.md']);
      result.on('close', function(code) {
          console.log('child process exited with code :' + code);
      });
      result.stdout.on('data', function(data) {
          // 解决中文乱码问题
          console.log( iconv.decode(data, 'cp936'));
      });
      result.stderr.on('data', function(data) {
          console.log('stderr: ' + data);
          reject(new Error(stderr.toString()));
      });
      resolve();

  });
};

通信机制：context-bridge

简单来说，就是preload.js中定义通信的API，然后在html和main.js中利用该API进行通信。

思考：preload.js可以访问node的API，那是不是可以在这一层实现操作系统的控制逻辑？是否没有必要再通知到main进程了？

官方文档：https://www.electronjs.org/docs/latest/api/context-bridge

示例：https://stackoverflow.com/questions/57807459/how-to-use-preload-js-properly-in-electron

更换icon

package.json中增加packagerConfig内容：

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
"config": {
	"forge": {
	  "packagerConfig": {
		"name": "好好学习，天天向上",
		"icon": "public/icon/favicon.ico"
	  },
	  "makers": [
		{
		  "name": "@electron-forge/maker-squirrel",
		  "config": {
			"name": "my_electron_app"
		  }
		},
		{
		  "name": "@electron-forge/maker-zip",
		  "platforms": [
			"darwin"
		  ]
		},
		{
		  "name": "@electron-forge/maker-deb",
		  "config": {}
		},
		{
		  "name": "@electron-forge/maker-rpm",
		  "config": {}
		}
	  ]
	}
},

打包任意资源

https://segmentfault.com/a/1190000022382914

常见问题

安装Electron包失败

比如报这样的错误：

1
2
3
4
5
6
7
8
9
10
11
12
13
> electron@10.4.7 postinstall D:\git\test\electron-admin\node_modules\electron
> node install.js

RequestError: connect ETIMEDOUT 20.205.243.166:443
    at ClientRequest.<anonymous> (D:\git\test\electron-admin\node_modules\got\source\request-as-event-emitter.js:178:14)
    at Object.onceWrapper (events.js:422:26)
    at ClientRequest.emit (events.js:327:22)
    at ClientRequest.origin.emit (D:\git\test\electron-admin\node_modules\@szmarczak\http-timer\source\index.js:37:11)
    at TLSSocket.socketErrorListener (_http_client.js:426:9)
    at TLSSocket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

解决方案：给Electron单独设置npm源地址：

1
npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

参考资料

Electron实现跨平台视频播放器：
https://www.jianshu.com/p/66c80009102c

使用Electron+Vue做个播放器：
https://www.cnblogs.com/axes/p/7151759.html

让Electron打包的客户端自动播放音频：
http://www.brandhuang.com/article/1561881558131

基于Electron的各平台预览功能：

https://github.com/manojVivek/responsively-app