How to develop electron desktop program with Vue

1、 Introduction to electron

---

Electron is an open source project jointly maintained by GitHub and many contributors. It uses JavaScript, HTML and CSS to build cross platform desktop applications

1. Features

• Cross platform applications can be packaged into Mac, windows and Linux platforms
• Simplify desktop development (1) electron is based on chromium and Node.js (2) provide electron API and nodejs API
• Active community

2. Compatibility

XP is out of the question, so we may need to use nwjs and other solutions

2、 Project construction

1. Use Vue cli to create Vue project

vue create electron-test
Copy code

2. Install the plug-in Vue cli plugin electronic builder

vue add electron-builder
Copy code

3. Some changes in the project after installing the plug-in

① package.json Several scripts have been added

npm run  electron:serve  electron Development mode
npm run  electron:build   electron pack
Copy code

The purpose of postingstall and postuninstall is to ensure that they always match electron when installing or removing dependencies

② Added background.js file

Main process related operations, written in this file

③ An environment variable has been added

It can be used to judge whether it is in the electronic state

process.env.IS_ELECTRON
Copy code

3、 Development summary

1. Configuration item icon

useelectron-icon-builderTo generate icon in accordance with electron

① Installation

npm install --save-dev electron-icon-builder
Copy code

② package.jsonConfigure build commands in

"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"
Copy code

③ Generate Icon

npm run electron:generate-icons
Copy code

④ Use

import path from 'path'
const win = new BrowserWindow({
  icon: path.join(__static, 'icon.png')
})
Copy code

2. Failed to fetch extension warning appears during project development mode operation

Due to network problems, the development mode cannot download the warning caused by Vue devtool background.js Comment out the download code in

3. The project uses local Vue devtools

① First, you can clone the code of Vue devtools, and then compile it

git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
npm install
npm run build
Copy code

And then putvue-devtools/packages/shell-chromeCopy folder to project root

② Inbackground.jsOf documentsapp.on('ready',Load in the lifecycle

//Using local Vue developer tools
session.defaultSession.loadExtension(path.resolve('shell-chrome'))
Copy code

③ When creating a window, use the following example method to display the Vue developer tool normally

// src/background.js
if (process.env.WEBPACK_DEV_SERVER_URL) {
  await transferWin.loadURL(
    process.env.WEBPACK_DEV_SERVER_URL + '/#/test'
  )
  if (!process.env.IS_TEST) transferWin.webContents.openDevTools()
} else {
  transferWin.loadURL('app://./index.html' + '/#/test')
}
Copy code

4. How to use nodejs API in rendering process

Need to be in vue.config.js Configure nodeintegration to true in

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}
Copy code

Or configure it when you create a window

win = new BrowserWindow({
    width: 500,
    height: 400,
    frame: false,
    transparent: true,
    BackgroundColor: '# 00000000' // when the developer tool is closed, a new rendering view will be created, so the configured background color will be used. If it is not configured, the default value of white will be used
    webPreferences: {
      Nodeintegration: true, // the render layer can use node
      Websecurity: false, // cross domain
      Enableremotemodule: true // remote can be used
    },
    // eslint-disable-next-line no-undef
    icon: path.resolve(__static, 'logo.png')
  })
Copy code

5. Make the created window cross domain

Configure when creating windowswebSecurity: falsethat will do

6. How to monitor the status of the window,Minimize, focus, window hide, window show, window close

//Window minimize trigger
win.on('minimize', () => {
  console.log ('minimize ')
})
win.on('focus', () => {
  console.log ('focus')
})
//The window is hidden and the taskbar has no icon
win.on('hide', () => {
  console.log ('hide ')
})
win.on('show', () => {
  flashTray(false)
  console.log ('show ')
})
Copy code

7. How to create tray icon

