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=https://www.npmjs.org
registry=https://registry.npmjs.org/
loglevel=http
#增加ELECTRON_MIRROR
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
然后执行
npm install -g electron
或者你可以直接以下命令执行直接安装
#如果CMD中报错,可以在git bash中执行
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ 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 https://yarnpkg.com/install.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.com"},"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;">
Electron,打造上班划水摸鱼桌面小工具:“股票监控“软件相关推荐
- idea中摸鱼插件_上班防摸鱼插件（知乎页面）
前言 最近突发奇想,写了一个js插件,用来防止上班摸鱼,插件仅知乎页面有效,别做的太绝... 启动该插件后,打开知乎页面,标题会改成 "摸鱼中..." ,背景被替换成咸鱼.每隔一分 ...
- 划水摸鱼的时候写一篇自己是怎么划水摸鱼的
划水摸鱼的时候写一篇自己是怎么划水摸鱼的 划水摸鱼这种事情,实在是我等打工人的必备技能.往好了说,我们这是劳逸结合,既有助于我们的身心健康,使我们心情愉悦.往坏了说,咱们这是在剥削资本家(好家伙!!! ...
- 上班防摸鱼插件（知乎页面）
前言 最近突发奇想,写了一个js插件,用来防止上班摸鱼,插件仅知乎页面有效,别做的太绝... 启动该插件后,打开知乎页面,标题会改成 "摸鱼中..." ,背景被替换成咸鱼.每隔一分 ...
- win7倒计时桌面小工具_iOS 14系统面板截图曝光，新增桌面小工具，越来越像安卓了...
商务合作请联系QQ:710035765 大家好,我是波老师.随着iOS 14越来越多的爆料,波老师预测距离iOS 14测试版的发布也要越来越近了.近日,有博主在Twitter上曝出了iOS 14墙纸设 ...
- 在计算机桌面上添加小工具日历,实用桌面小工具时钟日历在win7中的添加方法...
我们在win7系统的使用中,小伙伴们都是知道的系统可以直接选择安装不同的小工具在电脑中使用,比如电脑中的时钟日历等都是可以直接安装在桌面来使用的牡丹石有小伙伴对于时钟日历不知道是在哪里添加到桌面的,对 ...
- MooTool 1.0.0 发布，开发者常备桌面小工具
MooTool 1.0.0 已发布,开发者常备桌面小工具. MooTool A handy desktop toolset for developers. 开发者常备桌面小工具 支持的功能 Host切 ...
- python制作一个桌面小工具
python实现一个桌面小工具,制作一个桌面的便签提醒工具 参考代码:https://github.com/cosven/memo 参考链接:https://www.jb51.net/article/ ...
- 快捷键调出计算机桌面小工具,工具推荐:巧用快捷键秒变电脑高手
- 前言 - 最近迷上了新剧<西部世界>,美国西部丶科幻丶人工智能丶完美结合,大爱,这次的图就用剧照啦,回归正题. 如果电脑是你工作的主要方式,那么熟练使用键盘快捷键可以帮助提高工作效率, ...
- 如何在计算机桌面上添加小工具,怎么在电脑的桌面小工具里添加便签
原标题:怎么在电脑的桌面小工具里添加便签 用便签小工具记事,是很多用电脑用户的常规操作.有的人找不到电脑便签,打开电脑开始菜单栏一看,记事工具居然只有记事本. 用记事本很多人不愿意,毕竟记事本比较适合 ...
最新文章
- SSH整合框架+mysql简单的实现
- 技能UP:SAP CO掌上配置手册
- 一直在构建工作空间_基于用户场景构建的建筑工程弱电设计工作设想
- 最优化理论与方法(part4)--秩一校正
- centos 安装jdk_centos7配置jdk
- Sentinel服务熔断配置exceptionsToIgnore_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0053
- android sp缓存,Android sharedPreference设置缓存时间
- 2015 年 5 月软考网络工程师真题与参考答案
- python设置多级标题_Mac Office Word设置多级标题
- 某高校校园网的规划与设计（课程设计）
- html table 斜线表头,Table表格加斜线表头
- 使用node批量压缩图片
- BTC投资者损失预计达73亿美元 “割肉式”抛售来袭？加密寒冬比预期更冷、更长
- 关于用C#实现宽带的连接
- 基于Pytorch实现GAT（图注意力网络）
- 谷粒商城-商城业务-检索服务
- 3个结点的树和有3个结点的二叉树的所有不同的形态
- Python之从左到右依次输出数字上每位的数
- 六行python代码的爱心曲线_6行python代码的爱心线
- axure原型：APP版高保真聊天对话界面（中继器导入即可）
热门文章