Electron/Nodejs开发笔记-功能问题记录及指南

这篇随笔记录一下electron + vue与nodejs 的一些开发的过程和问题..随缘更新

最近基于Electron作一个针对UE4应用的进程守护和更新启动器...

花费大量了时间的处理来UI线程堵塞的问题上了（吐槽感受Nodejs IO和线程不是hin好用..）

涉及的技术点估计之后不会怎么经常使用，因此写篇随笔整理一下

　　electron启动更新器：

　　　　github: https://github.com/linqingwudiv1/electron-startup

----------------------------------------割-------------------------------------------------------------

 

Electron+ Vue环境:

　　Vue环境目前有俩个比较好用的开发环境：

　　　　1.electron-vue:    https://github.com/SimulatedGREG/electron-vue

　　　　2.Vue + Vue CLI Plugin Electron Builder

　　区别

　　　　electron-vue 是基于vue-cli 2.0的快速开发框架

　　　　Plugin Electron Builder是vue-cli 3.X的electron 脚手架插件.

　　我用的是 Electron Builder...

　　Vue cli 3.x版本的Vue + Vue CLI Plugin Electron Builder整合的Electron应用

 　　　　插件使用文档　　  :　　https://github.com/nklayman/vue-cli-plugin-electron-builder

　　　     VS Code 断点调试配置指南：    https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#table-of-contents

　　　　Electron  Vue DevTools配置指南：https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md

参考:

 

 

 Q.开发记录：

1.electron的渲染进程xmlhttprequest的cors问题/开启nodejs和Worker线程等：

win = new BrowserWindow( { width: 800, height: 600, backgroundColor: '#ffffff', webPreferences: { nodeIntegration: true, webSecurity: false, //cors
      nodeIntegrationInWorker: true //
 } });

 

 2.Nodejs/electron下 解压zip

使用 adm-zip-ex解压实例：

const AdmZip = require('adm-zip-ex'); let zip = new AdmZip("d://Test.zip"); zip.extractAllTo('d:/temp');

 adm-zip-ex单个entry的异步解压示例：

let zip = new AdmZip('c:temp.zip'); let zipEntries = zip.getEntries(); zipEntries.forEach( ( zipEntry:any, index:number ) => { if ( zipEntry == null ) { return; } const entryPath = join( 'c:/', zipEntry.entryName); if ( zipEntry.isDirectory ) { return; } let path = dirname( entryPath ); // unzip entry......
    zip.extractEntryToAsync(zipEntry, path , true, (err:any) => { if ( err != undefined ) { console.log(err); return; } //do something.....
 }); });

 

3.nodejs怎么进行流文件下载:

　　用nodejs的http模块或electron的net模块均可以，可是太底层了，建议用 request或request-promise库，是对于nodejs的网络模块封装的，ts版本：@types/request 文档：https://github.com/request/request

　　http下载文件:

request('http://google.com/doodle.png').pipe(fs.createWriteStream('doodle.png'))

　　若是有大文件下载需求，请添加 request-progress-ex模块，跟request组合使用..　　

 　　　　https://www.npmjs.com/package/request-progress-ex

　　附 request-promise帮助类:

import request, { RequestPromiseOptions } from 'request-promise'; let options:RequestPromiseOptions = { baseUrl: process.env.APP_BIZ_BASE_API, qs: { //access_token: 'xxxxx xxxxx' // -> uri + '?access_token=xxxxx%20xxxxx'
 }, headers: { 'User-Agent': 'Request-Promise' }, json: true // Automatically parses the JSON string in the response
}; let services =request.defaults(options); export default services;

 

 

4.worker_threading(线程):

　　 https://github.com/wilk/microjob/blob/master/GUIDE.md

5.进程通信的基本例子：

　note:也可使用remote调用main process进程功能或模块.可是不推荐这么作，由于破坏了electron的封装性

    https://electronjs.org/docs/api/ipc-main

 

　　remote例子:

import {remote} from 'electron'; const { app } = remote;

 

6.electron 怎么系统托盘app?

例子(typescript)：

　　Browser事件处理:(close事件能够根据自身状况处理)

　　GWin.MainWindow是我本身封装的BrowserWindow类

