Windows下支持自動(dòng)更新的Electron應(yīng)用腳手架的方法
前言
之前寫(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，一路回車即可 npm i electron --save-dev # 安裝 electron 依賴 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)程是直接與用戶產(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> <h1>Hello World!</h1> </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ì)專注在怎么讓這個(gè)應(yīng)用實(shí)現(xiàn)自動(dòng)更新。
自動(dòng)更新
安裝依賴
自動(dòng)更新功能的實(shí)現(xiàn)依賴 electron-builder 和 electron-updater，所以我們需要先安裝這兩個(gè)依賴。
# 目錄 d/workspace/electron-demo npm i electron-builder --save-dev # 必須安裝為開(kāi)發(fā)依賴，否則打包會(huì)出錯(cuò) npm i electron-updater --save # 必須安裝為運(yùn)行依賴，否則運(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>
<h1>Hello World!</h1>
<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('h1').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í)有所幫助，也希望大家多多支持腳本之家。
- C#開(kāi)發(fā)windows服務(wù)實(shí)現(xiàn)自動(dòng)從FTP服務(wù)器下載文件
- Electron autoUpdater實(shí)現(xiàn)Windows安裝包自動(dòng)更新的方法
- windows長(zhǎng)時(shí)間保持遠(yuǎn)程桌面不被自動(dòng)斷開(kāi)
- 在Windows環(huán)境下使用MySQL:實(shí)現(xiàn)自動(dòng)定時(shí)備份
- windows mysql 自動(dòng)備份的幾種方法匯總
- 在Windows下自動(dòng)備份PostgreSQL的教程
- Windows系統(tǒng)自動(dòng)連接網(wǎng)絡(luò)共享打印機(jī)BAT腳本分享
- windows10徹底關(guān)閉自動(dòng)更新【絕對(duì)可行】
相關(guān)文章
前面已經(jīng)講解了 引用，函數(shù)重載，作用域和上下文，接下來(lái)，講解JavaScript中另一個(gè)重要的知識(shí)——閉包。2009-09-09
談?wù)刯s中的prototype及prototype屬性解釋和常用方法
prototype是javascript中筆記難理解的一部分內(nèi)容，下面通過(guò)幾個(gè)關(guān)鍵知識(shí)點(diǎn)給大家講解js中的prototype，對(duì)js中的prototype相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
微信小程序中實(shí)現(xiàn)埋點(diǎn)的方法示例詳解
在小程序中實(shí)現(xiàn)埋點(diǎn)的基本思路是利用生命周期函數(shù)和事件回調(diào),插入數(shù)據(jù)上報(bào)代碼,下面將介紹如何在小程序中實(shí)現(xiàn)埋點(diǎn),并通過(guò)代碼示例進(jìn)行說(shuō)明,感興趣的朋友一起看看吧2024-04-04
JavaScript程序設(shè)計(jì)之JS調(diào)試
這篇文章主要介紹了JavaScript程序設(shè)計(jì)中的重要環(huán)節(jié)：JS調(diào)試，本文通過(guò)一個(gè)加法器，介紹JS如何調(diào)試，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細(xì)介紹了bootstrap laydate日期組件使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
大家都知道要想讓 JavaScript 對(duì)用戶的操作作出響應(yīng)，首先要對(duì) DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對(duì)應(yīng)不同的名稱。下面這篇文章給大家詳細(xì)介紹了JavaScript中綁定事件的三種方式以及去除綁定的方法，有需要來(lái)一起看看吧。2016-11-11
關(guān)于IE7.8.彈出窗口頂上...2008-12-12
OpenLayers3實(shí)現(xiàn)鼠標(biāo)移動(dòng)顯示坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)鼠標(biāo)移動(dòng)顯示坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧
有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧...2007-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)非常漂亮的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03