Electron指南3——Main Process API

首頁>技術>千鋒IT小助手2020-08-28 17:25

Electron指南3——Main Process API

Main Process API

Electron API （Electron API 有三種）Main Process （主進程序）Renderer Process（渲染程序）Share Modules（共享模組）

App事件ready:

當 Electron 完成初始化時被觸發。

兩種使用方法

app.on(&#39;ready&#39;, createWindow)app.on(&#39;ready&#39;, () =&gt; { console.log(&#39;App is ready!&#39;) createWindow()})

檢查應用是否登入：app.isReady()如果應用沒有Ready，app.isReady()的值為 false

console.log(&#39;應用是否登入：&#39; + app.isReady())

此時應用應該已經Ready

setTimeout(() =&gt; { console.log(&#39;應用是否登入：&#39; + app.isReady())}, 2000)

before-quit

在應用程式開始關閉視窗之前觸發。

app.on(&#39;before-quit&#39;, (e) =&gt; { console.log(&#39;App is quiting&#39;) e.preventDefault()})

browser-window-blur

在 browserWindow 失去焦點時發出

app.on(&#39;browser-window-blur&#39;, (e) =&gt; { console.log(&#39;App unfocused&#39;)})

browser-window-focus

在 browserWindow 獲得焦點時發出

app.on(&#39;browser-window-focus&#39;, (e) =&gt; { console.log(&#39;App focused&#39;)})

方法app.quit()

app.on(&#39;browser-window-blur&#39;, (e) =&gt; { setTimeout(() =&gt; { app.quit() }, 3000)})app.on(&#39;browser-window-blur&#39;, (e) =&gt; { setTimeout(app.quit, 3000)})

app.getPath(name)

app.on(&#39;ready&#39;, () =&gt; { console.log(app.getPath(&#39;desktop&#39;)) console.log(app.getPath(&#39;music&#39;)) console.log(app.getPath(&#39;temp&#39;)) console.log(app.getPath(&#39;userData&#39;)) createWindow()})

BrowserWindow

electron.BrowserWindow: 建立和控制瀏覽器視窗

例項方法

win.loadURL(url[, options]): 和 loadFile 互斥

mainWindow.loadURL(&#39;https://www.baidu.com&#39;)

優雅的顯示視窗使用ready-to-show事件

let mainWindow = new BrowserWindow({ show: false })mainWindow.once(&#39;ready-to-show&#39;, () =&gt; { mainWindow.show()})

設定 backgroundColor

let win = new BrowserWindow({ backgroundColor: &#39;#2e2c29&#39; })

父子視窗視窗定義

secondaryWindow = new BrowserWindow({ width: 600, height: 600, webPreferences: { nodeIntegration: true }})secondaryWindow.loadFile(&#39;index.html&#39;)secondaryWindow.on(&#39;closed&#39;, () =&gt; { mainWindow = null})

視窗關係

secondaryWindow = new BrowserWindow({ parent: mainWindon, // 定義父視窗 modal: true // 鎖定在主視窗})

子視窗顯示和隱藏

secondaryWindow = new BrowserWindow({ show: false})setTimeout(() =&gt; { secondaryWindow.show() setTimeout(() =&gt; { secondaryWindow.hide() }, 3000)}, 2000)

無邊框視窗

Frameless Window

mainWindow = new BrowserWindow({ frame: false})

讓頁面可拖拽

&lt;body style=&#34;user-select: none; -webkit-app-region:drag;&#34;&gt;

no-drag 修復下面控制元件的bug

&lt;input style=&#34;-webkit-app-region: no-drag;&#34; type=&#34;range&#34; name=&#34;range&#34; min=&#34;0&#34; max=&#34;10&#34;&gt;

顯示紅綠燈

mainWindow = new BrowserWindow({ titleBarStyle: &#39;hidden&#39; // or hiddenInset 距離紅綠燈更近})

屬性與方法minWidth && minHeight

mainWindow = new BrowserWindow({ minWidth: 300, minHeight: 300})

更多詳見：/file/2020/08/28/20200828172223_1.jpg = new BrowserWindow({ width: 400, height: 300, webPreferences: { nodeIntegration: true },})mainWindow.on('focus', () => { console.log('mainWindow focused')})secWindow.on('focus', () => { console.log('secWindow focused')})app.on('browser-window-focus', () => { console.log('App focused')})靜態方法getAllWindows()

let allWindows = BrowserWindow.getAllWindows()console.log(allWindows)

更多詳見: /file/2020/08/28/20200828172224_2.jpg () => { mainWindow.maximize() })更多詳見：/file/2020/08/28/20200828172225_3.jpg 儲存視窗的狀態 npm install electron-window-state

webContents

webContents 是 EventEmitter 的例項，負責渲染和控制網頁, 是 BrowserWindow 物件的一個屬性。let wc = mainWindow.webContents console.log(wc)

起步建立session物件

let session = mainWindow.webContents.sessionconsole.log(session) // {}

在chromium 建立localStorage，然後建立兩個視窗，兩個session共享

mainWindow = new BrowserWindow({ width: 1000, height: 800, webPreferences: { nodeIntegration: true }})secWindow = new BrowserWindow({ width: 500, height: 400, webPreferences: { nodeIntegration: true }})let session = mainWindow.webContents.sessionlet session2 = mainWindow.webContents.sessionconsole.log(Object.is(session, session2)) // true// Load index.html into the new BrowserWindowmainWindow.loadFile(&#39;index.html&#39;)secWindow.loadFile(&#39;index.html&#39;)// Open DevTools - Remove for PRODUCTION!mainWindow.webContents.openDevTools();secWindow.webContents.openDevTools();// Listen for window being closedmainWindow.on(&#39;closed&#39;, () =&gt; { mainWindow = null})secWindow.on(&#39;closed&#39;, () =&gt; { secWindow = null})

defaultSession

const {app, BrowserWindow, session} = require(&#39;electron&#39;)let ses = mainWindow.webContents.sessionconsole.log(Object.is(session.defaultSession, ses)) // true

自定義session

let customSes = session.fromPartition(&#39;part1&#39;)console.log(Object.is(customSes, ses)) //false, 此時customSes 還是共享sessionsecWindow = new BrowserWindow({ width: 500, height: 400, webPreferences: {  nodeIntegration: true, session: customSes // 定義session, 此時子視窗有自己的session }})// 在子窗口裡建立localstorge: winName/secWindow// 關閉所有視窗，發現建立的localstorage又消失了，因為此時的session儲存在記憶體裡，重新啟動應用又消失了。可以加字首persist，使其變為永久儲存：let customSes = session.fromPartition(&#39;persist:part1&#39;)// 或者：secWindow = new BrowserWindow({ width: 500, height: 400, webPreferences: {  nodeIntegration: true, - session: customSes + partition: &#39;persist:part1&#39; }})

例項方法

ses.clearStorageData() // 刪除主視窗的的storage

查詢和修改一個會話的cookies

// 查詢所有 cookiessession.defaultSession.cookies.get({}) .then((cookies) =&gt; { console.log(cookies) }).catch((error) =&gt; { console.log(error) })// 查詢所有與設定的 URL 相關的所有 cookiessession.defaultSession.cookies.get({ url: &#39;http://www.github.com&#39; }) .then((cookies) =&gt; { console.log(cookies) }).catch((error) =&gt; { console.log(error) })// 設定一個 cookie，使用設定的名稱；// 如果存在，則會覆蓋原先 cookie.const cookie = { url: &#39;http://www.github.com&#39;, name: &#39;dummy_name&#39;, value: &#39;dummy&#39; }session.defaultSession.cookies.set(cookie) .then(() =&gt; { // success }, (error) =&gt; { console.error(error) })

downloadItem

控制來自於遠端資源的檔案下載。

const {app, BrowserWindow, dialog} = require(&#39;electron&#39;)mainWindow.webContents.on(&#39;did-finish-load&#39;, () =&gt; { dialog.showOpenDialog({ buttonLabel: &#39;選擇&#39;, defaultPath: app.getPath(&#39;desktop&#39;), properties: [&#39;multiSelections&#39;, &#39;createDirectory&#39;, &#39;openFile&#39;, &#39;openDirectory&#39;] }, filepaths =&gt; { console.log(filepaths) })})dialog.showSaveDialog({}, filename =&gt; { console.log(filename)})const answers = [&#39;Yes&#39;, &#39;No&#39;, &#39;Maybe&#39;]dialog.showMessageBox({ title: &#39;Message Box&#39;, message: &#39;Please select an option&#39;, detail: &#39;Message details.&#39;, buttons: answers}, response =&gt; { console.log(`User selected: ${answers[response]}`)})

快捷鍵+系統快捷鍵

快捷鍵：定義鍵盤快捷鍵。系統快捷鍵：在應用程式沒有鍵盤焦點時，監聽鍵盤事件。

快捷鍵可以包含多個功能鍵和一個鍵碼的字串，由符號+結合，用來定義你應用中的鍵盤快捷鍵

示例：

CommandOrControl+ACommandOrControl+Shift+Z

快捷方式使用 register 方法在 globalShortcut 模組中註冊。

globalShortcut 模組可以在作業系統中註冊/登出全域性快捷鍵, 以便可以為操作定製各種快捷鍵。

注意: 快捷方式是全域性的; 即使應用程式沒有鍵盤焦點, 它也仍然在持續監聽鍵盤事件。在應用程式模組發出 ready 事件之前, 不應使用此模組。

瀏覽器

Windows

∨ Laravel高併發調優筆記

劇多

Electron指南3——Main Process API

瀏覽器

Windows