GWin.MainWindow.on('minimize',(ev:any)=> { if (GWin.MainWindow !=null) { console.log('on minimize...'); GWin.MainWindow.setSkipTaskbar(true); GWin.MainWindow.hide(); } ev.preventDefault(); });

          GWin.MainWindow.on('closed', () => {

          　　GWin.MainWindow = null

          });

　　

建立系统托盘 tray类:

　　electron:隐藏任务栏条 setSkipTaskbar(true)

　　electron:显示任务栏条setSkipTaskbar(false)

　　note：注意new Tray('ico.jpg')时，ico.jpg必须存在，不然托盘图标将不显示..没法点击

GWin.TrayIcon = new Tray('ico.jpg'); const contextMenu = Menu.buildFromTemplate([ { label: '显示', //type: 'radio', click:()=> { if(GWin.MainWindow != null) { GWin.MainWindow.show(); GWin.MainWindow.setSkipTaskbar(false); } } }, { label: '退出', //type: 'radio' click:()=> { app.quit(); } } ]) GWin.TrayIcon.setToolTip('更新启动器'); GWin.TrayIcon.setContextMenu(contextMenu);

 

7.NodeJS从文件中读取json：

ts

let jsonStr:string = readFileSync('UE/version.json', { encoding: 'utf-8' });

js

let jsonStr = fs.readFileSync('UE/version.json', { encoding: 'utf-8' });

 

8.Electron持久化配置到磁盘文件:

　　其实能够用nodejs模块本身IO到json文件，可是比较麻烦，须要本身封装接口

　　并且已经有相关的electron-store类库了..

　　　　https://github.com/sindresorhus/electron-store

　　　　typescript 版本:

npm install @types/electron-store

　　electron-store 每次set 或get都是从disk文件读写配置信息

　　简单的使用示例:（建议写成这样的单例）

/** * Electron-Store的配置内容 */ interface SystemStore { CacheDir: string; } /** * 整个App的全局变量,或函数 */ export default class GApp { /** 系统持久化配置实例 */ private static sysStore?:Store<SystemStore> = undefined; /** Get 系统持久化配置单例 */ public static get SystemStore():Store<SystemStore> { if (GApp.sysStore == undefined) { GApp.sysStore = new Store<SystemStore>({ defaults: { CacheDir: GApp.RootDir + '/cache/' } }); } return GApp.sysStore; } }

 

9.Nodejs获取指定文件的所在目录:

import {dirname} from 'path'; let dir = dirname(`d:/test/ttt/helloworld.png`);

 

10.Nodejs递归建立目录:

　　nodejs 的mkdir()目前还不能 建立多级路径...

　　如C:/a/b/c 若是C:/a/b 路径还不存在则报错.. 

　　（v13.x）

实现：

　　虽然也能够本身写递归调用mkdir(),

　　但仍是推荐使用 shelljs 类库 用mkdir脚本建立路径...(linux环境须要加 -p)

 

　import { mkdir } from 'shelljs';

  import {existsSync } from 'fs';

　import {resolve} from 'path';

  if (!existsSync( GApp.SystemStore.get('CacheDir') ) )

  {

  　　let stdout = mkdir('-p', resolve(`路径`)).stdout;

  }

 

Q.Electron无边框模式并自定义标题栏：

官方参考：

https://electronjs.org/docs/api/frameless-window

 

Electron自定义标题栏很是简单..

Step1:开启无边框模式:

如

let win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: false })

Step2:render进程编写标题栏Div和处理事件

并添加关键css

-webkit-user-select : none; -webkit-app-region  : drag;

这两个css属性会自动识别为可拖拽区，使之能像标题栏同样随意移动窗口..

如：

<div class="titlebar-btn-group">
      <el-button id="btn-close" size="medium" type="text" icon="el-icon-close"></el-button>
    </div>

 width:150px; background: green; position : fixed; top:10px; right :10px; -webkit-user-select : none; -webkit-app-region  : drag;

 width:150px; background: green; position : fixed; top:10px; right :10px; -webkit-user-select : none; -webkit-app-region  : drag;

 

Note:

若是只是但愿把菜单栏移到标题栏上,推荐使用:
Electron自定义标题栏 (Custom Title Bar)插件：https://github.com/AlexTorresSk/custom-electron-titlebar

若是只是须要自定义拖拽移动区：

 https://github.com/kapetan/electron-drag