Project introduction

Log in figure

Interface figure

Original intention of the project:

Internal employees can obtain and solve problems, release the transaction information and consultation problems of renting house and selling second-hand goods, so as to have a clear understanding of the organizational structure and corporate culture of the company

Company administration and personnel, release the company’s rules and regulations and the latest announcement of the enterprise OA platform

What are the interesting features of the Electron project:

  1. Download file to specified directory (1 star)

    Rendering process code / / download attachment downloadFile (val) {const url = ` {val} ` / / http://office.xmhaini.com/api/public/uploads/admin/noticeFile/$  this.$electron.shell.openExternal(url) this.$electron.remote.dialog.showOpenDialog({ properties: ['openDirectory'], // Select folder filters: [{name: 'All', extensions: ['*']}] // filter criteria, default all files}, res => {// callback content, Const downloadAddress = res[0] // Here to communicate with the main process, Will download file address and storage to the main process this. $electron. IpcRenderer. Send (' download ', DownloadAddress +' +' + url)} else {this.$message. Warning (' please select file directory first ')}})} // introduce ipcMain, Const {ipcMain, BrowserWindow, app} = require('electron') ipcmain. on('download', (evt, Split ('+') downloadPath = arr[0] // Local address to store the file const folderPath = arr[1] // Link to the file MainWindow. WebContents. DownloadURL (folderpath)}) / / monitor file download event mainWindow webContents. Session. On (' will - download, (event, item, SetSavePath (downloadPath + '\\${item.getfilename ()}') state) => { if (state === 'completed') { mainWindow.webContents.send('success-down', state) } else { mainWindow.webContents.send('error-down') } }) })Copy the code

  2. Blinking taskbar icon (2 stars) when message notification

    The main implementation idea is to establish a Websocket connection with the server. When receiving a new message notification, it sends a broadcast to the main process. The main process listens to the broadcast and calls the flicker function to render the process code: SemdNotify () {createSocket(this.token) const getDataFunc = e => {const data = e.dail.data.data if  (data === '200') { this.$store.dispatch('GetUnReadNum') this.$electron.ipcRenderer.send('shan-shuo') if (this. SystemSettingObj. SoundChoice) {/ / this new message prompt $refs. Sound. The play ()}}} window. The addEventListener (' onmessageWS ', GetDataFunc)}  ipcMain.on('shan-shuo', Timer = setInterval(function() {count++ if (count % 2 === 0) {count % 2 === 0) { tray.setImage(path.join(__static, 'empty.ico')) } else { tray.setImage(path.join(__static, 'favicon-active.ico')) } currentShan = false }, 500) }})Copy the code

  3. Get the latest version on the server, automatically updated (3 stars)

    The idea is to use the autoUpdater method provided by Electron. First, set the remote server path to store update packets, and then listen for updates in turn. The whole update life cycle includes error listening for errors and checket-for-update listening for different files. Update-available, the update is started, download-progress The update progress, update-downloaded the update is completed, and the update is automatically installed. / / perform automatic update check autoUpdater. CheckForUpdates () / / exit and install updates autoUpdater. QuitAndInstall ()Copy the code

  4. Self-start after startup (1 star)

    Ipcmain. on('openAutoStart', () => {app.setLoginItemSettings({openAtLogin: True, path: ex, args: []})}) // Close ipCmain. on('closeAutoStart', () => {app.setLoginItemSettings({openAtLogin: false, path: ex, args: [] }) })Copy the code

  5. Shortcut call app (1 star)

    import { globalShortcut } from 'electron'

  const ret = globalShortcut.register('ctrl+h+n', function() {    mainWindow.show()  })
Copy the code

  6. Customize top action bar to zoom in and out and close applications (2 stars)

    Maximize: mainwindow.maximize () Minimize: mainwindow.minimize () reduce: Restore () = restore(); restore() = restore(); restore() = restore()  remote.getCurrentWindow().addListener('unmaximize', _ => { this.$nextTick(_ => { this.isMax = false }) })Copy the code

  7. Open external browser to specified url (1 star)

    This $electron. Shell. OpenExternal (linkUrl) / / linkUrl for web addressesCopy the code

  8. Weather forecast (2 stars)

    https://v0.yiketianqi.com/api?version=v9&appid=61281254&appsecret=xXGs7BhV&city=${this.currentCity}&vue=1`
Copy the code

Initialize the project

1. Install the vue/cli – init

CNPM i-g@vue/CLI-init, because electron is currently based on vuE-CLI2.xCopy the code

2. Use create project

Vue init SimulatedGreg/electric-vue my-vue-app // The electric-vue used in this project is a project that combines vue-CLI and electron. It avoids using VUE to manually set up the electron application, which is very convenient.Copy the code

3. After the project is created, the project starts to be written at this time. In the main process, THE API provided by Electron is mainly used to control the window and the connection and logic between the system, such as creating the window, tray, monitoring the server difference file for prompting update, etc. Reneder rendering process is mainly responsible for writing the style structure.

Initialize the project diagram

The directory structure

# Project packaging

  1. The project is packaged for the first time and requires four dependency files, prompting download.

    NRM ls uses NPM to download node_models again, but it still fails to find the file. Include: could not find: **** stdutils. NSH” In summary, dependencies must be downloaded using NPM and the project path must not contain Chinese.

Conclusion:

The function of this project is relatively simple, and basically I can find the function I want to achieve in the document. Generally speaking, I am quite satisfied with my first desktop application, and I have learned a lot of new knowledge, which is not as difficult as I imagined. Moreover, after completion, I feel more fulfilled than the Web project, which may be novel. To open the New World Electron file and address two.