我的GitHub

无星的小窝

技术为辅,业务为主

0%

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

背景

有些component需要全局注册的，但是在main.js中全局注册又太麻烦了。

store采用modules方式分包，使用的时候也要手动注册。

store刷新丢失，需要持久化。

这时候解决前两个问题，可以使用require.context

解决最后一个问题可以使用vuex-persistedstate

require.context

1.require.context是什么？

Vue内置了webpack的部分配置，这个咱们就不多说了。

require.context是webpack的api。

阅读全文 »

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

一、背景

开发群中讨论，如何给electron注入js

有老哥提出了使用preload.js注入

我惊了，表示不信，后面仔细想了想：

“通过preload.js，可以预加载一些electron主线程的变量挂在到window上，后期在render线程中可以获取到对应的变量。

换句话说，preload.js中获取到的window，是后期render线程的window，那理论上确实可以做注入操作。

如果我在preload.js中添加window的生命周期,渲染后通过id或者各种方式获取到对应的dom节点，理论上我应该能劫持某些按钮，也就是说注入js成功了。”

二、说干就干

1、老规矩，vue+vue-cli-plugin-electron-builder创建项目

2、background.js，直接加载www.baidu.com

阅读全文 »

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

一、背景

希望窗口从某些固定区域弹出，比如右下角（如果有自定义弹窗需求，这就很常见了）

二、如何修改弹出位置

其实非常简单

1
2
3
4
5
6
7
8
9
10
11
12
13
const newWindow = new BrowserWindow({
    x: 400,
    y: 400,
    width: 400,
    height: 600,
    frame: false,
    webPreferences: {
      webSecurity: false,
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

关键就是这个x，y了

1.屏幕上的坐标轴

在屏幕上的坐标轴长这样

1

把你的鼠标放到屏幕四个角落，打印一下就可以验证了

阅读全文 »

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

图标使用的地方非常多，打包生成exe的图标，运行时的图标，系统托盘的图标等等

这里我们先介绍几种格式：

png,jpg,icns,ico

1
2
3
4
5
6
7
png：是一种采用无损压缩算法的位图格式，兼容性好。

jpg：JPG一般指JPEG格式。JPEG（Joint Photographic Experts Group）是JPEG标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式，后缀名为.jpg或.jpeg。

icns：一般是用来给application做resource的icon文件,也是macintosh系统里独特支持的格式。

ico:ICO是Windows的图标文件格式，图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

所以换句话说，icns是mac用的（有些时候linux也可以使用），ico是windows用的

怎么制作这些图标？

1.首先，准备问美工要一个1024x1024的png图标

2.有两个库可以帮助我们

electron-icon-maker

electron-icon-builder
具体使用说明请查看readme

阅读全文 »

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

大🔥都知道，Vscode的换行符有LF和CRLF

1
在各操作系统下，文本文件所使用的换行符是不一样的。UNIX/Linux 使用的是 0x0A（LF），早期的 Mac OS 使用的是0x0D（CR），后来的 OS X 在更换内核后与 UNIX 保持一致了。但 DOS/Windows 一直使用 0x0D0A（CRLF）作为换行符。Git提供了一个“换行符自动转换”功能。这个功能默认处于“自动模式”，当你在签出文件时，它试图将 UNIX 换行符（LF）替换为 Windows 的换行符（CRLF）；当你在提交文件时，它又试图将 CRLF 替换为 LF。Git 的“换行符自动转换”功能听起来似乎很智能、很贴心，因为它试图一方面保持仓库内文件的一致性（UNIX 风格），一方面又保证本地文件的兼容性（Windows 风格）。但遗憾的是，这个功能是有 bug 的，而且在短期内都不太可能会修正。

从git 换行符LF与CRLF转换问题抄的

这里我们可以知道，在macOS和linux上，与windows的换行符是不一致的。

一旦使用eslint等工具，就会整个项目出问题。。。

可能在百度搜半天，怎么解决这个问题，发现的都是以下两种：

1.新建文件怎么设置换行符

2.单文件如何通过编辑器修改换行符

丝毫没提如何修正已有文件

项目那么多文件，怎么可能手动一个个修复

阅读全文 »

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

在 Vue 中引入 ElementUI 是非常常见的

elementUI-icon 图标

ElementUI 默认提供了一个 icon 图标集合,可以使用 i 标签展示

直接 class 名写图标名就能展示,这可太方便了

1
<i class="图标名"/>

但是图标肯定是不够用的,总会要引入一些自己的图标,比如使用阿里的iconfont

iconfont 引入

在阿里帮助页面我们可以看到好几种引入方式

其中 font-class 方式引入

fontclass引入.png

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 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上搞,百度一下都有

阅读全文 »