无星的electron之旅（九）—— JS注入
一、背景开发群中讨论，如何给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 3、添加preload.js 4.preload.js中添加window的生命周期 123window.load = function(){ <!-- xxxxx具体就不写了 -->} 三、效果点击百度一下，触发我的代码 视频：...
无星的electron之旅（八）—— 坐标
一、背景希望窗口从某些固定区域弹出，比如右下角（如果有自定义弹窗需求，这就很常见了） 二、如何修改弹出位置其实非常简单 12345678910111213const 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.屏幕上的坐标轴在屏幕上的坐标轴长这样 把你的鼠标放到屏幕四个角落，打印一下就可以验证了 12const point = screen.ge...
无星的electron之旅（七）——electron 图标资源
图标使用的地方非常多，打包生成exe的图标，运行时的图标，系统托盘的图标等等 这里我们先介绍几种格式： png,jpg,icns,ico 1234567png：是一种采用无损压缩算法的位图格式，兼容性好。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-...
无星的前端之旅（十一）——Vscode的换行符问题
大🔥都知道，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等工具，就会整个项目出问题。。。 可能在百度搜半天...
无星的前端之旅（十二）——扩充elementUI的icon(复用i标签展示iconfont)
在 Vue 中引入 ElementUI 是非常常见的 elementUI-icon 图标 ElementUI 默认提供了一个 icon 图标集合,可以使用 i 标签展示 直接 class 名写图标名就能展示,这可太方便了 1<i class="图标名"/> 但是图标肯定是不够用的,总会要引入一些自己的图标,比如使用阿里的iconfont iconfont 引入在阿里帮助页面我们可以看到好几种引入方式 其中 font-class 方式引入 可以看到,需要先写个 fontclass 1234567.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;} 然后每次引用...
无星的electron之旅（六）——electron 应用协议唤起
一、背景应用希望能通过其他应用唤起，这应该是个非常常见的需求 二、如何唤起搜半天，全是基于协议的。protocol 接着会发现关键代码 官网地址 1app.setAsDefaultProtocolClient(PROTOCOL, process.execPath, args); 但是这有一个关键点：你至少运行过一次程序，才能注册这个协议！！！这就让人很难受了。 那么我们需要想想，有没有办法在安装的时候把协议写进去？ 答案是：有。 如何在安装的时候把协议写进去？既然要在安装的时候写进去，那么必定需要在打包的地方下功夫。 这里我使用的是electron-builder来进行打包（我的项目是基于vue-cli4配合vue-cli-plugin-electron-builder创建的） 因此我们的打包配置文件中，需要写入protocols配置 注意，mac和Windows协议是分开的。 这里我们解释一下 1.mac上直接在这写就行。（亲测可行）mac的协议唤起，实质上是dmg安装文件后的info.plist文件下的URLType，干过iOS开发的同事应该都有经验。 路径是...
无星的electron之旅（五）——系统托盘
背景应用要收到系统托盘，这没什么好说的 文档electron 代码12345678910111213141516171819202122232425262728293031# 主线程代码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'), '/../reso...
无星的electron之旅（四）——打包
背景我是用的是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", FAQmac如何打windows的exe文件第一个–不要删,是npm传值的意思 1npm run electron:build -- --win nsis linux下如何打windows的包这个比较复杂了,建议是用docker,具体见官网 如何使用vue的mode模式直接使用 1"electron:build:dev": "vue-cli-service electron:build --mode dev&qu...
无星的electron之旅（三）——跨域
背景你只要打包就肯定遇到这个问题… 原本开发的时候可以通过webpack的proxy做转发,避免跨域的问题 但是打包上线会发现,这和普通的前端项目上线不一样,不会发布到对应的域名下 而是本地文件协议加载,app//.或者file://这种协议 因此在填写网络请求baseurl的时候,势必会遇到跨域问题 解决方式由两种 一.后台解决这个就不多说了,让后台去加cors即可. 要是有Nginx上也可以在Nginx上搞,百度一下都有 二.端上解决你能百度到的基本都是 1234567win = new BrowserWindow({ webPreferences: { //添加这样一个配置项,允许跨域 webSecurity: false, },}); 包括在electron的官方文档也是这么写的 但是我实测,不生效 还需要在文件顶端加上 1app.commandLine.appendSwitch('disable-web-security'); 这样才能允许端上跨域访问...
无星的electron之旅（二）——进程间通信
进程间通信用ipcRenderer，ipcMain官网写的很清楚 但问题在于，我使用vue-cli-plugin-electron-builder引入electron 想做进程间通信 import {ipcRenderer} from ‘electron’ 引入一直报错 原因如下 插件文档方式一：Node Integration12345678# vue.config.jsmodule.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } }} 方式二：预加载1.在src下新建一个js1234# ./src/preload.jsimport { ipcRenderer } from 'electron'window.ipcRenderer = ipcRenderer 2.修改vue.config.js12345678# ./vue.config.jsmodule.e...
