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

Web前端技術(shù)開發(fā)桌面應(yīng)用的方式

CEF:用 Chromium&Webkit?來(lái)呈現(xiàn) web 頁(yè)面狱窘,是客戶端里面嵌瀏覽器杜顺,瀏覽器里面跑網(wǎng)頁(yè)。

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ā)的上真,用來(lái)開發(fā)桌面應(yīng)用的一款前端框架

開發(fā)環(huán)境

安裝 node.js

nodejs下載地址

為了避免網(wǎng)絡(luò)問(wèn)題對(duì) Node 工作時(shí)的影響溉跃,我們安裝國(guó)內(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ā)工具

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 模塊所提供的功能都是通過(guò)命名空間暴露出來(lái)的铲咨。 比如說(shuō): 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:

<html>

<head>

<meta charset="UTF-8">

<title>Hello World!</title>


<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è)趐ackage.json中已經(jīng)寫好了啟動(dòng)命令,所以這里直接用 node 啟動(dòng)命令npm start就可以了隆檀,如果沒(méi)有配摇天,也可以用electron .命令啟動(dòng)粹湃。

主進(jìn)程和渲染進(jìn)程

我們可以理解package.json中定義的入口文件就是主進(jìn)程,那一般一個(gè)程序只有一個(gè)主進(jìn)程泉坐,而我們可以利用一個(gè)主進(jìn)程为鳄,打開多個(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)事件俊扭。下面我們將完善上述例子,添加以下功能:打開開發(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)并且沒(mé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)入乌昔。

git 上面的 demo 示例

# 克隆這倉(cāng)庫(kù)

git clone https://github.com/electron/electron-quick-start

# 進(jìn)入倉(cāng)庫(kù)

cd electron-quick-start

# 安裝依賴庫(kù)

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)離奇詭異哗魂,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)漓雅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門录别,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)朽色,“玉大人,你說(shuō)我怎么就攤上這事组题『校” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵往踢,是天一觀的道長(zhǎng)腾誉。 經(jīng)常有香客問(wèn)我,道長(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)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼缝驳!你這毒婦竟也來(lái)了连锯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤用狱,失蹤者是張志新(化名)和其女友劉穎萎庭,沒(méi)想到半個(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
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)斩郎。三九已至脑融,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缩宜,已是汗流浹背肘迎。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留脓恕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓窿侈,卻偏偏與公主長(zhǎng)得像炼幔,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子史简,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容