您好,登錄后才能下訂單哦!
前言
之前寫(xiě)過(guò)一篇關(guān)于 Windows 下通過(guò) Electron 自帶的 autoUpdater 實(shí)現(xiàn)應(yīng)用自動(dòng)更新的文章,很多小伙伴私信問(wèn)我要具體實(shí)現(xiàn)代碼,不過(guò)因?yàn)橹耙恢焙苊Γㄟ€有懶...)。
這兩周正好周末比較空,除了在 github 上搭建了一個(gè)腳手架,還順便把實(shí)現(xiàn)優(yōu)化了一波,下面將會(huì)帶著大家從零開(kāi)始詳細(xì)介紹實(shí)現(xiàn)過(guò)程,對(duì)小白也很友好的教程哦。
從零開(kāi)始
進(jìn)入你的工作目錄,比如 d/workspace
# 目錄 d/workspace mkdir electron-demo # 新建文件夾 electron-demo cd electron-demo # 進(jìn)入文件夾 electron-demo npm init # 初始化 npm,一路回車(chē)即可 npm i electron --save-dev # 安裝 electron 依賴(lài) touch main.js # 新建文件 main.js touch index.html # 新建文件 index.html
現(xiàn)在你的文件結(jié)構(gòu)如下:
|- electron-demo |- main.js # 空文件 |- index.html # 空文件 |- package.json |- package-lock.json # npm 自動(dòng)生成的文件 |- node_modules
確保 package.json 的name,version,description這三個(gè)字段都不為空,main 字段的取值為 main.js 。
{ "name": "electron-demo", "version": "0.0.1", "description": "electron-demo", "main": "main.js" }
主進(jìn)程和渲染進(jìn)程
Electron 應(yīng)用分為主進(jìn)程和渲染進(jìn)程。渲染進(jìn)程是直接與用戶(hù)產(chǎn)生交互的進(jìn)程,也就是我們看到的一個(gè)個(gè)窗口頁(yè)面,而主進(jìn)程主要負(fù)責(zé)控制應(yīng)用的生命周期,負(fù)責(zé)各個(gè)渲染進(jìn)程的通信等。
我們的主進(jìn)程代碼寫(xiě)在 main.js 中,所以首先在你心愛(ài)的代碼編輯中打開(kāi) main.js,輸入如下代碼:
const path = require('path'); const url = require('url'); const { app, BrowserWindow } = require('electron'); app.on('ready', () => { let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { devTools: true } }); win.loadURL( url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true }) ); }); app.on('window-all-closed', () => app.quit());
再打開(kāi) index.html,輸入如下代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h2>Hello World!</h2> </body> </html>
之后執(zhí)行
# 目錄 d/workspace/electron-demo node_modules/.bin/electron .
不出意外的話你會(huì)看到一個(gè)彈出框,像這樣:
我們也可以把 node_modules/.bin/electron . 保存成 npm 腳本,方便以后調(diào)用。打開(kāi) package.json,添加如下內(nèi)容:
"scripts": { "start": "electron ." }
以后只需要調(diào)用 npm start 即可。
到這里,我們已經(jīng)有了一個(gè)最簡(jiǎn)單的 Electron 應(yīng)用,如果你對(duì)繼續(xù)開(kāi)發(fā)應(yīng)用本身更感興趣的話,請(qǐng)移步Electron 官方文檔,因?yàn)榻酉聛?lái)我們會(huì)專(zhuān)注在怎么讓這個(gè)應(yīng)用實(shí)現(xiàn)自動(dòng)更新。
自動(dòng)更新
安裝依賴(lài)
自動(dòng)更新功能的實(shí)現(xiàn)依賴(lài) electron-builder 和 electron-updater,所以我們需要先安裝這兩個(gè)依賴(lài)。
# 目錄 d/workspace/electron-demo npm i electron-builder --save-dev # 必須安裝為開(kāi)發(fā)依賴(lài),否則打包會(huì)出錯(cuò) npm i electron-updater --save # 必須安裝為運(yùn)行依賴(lài),否則運(yùn)行會(huì)出錯(cuò)
配置 package.json
為了配合打包 package.json 需要新增字段 build:
"build": { "appId": "com.xxx.app", "publish": [ { "provider": "generic", "url": "http://127.0.0.1:8080" } ] },
同樣為了執(zhí)行方便,我們需要添加一個(gè) npm 腳本,打開(kāi) package.json,添加如下內(nèi)容:
"scripts": { "start": "electron .", "build": "electron-builder -w" }
以后只需要調(diào)用 npm run build
即可。
主進(jìn)程和渲染進(jìn)程
打開(kāi)main.js,編輯后內(nèi)容如下:
const path = require('path'); const url = require('url'); const { app, BrowserWindow, ipcMain } = require('electron'); const { autoUpdater } = require('electron-updater'); const feedUrl = `http://127.0.0.1:8080/${process.platform}`; let webContents; let createWindow = () => { let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { devTools: true } }); webContents = win.webContents; win.loadURL( url.format({ pathname: path.join(__dirname, 'src/index.html'), protocol: 'file:', slashes: true }) ); webContents.openDevTools(); }; let sendUpdateMessage = (message, data) => { webContents.send('message', { message, data }); }; let checkForUpdates = () => { autoUpdater.setFeedURL(feedUrl); autoUpdater.on('error', function (message) { sendUpdateMessage('error', message) }); autoUpdater.on('checking-for-update', function (message) { sendUpdateMessage('checking-for-update', message) }); autoUpdater.on('update-available', function (message) { sendUpdateMessage('update-available', message) }); autoUpdater.on('update-not-available', function (message) { sendUpdateMessage('update-not-available', message) }); // 更新下載進(jìn)度事件 autoUpdater.on('download-progress', function (progressObj) { sendUpdateMessage('downloadProgress', progressObj) }) autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { ipcMain.on('updateNow', (e, arg) => { //some code here to handle event autoUpdater.quitAndInstall(); }) sendUpdateMessage('isUpdateNow'); }); //執(zhí)行自動(dòng)更新檢查 autoUpdater.checkForUpdates(); }; app.on('ready', () => { createWindow(); setTimeout(checkForUpdates, 1000); }); app.on('window-all-closed', () => app.quit());
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h2>Hello World!</h2> <script> const { ipcRenderer } = require('electron'); ipcRenderer.on('message', (event, { message, data }) => { console.log(message, data); switch (message) { case 'isUpdateNow': if (confirm('現(xiàn)在更新?')) { ipcRenderer.send('updateNow'); } break; default: document.querySelector('h2').innerHTML = message; break; } }); </script> </body> </html>
打包
npm run build
第一次運(yùn)行會(huì)比較慢,運(yùn)行結(jié)束后會(huì)在當(dāng)前目錄下新增一個(gè) dist 文件夾,dist 的目錄結(jié)構(gòu)如下:
|- dist |- win-unpacked |- electron-autoupdate-scaffold Setup.exe |- electron-autoupdate-scaffold Setup.exe.blockmap |- electron-builder-effective-config.yaml |- latest.yml
win-unpacked 下是可執(zhí)行文件,但是先別著急運(yùn)行,我們還缺一個(gè)后臺(tái)。
自動(dòng)更新后臺(tái)
聰明的你一定注意到,前面代碼中我們有一個(gè):
const feedUrl = `http://127.0.0.1:8080/${process.platform}`;
所以我們現(xiàn)在要做的就是一個(gè)可以接受這個(gè)請(qǐng)求的服務(wù)。
回到你的工作目錄(d/workspace)
# 目錄 d/workspace mkdir electron-server cd electron-server npm init npm i koa --save npm i koa-static --save touch server.js
打開(kāi) server.js,輸入如下內(nèi)容:
// server.js let Koa = require('koa'); let app = new Koa(); let path = require('path'); app.use(require('koa-static')(path.resolve(__dirname + '/packages'))); let server = app.listen(8080, () => { let { address, port } = server.address(); console.log("應(yīng)用實(shí)例,訪問(wèn)地址為 http://%s:%s", address, port); });
將之前打包出來(lái)的 dist 目錄下的 4 個(gè)文件(除了 win-unpacked)拷貝到這邊的 packages/win32 下(新建目錄 packages/win32),之后
# 目錄 d/workspace/electron-server npm start
到此為止,我們的自動(dòng)更新服務(wù)就搭建完成了,現(xiàn)在來(lái)一波測(cè)試吧。
測(cè)試
進(jìn)入 electron-demo/dist/win-unpacked 找到可執(zhí)行文件,雙擊運(yùn)行,看到打開(kāi)窗口的控制臺(tái)中依次輸出:
checking-for-update update-not-available
進(jìn)入 electron-demo,打開(kāi) package.json,把版本號(hào)改為0.0.2,重新打包后拷貝打包文件到自動(dòng)更新后臺(tái)目錄(d/workspace/electron-server/packages/win32)。
進(jìn)入 electron-demo,打開(kāi) package.json,把版本號(hào)改為0.0.1,重新打包后再次進(jìn)入 dist/win-unpacked 目錄,運(yùn)行 exe,看到打開(kāi)窗口的控制臺(tái)中依次輸出:
checking-for-update update-available
并且出現(xiàn)彈窗提示「現(xiàn)在更新?」。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。