wordpress如何壓縮圖片優(yōu)化推廣服務(wù)
安裝Node.js
在使用Electron進(jìn)行開發(fā)之前,需要安裝 Node.js。 官方建議使用最新的LTS版本。
檢查 Node.js 是否正確安裝:
# 查看node版本
node -v
# 查看npm版本
npm -v
注意
開發(fā)者需要在開發(fā)環(huán)境安裝 Node.js 才能編寫 Electron 項(xiàng)目,但是 Electron 應(yīng)用程序 不使用系統(tǒng)本地的 Node.js 環(huán)境來運(yùn)行它的代碼。
Electron 應(yīng)用程序 使用它內(nèi)置的 Node.js 運(yùn)行時(shí)。 這意味著 終端用戶 不需要安裝 Node.js 環(huán)境也可以運(yùn)行Electron 應(yīng)用程序。
安裝Electron
Electron 應(yīng)用程序遵循與其他 Node.js 項(xiàng)目相同的結(jié)構(gòu)。
首先創(chuàng)建一個(gè)文件夾my-electron-app
并在vscode 編譯器中打開文件夾。
初始化 npm 包:
npm init
init 初始化命令會(huì)提示開發(fā)者在項(xiàng)目初始化配置中設(shè)置一些值,有幾條規(guī)則需要遵循:
entry point
應(yīng)為main.js
。author
與description
可為任意值,但對(duì)于應(yīng)用打包是必填項(xiàng)。
生成的 package.json
文件應(yīng)該像這樣:
{"name": "my-electron-app","version": "1.0.0","description": "一個(gè)測(cè)試用的electron項(xiàng)目","main": "main.js","author": "zhangSan", "license": "ISC"
}
在項(xiàng)目中安裝electron
:
npm install --save-dev electron# 可以簡寫
npm i electron -D
注意 :electron是開發(fā)依賴。
electron依賴非常難下載,總是下載到中途就失敗了。
查看官方文檔:
在運(yùn)行 npm install electron 時(shí),有些用戶會(huì)偶爾遇到安裝問題。
在大多數(shù)情況下,這些錯(cuò)誤都是由網(wǎng)絡(luò)問題導(dǎo)致,而不是因?yàn)?electron npm 包的問題。 如ELIFECYCLE
、EAI_AGAIN
、ECONNRESET
和ETIMEDOUT
等錯(cuò)誤都是此類網(wǎng)絡(luò)問題的標(biāo)志。 最佳的解決方法是嘗試切換網(wǎng)絡(luò),或是稍后再嘗試安裝。
fine,意思是網(wǎng)絡(luò)問題咯,千M網(wǎng)下載不下來也是離譜啊…
解決方案
-
如果通過
npm
安裝失敗,你也可以嘗試通過從 electron/electron/release 直接下載 Electron -
如果安裝失敗并報(bào)錯(cuò)
EACCESS
,可能需要修復(fù)npm權(quán)限。 -
如果上述報(bào)錯(cuò)持續(xù)出現(xiàn),unsafe-perm 標(biāo)志可能需要被設(shè)置為
true
:
npm install electron --unsafe-perm=true
- 在較慢的網(wǎng)絡(luò)上, 最好使用
--verbose
標(biāo)志來顯示下載進(jìn)度:
npm install --verbose electron
- 如果需要強(qiáng)制重新下載文件, 并且
SHASUM
文件將force_no_cache
環(huán)境變量設(shè)置為true
。
我直接使用了第3點(diǎn)和第4點(diǎn):
npm install electron -D --unsafe-perm=true --verbose
歷時(shí)半個(gè)小時(shí),這個(gè)依賴終于下載成功了! 感天動(dòng)地!!
在 package.json
配置文件中的scripts
字段下增加一條start
命令:
{"scripts": {"start": "electron ."}
}
package.json
文件應(yīng)該像這樣:
{"name": "my-electron-app","version": "1.0.0","description": "一個(gè)測(cè)試用的electron項(xiàng)目","main": "main.js","scripts": {"start": "electron ."},"author": "zhangSan","license": "ISC","devDependencies": {"electron": "^32.1.2"}
}
執(zhí)行start
命令能在開發(fā)模式下打開應(yīng)用:
npm start
執(zhí)行命令直接就報(bào)錯(cuò)了:
沒有找到模塊main.js,請(qǐng)確認(rèn) package.json
中的 main
入口是合法的。
運(yùn)行主進(jìn)程
任何 Electron 應(yīng)用程序的入口都是 main
文件。 這個(gè)文件控制了主進(jìn)程,它運(yùn)行在一個(gè)完整的Node.js環(huán)境中,負(fù)責(zé)控制應(yīng)用的生命周期,顯示原生界面,執(zhí)行特殊操作并管理渲染器進(jìn)程。
執(zhí)行 npm start
期間,Electron 將依據(jù)應(yīng)用中 package.json
配置下main
字段中配置的值查找此文件。
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名為 main.js
的空文件。
再次執(zhí)行 npm start
,不再報(bào)錯(cuò),應(yīng)用成功啟動(dòng)。但是,它不會(huì)做任何事,開發(fā)者也看不到啟動(dòng)的應(yīng)用窗口,因?yàn)?main.js
是空白文件,沒有添加任何代碼!
在 main.js
中編寫代碼,創(chuàng)建?個(gè)基本窗?:
// main.js運(yùn)?在應(yīng)?的主進(jìn)程上,?法訪問Web相關(guān)API
// main.js主要負(fù)責(zé):控制?命周期、顯示界?、控制渲染進(jìn)程等其他操作。
// 從electron中引入app、BrowserWindow
// app模塊: 控制應(yīng)用程序的事件生命周期。
// BrowserWindow模塊: 創(chuàng)建和管理應(yīng)用程序 窗口
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500, // 窗口寬度height: 300 // 窗口高度})
}
// 在 Electron 中,只有在 app 模塊的 ready 事件被激發(fā)后才能創(chuàng)建瀏覽器窗口。
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好以后,創(chuàng)建窗口createWindow()
})
注意
可以通過使用 app.whenReady()
API來監(jiān)聽 app
模塊的 ready
事件:
app.whenReady().then(() => {createWindow()
})
再次執(zhí)行 npm start
,應(yīng)用啟動(dòng)成功,并且能看到應(yīng)用窗口:
下圖是應(yīng)用自帶的菜單:
如果不要菜單,需要在創(chuàng)建窗口時(shí)配置:autoHideMenuBar: true
修改 main.js
,在窗口中展示一個(gè)遠(yuǎn)程頁面:
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500,height: 300,autoHideMenuBar: true})// 展示一個(gè)遠(yuǎn)程頁面win.loadURL('https://lol.qq.com/main.shtml')// 可以在這里添加窗口的其他配置和事件處理
}
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好的時(shí)候,創(chuàng)建窗口createWindow()
})
執(zhí)行npm start
,查看效果:
關(guān)于BrowserWindow的更多配置項(xiàng),請(qǐng)參考官網(wǎng):BrowserWindow實(shí)例屬性
加載本地頁面
在Electron中,各個(gè)窗口顯示的內(nèi)容可以是本地HTML文件,也可以是一個(gè)遠(yuǎn)程url。
創(chuàng)建 pages/index.html
編寫內(nèi)容::
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/><title>Hello Electron!</title></head><body><h1>Hello Electron!</h1></body>
</html>
修改 mian.js
加載本地??:
// 加載?個(gè)本地??
win.loadFile('./pages/index.html')
執(zhí)行npm start
,查看效果:
可以通過快捷鍵ctrl+shift+i,打開控制臺(tái):
CSP配置說明
語法:
Content-Security-Policy: <policy-directive>; <policy-directive>
這是一個(gè)用于設(shè)置網(wǎng)頁內(nèi)容安全策略(Content Security Policy,簡稱 CSP)的 HTML 標(biāo)簽:
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
/>
上述配置的說明:
default-src 'self'
default-src
:配置加載策略,適?于所有未在其它指令中明確指定的資源類型。self
:僅允許從同源的資源加載,禁?從不受信任的外部來源加載,提?安全性。
style-src 'self' 'unsafe-inline'
style-src
:指定樣式表(CSS)的加載策略。self
:僅允許從同源的資源加載,禁?從不受信任的外部來源加載,提?安全性。unsafe-inline
:允許在HTML?檔內(nèi)使?內(nèi)聯(lián)樣式。
img-src 'self' data:
img-src
:指定圖像資源的加載策略。self
:表示僅允許從同源加載圖像。data:
:允許使?data: URI
來嵌?圖像。這種URI模式允許將圖像數(shù)據(jù)直接嵌
?到HTML或CSS中,?不是通過外部鏈接引?。
HTTP 響應(yīng)頭 Content-Security-Policy
允許站點(diǎn)管理者控制用戶代理能夠?yàn)橹付ǖ捻撁婕虞d哪些資源。除了少數(shù)例外情況,設(shè)置的政策主要涉及指定服務(wù)器的源和腳本結(jié)束點(diǎn)。
關(guān)于 CSP 的詳細(xì)說明請(qǐng)參考:MDN-Content-Security-Policy、Electron Security
如果沒有配置CSP,控制臺(tái)會(huì)有?個(gè)安全警告:
管理窗口的生命周期
創(chuàng)建窗口
- 通常在主進(jìn)程中創(chuàng)建窗口,可以使用
BrowserWindow
類來創(chuàng)建窗口實(shí)例。
const { app, BrowserWindow } = require('electron')function createWindow() {const win = new BrowserWindow({width: 500,height: 300,autoHideMenuBar: true})// 展示一個(gè)遠(yuǎn)程頁面win.loadURL('https://lol.qq.com/main.shtml')// 可以在這里添加窗口的其他配置和事件處理
}
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好的時(shí)候,創(chuàng)建窗口createWindow()
})
窗口的顯示與隱藏
win.show()
:顯示窗口。通常在應(yīng)用啟動(dòng)后或在特定事件觸發(fā)時(shí)調(diào)用。win.hide()
:隱藏窗口。可以在需要隱藏窗口的情況下調(diào)用,比如最小化到系統(tǒng)托盤時(shí)。
窗口最小化、最大化、恢復(fù)
win.minimize()
:將窗口最小化到任務(wù)欄或 Dock。win.maximize()
:最大化窗口。win.unmaximize()
:如果窗口處于最大化狀態(tài),可以使用win.unmaximize()
恢復(fù)到原始大小。
窗口事件監(jiān)聽
-
closed
事件:- 當(dāng)窗口關(guān)閉時(shí)觸發(fā)。在這個(gè)事件處理函數(shù)中,可以進(jìn)行一些清理工作,比如釋放資源。
win.on('closed', () => { mainWindow = null; });
-
resize
事件:
當(dāng)窗口大小改變時(shí)觸發(fā)??梢栽谶@個(gè)事件處理函數(shù)中根據(jù)新的窗口大小調(diào)整應(yīng)用的布局或進(jìn)行其他相應(yīng)的處理。 -
move
事件:
當(dāng)窗口位置改變時(shí)觸發(fā)??梢杂糜谟涗洿翱谖恢没蜻M(jìn)行與窗口位置相關(guān)的操作。
關(guān)閉所有窗口時(shí)退出應(yīng)用 (Windows & Linux)
在Windows 和 Linux 系統(tǒng):關(guān)閉所有窗口會(huì)完全退出應(yīng)用程序。
為了實(shí)現(xiàn)這一點(diǎn),需要監(jiān)聽 app
模塊的 'window-all-closed'
事件。如果用戶不是在 macOS(darwin
) 上運(yùn)行程序,則調(diào)用 app.quit()
。
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
如果沒有窗口打開則打開一個(gè)窗口 (macOS)
在 Linux 和 Windows 上,應(yīng)用根本不存在是否被激活的說法,應(yīng)用要么是有進(jìn)程,要么是沒進(jìn)程。
但是,在 macOS 上,應(yīng)用已經(jīng)不運(yùn)行了,但是應(yīng)用處于未激活狀態(tài):應(yīng)用在沒有打開任何窗口的情況下也繼續(xù)運(yùn)行。
如果激活應(yīng)用,則檢查應(yīng)用是否 有窗口,沒有窗口就在激活應(yīng)用時(shí)會(huì)打開新的窗口。
監(jiān)聽 app
模塊的 activate
事件來實(shí)現(xiàn):如果沒有任何瀏覽器窗口是打開的,則調(diào)用 createWindow()
方法。
// 當(dāng)app準(zhǔn)備好后,執(zhí)?createWindow創(chuàng)建窗?
app.on('ready', () => {createWindow();// 當(dāng)應(yīng)?被激活時(shí)app.on('activate', () => {// 如果當(dāng)前應(yīng)?沒有窗?,則創(chuàng)建?個(gè)新的窗?if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});
完整的 main.js
如下:
const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 500, // 窗口寬度height: 300, // 窗口高度autoHideMenuBar: true // 隱藏菜單欄});// 在窗口中加載一個(gè)遠(yuǎn)程頁面win.loadFile('./pages/index.html');
}
app.on('ready', () => {// 當(dāng)app準(zhǔn)備好的時(shí)候,創(chuàng)建窗口createWindow();// 在Windows & Linux,應(yīng)用的所有窗口關(guān)閉時(shí),退出應(yīng)用程序app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()})// 在macOS,當(dāng)應(yīng)?被激活時(shí)app.on('activate', () => {// 如果當(dāng)前應(yīng)?沒有窗?,則創(chuàng)建?個(gè)新的窗?if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});