用摸鱼时间开发的桌面应用，实时监控掘金数据！

前端

2023-11-03 11:36:10

摸鱼搞了个掘金数据监控桌面应用，还不快用起来！

引言

摸鱼摸久了，难免会心生愧疚，但如果摸鱼也能创造价值，那岂不是两全其美？

最近，我发现了一个开源项目，它可以让任何人轻松开发Electron桌面应用。抱着试试看的想法，我在半夜摸鱼时间里，开发了一个掘金数据监控插件。

Electron简介

Electron是一个强大的开源框架，它允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用。这意味着，我们可以在Windows、Mac和Linux上运行相同的代码。

开发步骤

安装Electron

npm install -g electron

创建项目

electron init my-app

安装依赖

cd my-app
npm install --save electron-rebuild
npm install --save request

编写主进程代码

const { app, BrowserWindow, Menu, Tray, globalShortcut } = require('electron')

let win
let tray

const createWindow = () => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  win.on('closed', () => {
    win = null
  })
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })

  tray = new Tray('icon.png')
  tray.setToolTip('掘金数据监控')
  tray.on('click', () => win.isVisible() ? win.hide() : win.show())

  globalShortcut.register('Ctrl+Alt+J', () => win.isVisible() ? win.hide() : win.show())
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

编写渲染进程代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <h1>掘金数据监控</h1>
  <div id="data"></div>

  <script>
    const request = require('request')

    window.onload = function() {
      request('https://掘金数据接口', (error, response, body) => {
        if (!error && response.statusCode == 200) {
          const data = JSON.parse(body)
          document.getElementById('data').innerHTML = data
        }
      })
    }
  </script>
</body>
</html>