基于 vue-cli 配合 Electron 构建跨平台窗体项目

概述

最近突然冒出来一个思路。如果我构建了一个代理服务器,那么我可以在代理端就对http请求所得的页面进行增强操作(注入js)。像之前比如有刷课的想法,一般都是通过下载一个油猴巴拉巴拉好麻烦。那么我能否直接在代理端把这个操作给做了?

一顿巴拉巴拉,总之需要写一个客户端。用之前学的pyqt? 太无趣了。

之前一直想看Electron,没有项目可写就一直搁置。

这东西的主要作用就是使前端拥有调用系统级API的功能。比如,发起系统通知、IO操作...等等。配合前端的话,调用AntDesign、elementUi,不比qt好看多了嘛。不过坏处是,它本质上相当于封装了一个浏览器... 因此即使什么都不做,文件也会有几十m。

安装

首先通过vue-cli把项目都构建好。其后运行下面指令进行安装。

vue add electron-builder

安装完毕之后,使用下面指令运行。

yarn electron:serve

这样就可以了。值得注意的是,这篇博文是基于 vue-cli 进行的,所以与其他形式可能不同,它的入口文件是「src/background.js」。

入口文件

入口文件主要由以下代码构成。app是作为管理整个窗体事件的对象,而BrowserWindow则是管理窗体的对象。可以看到,在下面运行了 new BrowserWindow() 方法,其中 width 和 height 就代表窗体的长度和宽度。

而其后通过这个对象的 loadFile 方法载入了我们的前端页面。注意,这里的 index.html 在运行的时候打包工具会自动的进行打包。

const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}

烂尾了,等有空再填这个坑

原本是为了写一个项目,写着写着,嗯..觉得好像没卵用哈哈哈哈

1.png

2.png

基本使用

系统通知

本地配置项

多窗体

打包项目