帶你走入Electron開發(fā)！

前言

Electron是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架。 嵌入 Chromium 和 Node.js 到 二進(jìn)制的 Electron 允許您保持一個(gè) JavaScript 代碼代碼庫并創(chuàng)建 在Windows上運(yùn)行的跨平臺(tái)應(yīng)用 macOS和Linux——不需要本地開發(fā) 經(jīng)驗(yàn)。前端程序員常用的atom 和vscode 就是用electron開發(fā)的。

開機(jī)自啟動(dòng)

electron官方提供的相關(guān)代碼功能，并不需要安裝第三方代碼庫。可能大家在搜帖子的時(shí)候會(huì)看到使用其他方式來實(shí)現(xiàn)，個(gè)人覺得沒必要。直接使用官方提供的即可。

首先獲取可執(zhí)行文件的位置

調(diào)用官方方法。

openAtLogin:ture是開啟自啟動(dòng)，false關(guān)閉自啟動(dòng)

// 獲取可執(zhí)行文件位置 const ex=process.execPath; // 調(diào)用方法 app.setLoginItemSettings({ openAtLogin: true, path: ex, args: [] });

執(zhí)行代碼之后，會(huì)在系統(tǒng)的注冊表中寫入對應(yīng)的數(shù)據(jù)。

運(yùn)行regedit，打開注冊表。依次展開

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run 就可以找到開機(jī)注冊項(xiàng)

單一實(shí)例

單一實(shí)例，就是只能有一個(gè)程序在運(yùn)行。當(dāng)你沒有使用單一實(shí)例的時(shí)候，可以同一時(shí)間開啟多個(gè)程序，不受限制。

同樣的官方也提供了對應(yīng)的方法app.requestSingleInstanceLock()

返回值是true/false,表示正在啟動(dòng)的示例是否成功取得了鎖。 如果它取得鎖失敗，那么說明另一個(gè)應(yīng)用實(shí)例已經(jīng)取得了鎖并且仍舊在運(yùn)行，并立即退出。

示例：

if (!app.requestSingleInstanceLock()) { app.quit() } else { app.on('second-instance', (event, commandLine, workingDirectory) => { // 當(dāng)運(yùn)行第二個(gè)實(shí)例時(shí),將會(huì)聚焦到myWindow這個(gè)窗口 if (win) { if (win.isMinimized()) win.restore() win.focus() } })

打包

在package.json添加electron-builder配置

例如：一鍵安裝 創(chuàng)建桌面圖標(biāo) 創(chuàng)建開始菜單圖標(biāo)等基礎(chǔ)配置

"nsis": { "oneClick": false, // 一鍵安裝 "guid": "xxxx", //注冊表名字，不推薦修改 "perMachine": true, // 是否開啟安裝時(shí)權(quán)限限制（此電腦或當(dāng)前用戶） "allowElevation": true, // 允許請求提升。 如果為false，則用戶必須使用提升的權(quán)限重新啟動(dòng)安裝程序。 "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄 "installerIcon": "./build/icons/aaa.ico", // 安裝圖標(biāo) "uninstallerIcon": "./build/icons/bbb.ico", //卸載圖標(biāo) "installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時(shí)頭部圖標(biāo) "createDesktopShortcut": true, // 創(chuàng)建桌面圖標(biāo) "createStartMenuShortcut": true, // 創(chuàng)建開始菜單圖標(biāo) "shortcutName": "xxxx" // 圖標(biāo)名稱 }

如果你是在Vue項(xiàng)目中，推薦使用vue-cli-plugin-electron-builder，在vue.config.js中配置。

pluginOptions: { electronBuilder: { noAppProtocal: true, customFileProtocol: './', chainWebpackRendererProcess: (config) => { // Chain webpack config for electron renderer process only // The following example will set IS_ELECTRON to true in your app config.plugin('define').tap((args) => { args[0]['IS_ELECTRON'] = true return args }) }, builderOptions: { appId: "", productName: "", files: ["**/*", "static/*"], asar: true, win: { icon: "./src/assets/logo/favicon.ico", target: ["zip", "nsis"], }, publish: [{ provider: "generic", url: "http://localhost:8088/", //這里配置的是安裝包和lastest.yml的服務(wù)器地址 publishAutoUpdate: true, }], nsis: { } } }

升級(jí)更新

方案1：

electron-updater

軟件升級(jí)版本，修改package.json中的version屬性

執(zhí)行electron-builder打包，會(huì)生成新的latest.yml文件和exe文件（MAC：latest-mac.yml,zip和dmg文件）

lectron-updater自動(dòng)會(huì)通過對應(yīng)url下的yml文件檢查更新

方案2：

將安裝包放在服務(wù)器，然后自定義請求下載。

日志記錄

第三方提供的Electron日志記錄，還是蠻多的，個(gè)人比較推薦electron-log(這個(gè)插件也支持任何 node.js 應(yīng)用程序)，使用還是比較簡單的。

npm install electron-log const log = require('electron-log'); log.info('Hello, log'); log.warn('Some problem appears');

log文件存放的位置在：

C:\Users"用戶"\AppData\Roaming’項(xiàng)目’\logs下面。

不過electron-log不支持刪除log,所以需要最好在Electron中寫一個(gè)方法，定時(shí)清理log文件。

搭配vue

不推薦electron-vue,是在是太陳舊了。

建議使用electron-builder

大概的安裝流程

初始化一個(gè)vue項(xiàng)目

vue add electron-builder

取消跨域限制

一般新手開發(fā)的時(shí)候會(huì)遇到這個(gè)問題，無法訪問后臺(tái)，查看各種配置，都正常，卻遲遲無法解決。

webPreferences: { webSecurity: false, }

全局快捷鍵

在 Electron 中, 鍵盤快捷鍵被稱作加速器(Accelerator). 它們可以分配到應(yīng)用程序菜單中的操作上, 也可以全局注冊。注冊全局快捷方式時(shí),請注意不要和全局的快捷鍵沖突。

app.on('ready', function () { globalShortcut.register('CommandOrControl+Alt+A', function () { }) }) app.on('will-quit', function () { globalShortcut.unregisterAll() })

Electron JavaScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。