我的GitHub

无星的小窝

技术为辅,业务为主

0%

发表于 更新于 分类于 阅读次数：
本文字数： 2.5k 阅读时长 ≈ 2 分钟

一、背景

应用希望能通过其他应用唤起，这应该是个非常常见的需求

二、如何唤起

搜半天，全是基于协议的。protocol

接着会发现关键代码

官网地址

1
app.setAsDefaultProtocolClient(PROTOCOL, process.execPath, args);

但是这有一个关键点：你至少运行过一次程序，才能注册这个协议！！！

这就让人很难受了。

那么我们需要想想，有没有办法在安装的时候把协议写进去？

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 2.5k 阅读时长 ≈ 2 分钟

背景

应用要收到系统托盘，这没什么好说的

文档

electron

代码

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
# 主线程代码
import {
  Tray, Menu,
} from 'electron';


let tray = null;
app.whenReady().then(() => {
  // console.log(app.getAppPath());
  // // 判断环境
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // 开发
    tray = new Tray(path.join(app.getAppPath(), '/../src/assets/logo.png'));
  } else {
    // 生产
    tray = new Tray(path.join(app.getPath('exe'), '/../resources/logo.png'));
  }
  // tray = new Tray(logo);

  const contextMenu = Menu.buildFromTemplate([
    { label: '退出', click: () => { win.destroy(); } },
  ]);
  tray.setToolTip('鼠标移上来的提示');
  tray.setContextMenu(contextMenu);
  tray.on('click', () => {
    // eslint-disable-next-line no-unused-expressions
    win.isVisible() ? win.hide() : win.show();
    // eslint-disable-next-line no-unused-expressions
    win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# vue.config.js

module.exports = {
  …………// 省略
  pluginOptions: {
    electronBuilder: {
      preload: './src/preload.js',
      // 打包参数
      builderOptions: {
        extraResources: [{
          from: path.join(__dirname, '/src/assets/logo.png'),
          to: './',
        }],
      },
    },
  },
};

注意点

其实收到托盘代码很简单，但是这个托盘图标就有点坑了。

会发现，打包后因为没有这个icon，托盘找不到程序了。

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 829 阅读时长 ≈ 1 分钟

背景

我是用的是vue-cli-plugin-electron-builder提供的集成方式

此插件提供的打包插件是electron-builder

预知项

1.在什么系统上默认打什么系统的包
2.mac上可以打全平台的包
3.win/linux不可以打mac的包
4.不建议在mac上打windows的包,nsis在electron的打包下存在bug,打的包无法卸载

打包介绍

默认提供的打包命令

1
"electron:build": "vue-cli-service electron:build",

FAQ

mac如何打windows的exe文件

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 492 阅读时长 ≈ 1 分钟

背景

你只要打包就肯定遇到这个问题…

原本开发的时候可以通过webpack的proxy做转发,避免跨域的问题

但是打包上线会发现,这和普通的前端项目上线不一样,不会发布到对应的域名下

而是本地文件协议加载,app//.或者file://这种协议

因此在填写网络请求baseurl的时候,势必会遇到跨域问题

解决方式由两种

一.后台解决

这个就不多说了,让后台去加cors即可.

要是有Nginx上也可以在Nginx上搞,百度一下都有

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 834 阅读时长 ≈ 1 分钟

进程间通信用ipcRenderer，ipcMain官网写的很清楚

但问题在于，我使用vue-cli-plugin-electron-builder引入electron

想做进程间通信

import {ipcRenderer} from ‘electron’

引入一直报错

原因如下

插件文档

方式一：Node Integration

1
2
3
4
5
6
7
8
# vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

方式二：预加载

阅读全文 »

发表于 更新于 阅读次数：
本文字数： 1.3k 阅读时长 ≈ 1 分钟

背景

多环境部署的时候总会有些参数需要写入

在vue-cli3创建的项目中可以通过webpack的配置文件写入

vue-cli4中没有了webpack配置文件，取而代之的事vue.config.js

实际上有两种方式可以完成这一需求

Mode模式

这是vue-cli4提供的能力,通过创建

1
.env.环境

方式创建不同环境下的不同配套参数

需要注意的是

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 585 阅读时长 ≈ 1 分钟

创建项目

1.使用脚手架正常创建项目

1
vue create hello-world

2.集成electron

1
vue add vue-cli-plugin-electron-builder

不过这一步可能大多数同学可能卡在下载electron这，因为众所周知的原因，它需要很久

因此我们推荐使用国内源加速

1
npx cross-env ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" vue add vue-cli-plugin-electron-builder

这种方式能有效加速你的集成

也可以创建.npmrc文件放在项目中

阅读全文 »

发表于 更新于 分类于 ， 阅读次数：
本文字数： 1.1k 阅读时长 ≈ 1 分钟

日志涉及的东西还是挺多的

一.日志格式化

默认是自带格式的,但保不齐自己有自定义格式的需求.因此需要修改格式.

1
2
3
4
5
6
7
8
9
// ./config/config.default.js
  ......
  config.logger = {
    dir: path.join(__dirname, '../logs'),
    contextFormatter(meta) {
        //TODO:这里就是默认loger返回的日志格式了
      return `${meta.date} ${meta.message}`;
    },
  };

二.自定义存储路径

u1s1,你会发现本地运行的时候,产生的loger在项目文件夹下,但在部署的时候就找不到了.

因为在egg默认的生产环境中,会在用户根目录下,新建一个叫logs的文件夹,所有日志都在里面.

因此需要自定义日志地址

1
2
3
4
5
6
7
8
9
10
// ./config/config.default.js
  ......
  config.logger = {
    //这里写日志地址,__dirname可以变成别的
    //但是注意,appInfo.root在生产和开发不是一个地址,建议使用appInfo.baseDir
    dir: path.join(__dirname, '../logs'),
    contextFormatter(meta) {
      return `${meta.date} ${meta.message}`;
    },
  };

三.自定义logger

阅读全文 »

发表于 更新于 分类于 ， 阅读次数：
本文字数： 2.7k 阅读时长 ≈ 2 分钟

sequelize引入

1
2
npm i mysql2
npm i egg-sequelize

sequelize配置

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
// 不同环境的库当然不一样,自己配置多环境的config.xx.js,我这就写个default
// ./config/config.default.js
// sql配置,填自己的即可
  config.sequelize = {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    database: 'monitor',
    username: 'root',
    password: '123456',
    define: { // model的全局配置
      timestamps: true, // 添加create,update,delete时间戳
      paranoid: true, // 添加软删除
      freezeTableName: true, // 防止修改表名为复数
      underscored: true, // 使用下划线
    },
    timezone: '+8:00', // 由于orm用的UTC时间，这里必须加上东八区，否则取出来的时间相差8小时
    dialectOptions: { // 让读取date类型数据时返回字符串而不是UTC时间
      dateStrings: true,
      typeCast(field, next) {
        if (field.type === 'DATETIME') {
          return field.string();
        }
        return next();
      },
    },
  };

插件配置

开启sequelize插件

./config/plugin.js

1
2
3
4
5
6
7
8
9
10
11
12
'use strict';


/** @type Egg.EggPlugin */
module.exports = {
  //  xxxxxx
   sequelize: {
     enable: true,
     package: 'egg-sequelize',
   },
};

用法

和正常的sequelize相似

阅读全文 »