Web前端技術(shù)開(kāi)發(fā)桌面應(yīng)用的方式
CEF：用 Chromium&Webkit?來(lái)呈現(xiàn) web 頁(yè)面，是客戶端里面嵌瀏覽器奇徒，瀏覽器里面跑網(wǎng)頁(yè)。
heX：基于CEF巍膘，內(nèi)部整合了開(kāi)源項(xiàng)目 Chromium 及?node.js。
nw：基于Chromium 和 node.js芋簿，利用 web 方式開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用的平臺(tái)技術(shù)峡懈。
electron：底層也是基于Chromium 和 node.js。
等等与斤。肪康。。
electron 是 github 開(kāi)發(fā)的撩穿，用來(lái)開(kāi)發(fā)桌面應(yīng)用的一款前端框架
為了避免網(wǎng)絡(luò)問(wèn)題對(duì) Node 工作時(shí)的影響磷支，我們安裝國(guó)內(nèi)的 node 鏡像 cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install --save-dev electron
或者全局安裝
npm install -g electron
其實(shí) vscode 就是 electron 開(kāi)發(fā)的
開(kāi)發(fā)一個(gè)簡(jiǎn)易的 electron
Electron 應(yīng)用使用 JavaScript 開(kāi)發(fā)食寡，其工作原理和方法與 Node.js 開(kāi)發(fā)相同雾狈。?electron?模塊包含了 Electron 提供的所有 API 和功能，引入方法和普通 Node.js 模塊一樣：
constelectron=require('electron')
electron?模塊所提供的功能都是通過(guò)命名空間暴露出來(lái)的冻河。 比如說(shuō)：?electron.app負(fù)責(zé)管理 Electron 應(yīng)用程序的生命周期箍邮，?electron.BrowserWindow類(lèi)負(fù)責(zé)創(chuàng)建窗口。下面是一個(gè)簡(jiǎn)單的main.js文件叨叙，它將在應(yīng)用程序準(zhǔn)備就緒后打開(kāi)一個(gè)窗口：
const{app,BrowserWindow}=require('electron')functioncreateWindow(){// 創(chuàng)建瀏覽器窗口letwin=newBrowserWindow({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><metacharset="UTF-8"><title>Hello World!</title><!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --><metahttp-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>
我們?cè)趐ackage.json中已經(jīng)寫(xiě)好了啟動(dòng)命令锭弊，所以這里直接用 node 啟動(dòng)命令npm start就可以了，如果沒(méi)有配擂错，也可以用electron .命令啟動(dòng)味滞。
我們可以理解package.json中定義的入口文件就是主進(jìn)程，那一般一個(gè)程序只有一個(gè)主進(jìn)程钮呀，而我們可以利用一個(gè)主進(jìn)程剑鞍，打開(kāi)多個(gè)子窗口。
由于 Electron 使用了 Chromium 來(lái)展示 web 頁(yè)面爽醋，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到蚁署。每個(gè) Electron 中的 web 頁(yè)面運(yùn)行在它自己的渲染進(jìn)程中，也就是我們說(shuō)的渲染進(jìn)程蚂四。
也就是說(shuō)主進(jìn)程控制渲染進(jìn)程光戈，一個(gè)主進(jìn)程可以控制多個(gè)渲染進(jìn)程。
您應(yīng)當(dāng)在?main.js?中創(chuàng)建窗口遂赠，并處理程序中可能遇到的所有系統(tǒng)事件久妆。下面我們將完善上述例子，添加以下功能：打開(kāi)開(kāi)發(fā)者工具跷睦、處理窗口關(guān)閉事件筷弦、在 macOS 用戶點(diǎn)擊 dock 上圖標(biāo)時(shí)重建窗口，添加后抑诸，main. js 就像下面這樣：
const{app,BrowserWindow}=require('electron')functioncreateWindow(){// 創(chuàng)建瀏覽器窗口constwin=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:true}})// 并且為你的應(yīng)用加載index.htmlwin.loadFile('index.html')// 打開(kāi)開(kāi)發(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)并且沒(méi)有其他窗口打開(kāi)時(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)入。
# 克隆這倉(cāng)庫(kù)gitclone https://github.com/electron/electron-quick-start# 進(jìn)入倉(cāng)庫(kù)cdelectron-quick-start# 安裝依賴庫(kù)npminstall# 運(yùn)行應(yīng)用npmstart
electron-forge 構(gòu)建項(xiàng)目
# 全局安裝electron-forgenpminstallelectron-forge -g#用electron-forge初始化一個(gè)項(xiàng)目electron-forge init demo02# 進(jìn)入到項(xiàng)目目錄cddemo02#啟動(dòng)項(xiàng)目npmstart
我們創(chuàng)建了主進(jìn)程對(duì)象 win 后称簿，讓它直接加載百度的地址扣癣。
const{app,BrowserWindow}=require('electron')functioncreateWindow(){// 創(chuàng)建瀏覽器窗口letwin=newBrowserWindow({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對(duì)應(yīng)用進(jìn)行打包發(fā)布，electron-packager的安裝方式如下：
#下載electron-packager打包插件npminstallelectron-packager -g#開(kāi)始打包electron-packager ./ demo01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5
我們還可以進(jìn)一步打包成可執(zhí)行文件
#下載windows系統(tǒng)可執(zhí)行文件打包插件npminstall-g electron-installer-windows#開(kāi)始打包electron-installer-windows --src demo01-win32-x64 --dest ./
o01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5
我們還可以進(jìn)一步打包成可執(zhí)行文件
```shell
#下載windows系統(tǒng)可執(zhí)行文件打包插件
npm install -g electron-installer-windows
#開(kāi)始打包
electron-installer-windows --src demo01-win32-x64 --dest ./
