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

来源:博客园 分类: 文章浏览史 发布时间:2020-10-11 11:00:32 最后更新:2020-10-11 浏览:78
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-10-11 11:00:32

这篇随笔记录一下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

php技术微信