如何用Web前端技術(shù)就能開發(fā)出桌面應(yīng)用程序滥玷?

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。

  • 等等虽风。棒口。。

安裝 electron

npm install --save-dev electron

或者全局安裝

npm install -g electron

開發(fā)工具

VSCode

其實(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-vcXzu5BS-1603424411834)(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 ./

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末锯岖,一起剝皮案震驚了整個(gè)濱河市介袜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌出吹,老刑警劉巖遇伞,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異捶牢,居然都是意外死亡鸠珠,警方通過查閱死者的電腦和手機(jī)巍耗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來渐排,“玉大人炬太,你說我怎么就攤上這事⊙背埽” “怎么了亲族?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)可缚。 經(jīng)常有香客問我霎迫,道長(zhǎng),這世上最難降的妖魔是什么城看? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任女气,我火速辦了婚禮,結(jié)果婚禮上测柠,老公的妹妹穿的比我還像新娘炼鞠。我一直安慰自己,他們只是感情好轰胁,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布谒主。 她就那樣靜靜地躺著,像睡著了一般赃阀。 火紅的嫁衣襯著肌膚如雪霎肯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天榛斯,我揣著相機(jī)與錄音观游,去河邊找鬼。 笑死驮俗,一個(gè)胖子當(dāng)著我的面吹牛懂缕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播王凑,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼搪柑,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了索烹?” 一聲冷哼從身側(cè)響起工碾,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎百姓,沒想到半個(gè)月后渊额,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年端圈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了焦读。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡舱权,死狀恐怖矗晃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情宴倍,我是刑警寧澤张症,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站鸵贬,受9級(jí)特大地震影響俗他,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阔逼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一兆衅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嗜浮,春花似錦羡亩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至吉殃,卻和暖如春辞居,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛋勺。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來泰國打工瓦灶, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抱完。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓贼陶,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親乾蛤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子每界,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361