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

最新推荐文章于 2024-04-23 16:35:40 发布

无聊看风景

最新推荐文章于 2024-04-23 16:35:40 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/u010034154/article/details/107633580

版权

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

听了朋友的一番要求,我陷入了沉思,看来他的工作很不饱和啊~不过朋友的这个要求还是可以实现的,因为最近刚好接触到了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-app

cd 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       
└─src
        index.css
        index.html
        index.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模式语句注释掉,否则不生效

再次运行,效果如下

20200728110701

实现可拖拽

透明之后窗口将会变得不可改变位置,这个时候需要指定一个可脱宅的标记 -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
    }
  })

解析股票接口

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

http://hq.sinajs.cn/list=

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

构建打包

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

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

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

总结

参考代码: https://gitee.com/cookanger/electron_stock_demo.git

electron文档 https://www.electronjs.org/docs

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

无聊看风景

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Electron,打造上班划水摸鱼桌面小工具:“股票监控“软件

最近一个朋友入了股市这个坑,大家都懂的,买了股票你有事没事就想摸出手机看两眼,但是作为一个员工被老板或者领导看到炒股肯定不是什么好事,所以他在公司炒股的时候总感觉不安心,心想如果把数据呈现在电脑桌面某个"隐秘的角落"上,可以放心大胆的盯盘了,在老板眼里他在认真工作,其实他是在划水,岂不美哉~听了朋友的一番要求,我陷入了沉思,看来他的工作很不饱和啊~不过朋友的这个要求还是可以实现的,因为最近刚好接触到了Electron,正好用Electron试试水什么是Electron?Electron是一个能让你使用
复制链接

扫一扫