One, foreword
-
Both Nw.js and Electron can use front-end knowledge to develop desktop applications. Nw.js and Electron were originally developed by the same author. Later various reasons are divided into two products. One was named Nw. js(Intel) and the other was named Electron(Github).
-
Nw. js and Electron can use almost any module in Nodejs. Nw. js and Electron can not only package HTML-written Web pages into cross-platform software that can be installed on a computer, You can also access the operating system’s native UI and apis (control Windows, add menu items, tray application menus, read and write files, and access the clipboard) through javascript.
1.1 Who developed Electron?
Electron was developed by Github
1.2 What is Electron?
Electron is an open source library for building cross-platform desktop applications using HTML, CSS, and JavaScript
1.3 What does Electron do to build a cross-platform desktop application from a combination of HTML, CSS, and JavaScript?
Electron does this by merging Chromium and Node.js into the same runtime environment and packaging it as an application for Mac, Windows, and Linux.
Second, the electron – vue
As a front end, there are a lot of things to learn. So use electron- Vue directly here to build the desktop application.
Electron -vue Chinese document
Electron – vue making address
Electron – Vue environment construction, project creation
Yarn is recommended here, and why? That’s what the website recommends. It is also fast to install dependencies
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn
yarn run dev
Copy the codeElectron – Vue hide top menu hidden
Hide top menu in electron-vue Hides top maximize, Minimize, close buttons Customize maximize, minimize, and Close buttons
Hide the top menu in electron-vue
// src/main/index.js
mainWindow.setMenu(null)
Copy the codeHide the off maximize and minimize button in electron-vue
// src/main/index.js
mainWindow = new BrowserWindow({
height: 620,
useContentSize: true,
width: 1280,
frame: false/* Remove top navigation remove close button maximize minimize button */})Copy the codeElectron -vue custom Off/maximize minimize button
// Note that under MAC, there is no need to monitor window Max/min, as the system default support, this is only for Windows platform IPC. On ('window-min'.function() { mainWindow.minimize(); }) // Maximize the login window ipc.on('window-max'.function() {if (mainWindow.isMaximized()) {
mainWindow.restore();
} else {
mainWindow.maximize();
}
})
ipc.on('window-close'.function() {
mainWindow.close();
})
Copy the codeElectron -vue custom navigation drag-and-drop
- Draggable CSS: -webkit-app-region: drag;
- Undraggable CSS: -webkit-app-region: no-drag;
Electron -update implements manual/automatic update
Without further ado, get straight to the code…
// package.json
"build": {..."publish": {
"provider": "generic"// Use your own file server"url": "http:..."// Address of the file server}... }Copy the codeThe file server is built using the technology stack according to your actual situation. I use Nginx to build a file server, the specific code will not be posted out, relatively simple
// src/main/index.js
'use strict'
import { app, BrowserWindow, ipcMain, globalShortcut } from 'electron'
import { autoUpdater } from 'electron-updater'
const uploadUrl = 'File server address'
/* * Set `__static` path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html */
if(process.env.NODE_ENV ! = ='development') {
global.__static = require('path').join(__dirname, '/static').replace(/\\/g.'\ \ \ \')}let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
// Check for updates when you want to check for updates, and write your own actions after the renderer event is triggered
function updateHandle () {
let message = {
error: { status: - 1.message: 'Check update error' },
checking: { status: 1.message: 'Checking for updates... ' },
updateAva: { status: 2.message: 'New version detected, downloading... ' },
updateNotAva: { status: 3.message: 'This is the latest version, no need to update'}}// const os = require('os')
autoUpdater.setFeedURL(uploadUrl)
autoUpdater.on('error'.function () {
sendUpdateMessage(message.error)
})
autoUpdater.on('checking-for-update'.function () {
sendUpdateMessage(message.checking)
})
autoUpdater.on('update-available'.function (info) {
sendUpdateMessage(message.updateAva)
})
autoUpdater.on('update-not-available'.function (info) {
sendUpdateMessage(message.updateNotAva)
})
// Update the download progress event
autoUpdater.on('download-progress'.function (progressObj) {
mainWindow.webContents.send('downloadProgress', progressObj)
})
autoUpdater.on('update-downloaded'.function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
// ipcMain.on('isUpdateNow', (e, arg) => {
// console.log(arguments)
// console.log(' Update started ')
// some code here to handle event
autoUpdater.quitAndInstall()
// })
// mainWindow.webContents.send('isUpdateNow')
})
autoUpdater.checkForUpdates()
}
ipcMain.on('checkForUpdate', () => {
updateHandle()
// Perform automatic update checks
})
// Send an event to the renderer via main to prompt the renderer to update
function sendUpdateMessage (text) {
mainWindow.webContents.send('message', text)
}
function createWindow () {
/** * Initial window options */
mainWindow = new BrowserWindow({
height: 363.useContentSize: true.width: 600
})
mainWindow.loadURL(winURL)
// let update = new Update(mainWindow)
mainWindow.on('closed', () => {
mainWindow = null
})
mainWindow.setMenu(null)
// updateHandle()
/ / debugging
globalShortcut.register('CTRL+SHIFT+I'.function () {
mainWindow.webContents.openDevTools()
})
}
app.on('ready'.async () => {
createWindow()
})
app.on('window-all-closed', () = > {if(process.platform ! = ='darwin') {
app.quit()
}
})
app.on('activate', () = > {if (mainWindow === null) {
createWindow()
}
})
Copy the codeThe view layer
Here we use element-UI and choose the UI framework for your situation
// components/update
<template>
<div class="com-update">
<el-row type="flex" justify="end">
<el-col :span="1" :xs="3" :md="2" :lg="1">
<el-tag @click="showUpdater" size="mini" type="info" effect="plain"> check version < / el - tag > < / el - col > < / el - row > < el - dialog title ="Update, please wait..."
:visible="showDialog"
width="30%"
center
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
>
<el-row type="flex" justify="center">
<el-col :span="11">
<el-progress type="circle" :percentage="process"></el-progress>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import { ipcRenderer } from 'electron'
export default {
name: 'update'.data() {
return {
loading: ' ',
status: null,
message: ' ',
showDialog: false,
process: 0
}
},
watch: {
status() {
let status = this.status
if (status === -1) {
this.$message({
type: 'error',
center: true,
message: `${this.message}`})}else if (status === 1) {
this.$message.closeAll()
this.$message({
type: 'info',
center: true,
message: `${this.message}`,
iconClass: 'el-icon-loading'})}else if (status === 2) {
this.showDialog = true
this.$message.closeAll()
this.$message({
type: 'success',
center: true,
message: `${this.message}`,
iconClass: 'el-icon-loading'})}else if (status === 3) {
this.$message.closeAll()
this.$message({
type: 'success',
center: true,
message: `${this.message}`})}if(status ! == 2) { this.showDialog =false
}
}
},
methods: {
showUpdater() {
this.showUpdate = true
ipcRenderer.send('checkForUpdate')}},mounted() {
ipcRenderer.on('message', (event, obj) => {
console.log('obj', obj) this.status = obj.status this.message = obj.message}) The 'downloadProgress' event may not trigger, just limit the download speed.'downloadProgress', (event, progressObj) => {
console.log('progressObj', progressObj)
console.log('progressObj.percent', progressObj.percent)
this.process = progressObj.percent || 0
if (this.process === 100) {
this.showDialog = false
}
})
// ipcRenderer.on('isUpdateNow', () => {
// ipcRenderer.send('isUpdateNow') / /})},destroyed() {
ipcRenderer.removeAllListeners(['message'.'downloadProgress'.'isUpdateNow'])
}
}
</script>
Copy the codeContinuously updated…
Sharing is not easy, like words must not forget to point 💖!!
Pay attention to not point 💖 only is play hooligan, collect only also not point 💖 also is play hooligan.
End 👍 👍 👍.
reference
Electron builds cross-platform applications for Mac/Windows/Linux