let tray = null
function createTray () {
  tray = new Tray( path.resolve (E) static, ‘ logo.png ’））// set tray icon
  const contextMenu = Menu.buildFromTemplate([
     new MenuItem({
      Label: 'exit program',
      click: () => {
        isQuit = true
        app.exit()
      }
    })
  ])
  tray.setContextMenu (ContextMenu) // set the right-click menu
  tray.on ('click ', () = > {// tray click event)
    if (win.isVisible()) {
      win.focus()
    } else {
      win.show()
    }
  })
}
Copy code

Listen to the closing of the main window, if not exit completely,

It just hides the window

win.on('close', e => {
    if (isQuit) {
      win = null
    } else {
      e.preventDefault()
      win.hide()
    }
})
Copy code

8. Tray flashing and taskbar flashing

① The principle of tray flashing is to switch the icon of tray regularly, and to switch the icon and transparent icon

let flashInterval
function flashTray (bool) {
  if (!bool) {
    flashInterval && clearInterval(flashInterval)
    tray.setImage(path.resolve(__static, 'logo.png'))
    return
  }
  flashInterval && clearInterval(flashInterval)
  var count = 0
  flashInterval = setInterval(function() {
    if (count++ % 2 == 0) {
      tray.setImage(path.resolve(__static, 'empty.png'))
    } else {
      tray.setImage(path.resolve(__static, 'logo.png'))
    }
  }, 400)
}
Copy code

② Blink of taskbar

win.flashFrame (true) // highlight
Copy code

9. How to run only a single instance

If your application is the primary instance of the application and app.requestSingleInstanceLock When () returns true, you should keep your program running. If it returns false,

Then exit immediately

const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} {
  app.on('second-instance', (event, argv) => {
    if (process.platform === 'win32') {
      if (win) {
        if (win.isMinimized()) {
          win.restore()
        }
        if (win.isVisible()) {
          win.focus()
        } else {
          win.show()
        }
      }     }
  })
}
Copy code

10. How does the main process communicate with the rendering process

Reference documents:

ipcMain ipcRenderer

① Rendering process

const {ipcRenderer} = require('electron')
ipcRenderer.send ('message ','ping') // send to main process
ipcRenderer.on('message-reply', (event, arg) => {
  console.log(arg) // pong
}
Copy code

②

Main process

//Monitor rendering process information
ipcMain.on('message', (event, arg) => {
  console.log('ping')
  event.sender.send ('message reply ','pong') // reply subroutine
})
//The main process sends messages to the rendering process separately
win.webContents.send('message-reply', 'pong')
Copy code

11. Packing problem

Using NSIS to package the installation package of windows program vue.config.js Configuration packaging in

to configure

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        win: {
          target: [{ target: 'nsis', arch: ['ia32', 'x64'] }]
        },
        nsis: {
          Oneclick: false, // one click installation
          Permachine: true, // install for all users
          Allowlevelation: true, // permission elevation is allowed. If you set "false", you need to re allow the installation of the program
          Allowtochangeinstallationdirectory: true, // allows you to change the installation directory
          Create desktop shortcut: true, // create desktop icon
          Create start menu shortcut: true, // create start menu
          deleteAppDataOnUninstall: true,
          include: './public/nsis/ installer.nsh '// scripts included
          GUI: '53fe4cba-120d-4851-3cdc-dccb3a469019' // software GUI
        }
      }
    }
  }
}
Copy code

12. Open program from web page

① Master process registration

app.removeAsDefaultProtocolClient(‘testapp’)
app.setAsDefaultProtocolClient(‘testapp’)
Copy code

② Packaging configuration files in NSIS（ installer.nsh ）Add configuration in the registry to register URL protocol during installation

!macro customInstall
  DetailPrint 'Register testapp URI Handler'
  DeleteRegKey HKCR 'testapp'
  WriteRegStr HKCR 'testapp' '' 'URL:testapp'
  WriteRegStr HKCR 'testapp' 'URL Protocol' ''
  WriteRegStr HKCR 'testappshell' '' ''
  WriteRegStr HKCR 'testappshellOpen' '' ''
  WriteRegStr HKCR 'testappshellOpencommand' '' '$INSTDIR${APP_EXECUTABLE_FILENAME} %1'
