Electron,打造上班划水摸鱼桌面小工具:“股票监控“软件-USB迷|专注于互联网分享

Electron,打造上班划水摸鱼桌面小工具:“股票监控“软件

最近一个朋友入了股市这个坑,大家都懂的,买了股票你有事没事就想摸出手机看两眼,但是作为一个员工被老板或者领导看到炒股肯定不是什么好事,所以他在公司炒股的时候总感觉不安心,心想如果把数据呈现在电脑桌面某个"隐秘的角落"上,可以放心大胆的盯盘了,在老板眼里他在认真工作,其实他是在划水,岂不美哉~

听了朋友的一番要求,我陷入了沉思,看来他的工作很不饱和啊~不过朋友的这个要求还是可以实现的,因为最近刚好接触到了Electron,正好用Electron试试水

什么是Electron?

Electron是一个能让你使用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面应用的框架,通俗点就是用JS写桌面客户端,广为熟知的VS Code就是基于Electron的壳实现的,甚至有人觉得,如果不是Vs code 可能在中国更没什么人用Electron.

闲话少说,先看最终实现效果图

最终效果:

不明显的灰色字体;
透明窗口,可拖拽到任意位置;
窗口大小可调;
运行状态:更新数据表情会变化;
呈现最高价最低价实时价;

环境准备

访问官网 nodejs下载安装NodeJS

>node -v
v14.5.0

开发工具推荐使用VS Code

Electron安装

你可以在修改用户目录下的.npmrc文件,使Electron的下载使用淘宝源

home=
registry=/
loglevel=http
#增加ELECTRON_MIRROR
ELECTRON_MIRROR=/

然后执行

npm install -g electron

或者你可以直接以下命令执行直接安装

#如果CMD中报错,可以在git bash中执行
ELECTRON_MIRROR=/ npm install -g electron

初始化项目

安装Electron Forge,Electron Forge是创建、发布和安装Electron应用程序的完整工具。

npm install -g electron-forge#构建一个项目
yarn create electron-app my-appcd my-app#启动electron项目
yarn start#打包项目
yarn make

项目结构

执行yarn create electron-app my-app 初始化构建项目

> yarn create electron-app my-app
yarn create v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...warning Your current version of Yarn is out of date. The latest version is "1.22.4", while you're on "1.16.0".
info To upgrade, run the following command:
$ curl --compressed -o- -L .sh | bash
success Installed "create-electron-app@1.0.0" with binaries:- create-electron-app
√ Initializing Project Directory
√ Initializing Git Repository
√ Locating custom template: "base"
√ Copying Starter Files
√ Initializing NPM Module
√ Installing Template Dependencies
√ Installing NPM Dependencies
Done in 29.55s.

项目结构如下

my-app:.
│  package.json       
└─srcindex.cssindex.htmlindex.js

package.json 是项目的配置文件

src为静态资源文件

打开package.json

{"name": "my-app1","productName": "my-app1","version": "1.0.0","description": "My Electron application description","main": "src/index.js","scripts": {"start": "electron-forge start","package": "electron-forge package","make": "electron-forge make","publish": "electron-forge publish","lint": "echo \"No linting configured\""},"keywords": [],"author": {"name": "caokang","email": "caokang@example"},"license": "MIT","config": {"forge": {"packagerConfig": {},"makers": [{"name": "@electron-forge/maker-squirrel","config": {"name": "my_app1"}},{"name": "@electron-forge/maker-zip","platforms": ["darwin"]},{"name": "@electron-forge/maker-deb","config": {}},{"name": "@electron-forge/maker-rpm","config": {}}]}},"dependencies": {"electron-squirrel-startup": "^1.0.0"},"devDependencies": {"@electron-forge/cli": "6.0.0-beta.52","@electron-forge/maker-deb": "6.0.0-beta.52","@electron-forge/maker-rpm": "6.0.0-beta.52","@electron-forge/maker-squirrel": "6.0.0-beta.52","@electron-forge/maker-zip": "6.0.0-beta.52","electron": "9.1.1"}
}

重点看

#代表启动入口 
"main": "src/index.js",
#当前工程脚本以及其对应的实际运行命令"scripts": { "start": "electron-forge start","package": "electron-forge package","make": "electron-forge make","publish": "electron-forge publish","lint": "echo \"No linting configured\""}

所以执行yarn start 或者 npm start 都会启动程序,如下图

窗口透明化

接下来我们是窗口透明化,打开index.js

  const mainWindow = new BrowserWindow({width: 800,height: 600,transparent: true, frame: false,});#增加 transparent: true,  frame: false 两个属性, 该参数表示窗口透明
#另外将 mainWindow.webContents.openDevTools(); debug模式语句注释掉,否则不生效

再次运行,效果如下

实现可拖拽

透明之后窗口将会变得不可改变位置,这个时候需要指定一个可脱宅的标记 -webkit-app-region

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello World!</title><link rel="stylesheet" href="index.css"></head><body><!-- 增加了-webkit-app-region标记,该元素则会响应鼠标拖拽 --><h1 style="-webkit-app-region: drag;">💖 Hello World!</h1><p>Welcome to your Electron application.</p></body>
</html>

操作文件

操作文件的话用fs组件就行了

const fs = require("fs");
fs.readFile("股票.txt", (err, data1) => {});
fs.writeFile("股票.txt","#说明: sh代表上海,sz代表深证",(err) => {});

需要注意的是需要在index.js中的BrowserWindow对象中增加如下配置才会生效

webPreferences: {nodeIntegration: true
}

再加上我需要时刻保持窗口最前方,所以最终的对象定义如下:

const mainWindow = new BrowserWindow({width: 300,height: 100,transparent: true,frame: false,alwaysOnTop: true,webPreferences: {nodeIntegration: true}})

解析股票接口

股票接口用的新浪的股票接口:

剩下的就和Electron没多大关系了,具体的解析逻辑就不赘述了,可以在文末参考源代码

构建打包

执行yarn make 或 npm make 程序将会打包,会在项目中生成out目录,结构如下

out
|___make #make中存放的setup.exe程序
|___my-app-win32-x64中存放的是解压后的执行程序

个人建议直接运行my-app-win32-x64的主程序因为启动比较快

总结

参考代码: .git

electron文档

用Electron写个小工具耍耍还是可以的,别的还是别想了,毕竟臣妾也做不到~🤣