如何用Web前端技術就能開發出桌面應用程式？
如何用Web前端技術就能開發出桌面應用程式？
Web前端技術開發桌面應用的方式
- CEF：用 Chromium&Webkit 來呈現 web 頁面，是客戶端裡面嵌瀏覽器，瀏覽器裡面跑網頁。
- heX：基於CEF，內部整合了開源專案 Chromium 及 node.js。
- nw：基於Chromium 和 node.js，利用 web 方式開發跨平臺桌面應用的平臺技術。
- electron：底層也是基於Chromium 和 node.js。
- 等等。。。
案例實操~electron
electron 是 github 開發的，用來開發桌面應用的一款前端框架
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-11imKxbl-1599724317910)(
開發環境
安裝 node.js
為了避免網路問題對 Node 工作時的影響，我們安裝國內的 node 映象 cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝 electron
npm install --save-dev electron
或者全域性安裝
npm install -g electron
開發工具
其實 vscode 就是 electron 開發的
開發一個簡易的 electron
Electron 應用使用 JavaScript 開發，其工作原理和方法與 Node.js 開發相同。 electron 模組包含了 Electron 提供的所有 API 和功能，引入方法和普通 Node.js 模組一樣：
const electron = require('electron')
electron 模組所提供的功能都是通過名稱空間暴露出來的。 比如說： electron.app負責管理 Electron 應用程式的生命週期， electron.BrowserWindow類負責建立視窗。下面是一個簡單的main.js檔案，它將在應用程式準備就緒後開啟一個視窗：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 建立瀏覽器視窗
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 載入index.html檔案
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
建立你想展示的 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>
啟動
我們在package.json中已經寫好了啟動命令，所以這裡直接用 node 啟動命令npm start就可以了，如果沒有配，也可以用electron .命令啟動。
主程序和渲染程序
我們可以理解package.json中定義的入口檔案就是主程序，那一般一個程式只有一個主程序，而我們可以利用一個主程序，開啟多個子視窗。
由於 Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多程序架構也被使用到。每個 Electron 中的 web 頁面執行在它自己的渲染程序中，也就是我們說的渲染程序。
也就是說主程序控制渲染程序，一個主程序可以控制多個渲染程序。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-C1eFkJGA-1599724317916)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]
您應當在 main.js 中建立視窗，並處理程式中可能遇到的所有系統事件。下面我們將完善上述例子，新增以下功能：開啟開發者工具、處理視窗關閉事件、在 macOS 使用者點選 dock 上圖示時重建視窗，新增後，main. js 就像下面這樣：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 建立瀏覽器視窗
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 並且為你的應用載入index.html
win.loadFile('index.html')
// 開啟開發者工具
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
// 當所有視窗都關閉時觸發此事件.
app.on('window-all-closed', () => {
// 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其選單欄會保持啟用。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時，
// 通常在應用程式中重新建立一個視窗。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成幾個檔案，然後用 require 匯入。
git 上面的 demo 示例
# 克隆這倉庫
git clone https://github.com/electron/electron-quick-start
# 進入倉庫
cd electron-quick-start
# 安裝依賴庫
npm install
# 執行應用
npm start
electron-forge 構建專案
# 全域性安裝electron-forge
npm install electron-forge -g
#用electron-forge初始化一個專案
electron-forge init demo02
# 進入到專案目錄
cd demo02
#啟動專案
npm start
擴充套件~開發桌面百度
主程序程式碼
我們建立了主程序物件 win 後，讓它直接載入百度的地址。
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 建立瀏覽器視窗
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)
打包釋出
我們希望使用electron-packager對應用進行打包釋出，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
我們還可以進一步打包成可執行檔案
#下載windows系統可執行檔案打包外掛
npm install -g electron-installer-windows
#開始打包
electron-installer-windows --src demo01-win32-x64 --dest ./
o01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5
我們還可以進一步打包成可執行檔案
```shell
#下載windows系統可執行檔案打包外掛
npm install -g electron-installer-windows
#開始打包
electron-installer-windows --src demo01-win32-x64 --dest ./