!macroend
Copy code

③ Directly accessing the link in the browser will trigger the opening of the client testapp: / /? Parameter = value

④ Get the parameters from the web page

//When the web page call application is executed in the windows system, the parameters passed in by the protocol are processed
const handleArgvFromWeb = (argv) => {
  console.log(argv)
  const url = argv.find(v => v.indexOf(`${URLSCHEME}://`) !== -1)
  console.log(url)
  if (url) handleUrlFromWeb(url)
}
//To process the "URL" parameter from the web page, parameter customization, the following is an example
//The URL of the example application is testapp: //? Token = 205bdf49hc97ch4146h8124h8281a81fdcdb
const handleUrlFromWeb = (urlStr) => {
  console.log(urlStr)
  const urlObj = new URL(urlStr)
  const { searchParams } = urlObj
  const token = searchParams.get('token')
  console.log(token)
}
Copy code

As you can see, the obtained parameter is an array, so we need to obtain the last item

In production mode, if the software is not opened in advance, the parameters need to be obtained according to the following figure when opening through the web page

If it is turned on ahead of time, it is obtained in the condition judgment of the judgment singleton

13. Slow download of electronic package during installation or packaging

Create. Npmrc file from root directory

registry = https://registry.npm.taobao.org
 
sass_binary_site = https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl = http://cnpmjs.org/downloads
electron_mirror = https://npm.taobao.org/mirrors/electron/
sqlite3_binary_host_mirror = https://foxgis.oss-cn-shanghai.aliyuncs.com/
profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/
chromedriver_cdnurl = https://cdn.npm.taobao.org/dist/chromedriver
Copy code

14. Open the link through the external browser

const { shell } = require('electron')
shell.openExternal('https://www.bing.com')
Copy code

15. Development mode if you want to close a window after opening a developer tool, you need to close the developer tool first to close the window normally

Before closing the window, judge whether the developer tool is open. If it is, close the developer tool first. For example

if (callWin.isDevToolsOpened()) {
  callWin.closeDevTools()
}
Copy code

16. Transparent borderless window, black border will appear when touching the screen edge

The main thing is to add delay when creating a window

When,

setTimeout(() => createWindow(), 400)
Copy code

Then turn off hardware acceleration

app.disableHardwareAcceleration()
app.commandLine.appendSwitch('disable-gpu')
app.commandLine.appendSwitch('disable-software-rasterizer')
Copy code

17. Transparent borderless window. When the developer tool is closed, the background will turn white

When the developer tool is closed, a new rendering view will be created again, so the configured background color will be used. If it is not configured, the default value of white will be used, so it needs to be set when the window is createdbackgroundColorProperty is#00000000

18. The rendering process obtains the environment variables of the main process

const { remote } = require('electron')
const envData = remote.getGlobal('process').env
Copy code

19. When packing, the ASAR file is occupied

Vscode can be used again setting.json Ignore dist in configuration_ Electronic folder

"files.exclude": {
  "dist_electron": true,
}
Copy code

20. Software update

useelectron-updater

① Configurationvue.config.jsSettingspublishAfter configuring this configuration, alatest.ymlFile, you need to put it and the installation package in the same directory of the serverurlIt is configured that the server can access the URL of this directory, or use theautoUpdater.setFeedURL(url)Dynamic configuration URL

pluginOptions: {
  electronBuilder: {
    builderOptions: {
      publish: [
        {
          provider: 'generic',
          url: 'http://127.0.0.1:5000'
        }
      ]
    }
  }
}
Copy code

21. Electronic win7

① Win7 SP1 or win8 needed install kb401990 patch to resolve this issue for now (Note: none SP1 win7 needed to upgrade to SP1 before install the patch)

② Upgrade.net

③ Turn off hardware acceleration

22. 7z decompression ASAR plug in

At present, I use the ASAR command line to unzip, but I can unzip the plug-in completely with the 7z plug-inhttps://www.tc4shell.com/en/7…

Download and copy the DLL to 7z installation directory to create a new oneFormatsFolder