Web前端技術(shù)開發(fā)桌面應(yīng)用的方式
- CEF：用 Chromium&Webkit 來呈現(xiàn) web 頁面矛缨，是客戶端里面嵌瀏覽器颗胡，瀏覽器里面跑網(wǎng)頁。
- heX：基于CEF萄焦，內(nèi)部整合了開源項(xiàng)目 Chromium 及 node.js。
- nw：基于Chromium 和 node.js，利用 web 方式開發(fā)跨平臺(tái)桌面應(yīng)用的平臺(tái)技術(shù)拂封。
- electron：底層也是基于Chromium 和 node.js茬射。
- 等等。冒签。在抛。
案例實(shí)操~electron
electron 是 github 開發(fā)的，用來開發(fā)桌面應(yīng)用的一款前端框架
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-gHQ4XC8M-1601368852810)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]
開發(fā)環(huán)境
安裝 node.js
為了避免網(wǎng)絡(luò)問題對(duì) Node 工作時(shí)的影響萧恕，我們安裝國內(nèi)的 node 鏡像 cnpm刚梭。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝 electron
npm install --save-dev electron
或者全局安裝
npm install -g electron
開發(fā)工具
其實(shí) vscode 就是 electron 開發(fā)的
開發(fā)一個(gè)簡(jiǎn)易的 electron
Electron 應(yīng)用使用 JavaScript 開發(fā)，其工作原理和方法與 Node.js 開發(fā)相同票唆。 electron 模塊包含了 Electron 提供的所有 API 和功能朴读，引入方法和普通 Node.js 模塊一樣：
const electron = require('electron')
electron 模塊所提供的功能都是通過命名空間暴露出來的。 比如說： electron.app負(fù)責(zé)管理 Electron 應(yīng)用程序的生命周期走趋， electron.BrowserWindow類負(fù)責(zé)創(chuàng)建窗口衅金。下面是一個(gè)簡(jiǎn)單的main.js文件，它將在應(yīng)用程序準(zhǔn)備就緒后打開一個(gè)窗口：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 創(chuàng)建瀏覽器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加載index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
創(chuàng)建你想展示的 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
啟動(dòng)
我們?cè)?code>package.json中已經(jīng)寫好了啟動(dòng)命令簿煌，所以這里直接用 node 啟動(dòng)命令npm start就可以了氮唯，如果沒有配，也可以用electron .命令啟動(dòng)啦吧。
主進(jìn)程和渲染進(jìn)程
我們可以理解package.json中定義的入口文件就是主進(jìn)程您觉，那一般一個(gè)程序只有一個(gè)主進(jìn)程拙寡，而我們可以利用一個(gè)主進(jìn)程授滓，打開多個(gè)子窗口。
由于 Electron 使用了 Chromium 來展示 web 頁面肆糕，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到般堆。每個(gè) Electron 中的 web 頁面運(yùn)行在它自己的渲染進(jìn)程中，也就是我們說的渲染進(jìn)程诚啃。
也就是說主進(jìn)程控制渲染進(jìn)程淮摔，一個(gè)主進(jìn)程可以控制多個(gè)渲染進(jìn)程。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Ve9EmdUW-1601368852812)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]
您應(yīng)當(dāng)在 main.js 中創(chuàng)建窗口始赎，并處理程序中可能遇到的所有系統(tǒng)事件和橙。下面我們將完善上述例子，添加以下功能：打開開發(fā)者工具造垛、處理窗口關(guān)閉事件魔招、在 macOS 用戶點(diǎn)擊 dock 上圖標(biāo)時(shí)重建窗口，添加后五辽，main. js 就像下面這樣：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 創(chuàng)建瀏覽器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且為你的應(yīng)用加載index.html
win.loadFile('index.html')
// 打開開發(fā)者工具
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
// 當(dāng)所有窗口都關(guān)閉時(shí)觸發(fā)此事件.
app.on('window-all-closed', () => {
// 在 macOS 上办斑，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上乡翅，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時(shí)鳞疲，
// 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成幾個(gè)文件蠕蚜，然后用 require 導(dǎo)入尚洽。
git 上面的 demo 示例
# 克隆這倉庫
git clone https://github.com/electron/electron-quick-start
# 進(jìn)入倉庫
cd electron-quick-start
# 安裝依賴庫
npm install
# 運(yùn)行應(yīng)用
npm start
electron-forge 構(gòu)建項(xiàng)目
# 全局安裝electron-forge
npm install electron-forge -g
#用electron-forge初始化一個(gè)項(xiàng)目
electron-forge init demo02
# 進(jìn)入到項(xiàng)目目錄
cd demo02
#啟動(dòng)項(xiàng)目
npm start
擴(kuò)展~開發(fā)桌面百度
主進(jìn)程代碼
我們創(chuàng)建了主進(jìn)程對(duì)象 win 后，讓它直接加載百度的地址靶累。
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 創(chuàng)建瀏覽器窗口
let win = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
// 加載index.html文件
// win.loadFile('index.html')
win.loadURL("http://www.baidu.com")
}
app.whenReady().then(createWindow)
打包發(fā)布
我們希望使用electron-packager對(duì)應(yīng)用進(jìn)行打包發(fā)布翎朱，electron-packager的安裝方式如下：
#下載electron-packager打包插件
npm install electron-packager -g
#開始打包
electron-packager ./ demo01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5
我們還可以進(jìn)一步打包成可執(zhí)行文件
#下載windows系統(tǒng)可執(zhí)行文件打包插件
npm install -g electron-installer-windows
#開始打包
electron-installer-windows --src demo01-win32-x64 --dest ./
