When wechat starts, a wechat startup icon will be automatically added to the system tray

1. Place desktop applications in the system tray

inElectron /Tray official documentIn the

/ / electron index. In js. import { app, BrowserWindow, ipcMain, Menu, Tray, nativeImage }from 'electron'. let tray =null
app.on('ready', () => {
  tray = new Tray('/path/to/my/icon')  / / pit (1)
  // Right-click the menu
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'WeChat'.role: 'redo'.click: (a)= > {
        if (win) {
          win.show()
        }
      }
    },
    { label: 'Exit wechat'.role: 'quit' }
  ])
  tray.setToolTip('WeChat')
  tray.setContextMenu(contextMenu)
  tray.on('click', (event,bounds,position) => {  // Listen for click done
    console.log(event,bounds,position)
    if (win.isVisible()) {
      win.hide()
    } else {
      win.show()
    }
  })
})
Copy the code

2. Right-click the menu

referenceElectron /Menu official document

// There are many options in the menu role attribute that can have the following values: undo: undo redo: redo cut: Cut copy paste and match style selectAll delete minimize the current window. Close - Close the current window quit - Exit the current application reload - reload the current window Forcereload - Reloads the current window, ignoring the cache. Toggledevtools - Hides/shows developer tools in the current window. ToggleFullScreen - Toggle full screen mode on the current window. Resetzoom - Resets the zoom level of the home page to its initial size. FileMenu - Whole default "File" menu (Close/Quit) editMenu- Default "edit" menu (including undo, copy, etc.) viewmenu-whole  default "View" menu (Reload, Toggle Developer Tools, etc.) windowMenu - Whole default "Window" menu (Minimize, Zoom, etc.).Copy the code

3. Messages flash

When wechat receives a message, the desktop application flashes, accompanied by an audio prompt

Push an unread new message flashing, its principle is different time icon switch.

// Desktop application message flashing
app.on('ready', () = > {let timer = null
  let count = 0.// Here is the code to put the desktop application in the system tray.// Render thread notifies that there is a new message
  ipcMain.on('haveMessage', (event,arg) => {
    timer = setInterval((a)= > {
      count += 1
      if (count % 2= = =0) {
        tray.setImage(icon)
      } else {
        tray.setImage(nativeImage.createEmpty()) // Create an empty nativeImage instance
      }
      tray.setToolTip('You have a new message')},500)
  })
  tray.on('click', () = > {if (win.isVisible()) {
      win.hide()
    } else {
      win.show()
      tray.setImage(icon)
      tray.setToolTip(Private School International Institution)
      clearInterval(timer)
      timer = null
      count = 0}})})Copy the code

Voice prompt

If the peer party sends an unread message, the user is prompted to make a beep sound 🔊…… When Audio stops (using HTML5 Audio) depends on your definition of the user.

<script> exports default { methods: {{haveMessage (). This $electron. IpcRenderer. Send (' haveMessage ') / / here you can put a short sound file const audio = new Audio('/path/to/my/audio') audio.play() }, } } </script>Copy the code

4. Pit ！！！！！

  • A pit point

The official documentation says tray = new tray (‘/path/to/my/icon’), and when we happily put the path into the new tray (), yarn dev, let the code run for a while….. Found ε=(´ο ‘*))) I did, didn’t I? Why is it gone?

Dig through official documents and see a good thing

new Tray(image)

​ image (NativeImage | String)

Creates a new taskbar icon associated with image.

Tray = new tray (nativeImage(‘/path/to/my/icon’)); Yarn dev, let the code run for a while….. Okay, okay, there’s the system icon

  • Pit point 2

After writing the program, try the result of packaging, YARN build, let the code run for a while……. Install, run, find ε=(´ο ‘*))) I did, didn’t I? Why is it gone? The dev environment is up and running.

Source code analysis, shouldn’t the header be in the Render folder? Is the header picture format incorrect? A chaotic operation, the results found, how or no?

Asar analysis, is the header not packed in?

$ yarn global add asar
$ asar e app.asar test
Copy the code

Another messy operation, found the header packed in!!

Path analysis, is the path written wrong? But it works in dev!! Check path: Path is wrong!!

Modify the code

const iconUrl = process.env.NODE_ENV === 'development' ? path.join(__dirname, '.. /.. /static/favicon.ico') : path.join(__dirname, 'static/favicon.ico')

const icon = nativeImage.createFromPath(iconUrl)
Copy the code

Yarn build, let the code run for a while……. , install, run, finally see the header ！！！！