Electron 可以讓你使用開發(fā) Web 的技術(shù)去開發(fā)跨平臺的桌面端應(yīng)用，由 Github 主導(dǎo)和開源，大家熟悉的 Atom 和 VSCode 編輯器就是使用 Electron 開發(fā)的。

創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報價，主機托管價格性價比高，為金融證券行業(yè)成都移動服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

Electron 是 Node.js 和 Chromium 瀏覽器的結(jié)合體，用 Chromium 瀏覽器顯示出的 Web 頁面作為應(yīng)用的 GUI，通過 Node.js 去和操作系統(tǒng)交互。 當(dāng)你在 Electron 應(yīng)用中的一個窗口操作時，實際上是在操作一個網(wǎng)頁。當(dāng)你的操作需要通過操作系統(tǒng)去完成時，網(wǎng)頁會通過 Node.js 去和操作系統(tǒng)交互。

采用這種方式開發(fā)桌面端應(yīng)用的優(yōu)點有：

1. 降低開發(fā)門檻，只需掌握網(wǎng)頁開發(fā)技術(shù)和 Node.js 即可，大量的 Web 開發(fā)技術(shù)和現(xiàn)成庫可以復(fù)用于 Electron；
2. 由于 Chromium 瀏覽器和 Node.js 都是跨平臺的，Electron 能做到寫一份代碼在不同的操作系統(tǒng)運行。

在運行 Electron 應(yīng)用時，會從啟動一個主進程開始。主進程的啟動是通過 Node.js 去執(zhí)行一個入口 JavaScript 文件實現(xiàn)的，這個入口文件 main.js 內(nèi)容如下：

const { app, BrowserWindow } = require('electron')
// 保持一個對于 window 對象的全局引用，如果你不這樣做，
// 當(dāng) JavaScript 對象被垃圾回收， window 會被自動地關(guān)閉
let win
// 打開主窗口
function createWindow() {
 // 創(chuàng)建瀏覽器窗口
 win = new BrowserWindow({ width: 800, height: 600 })
 // 加載應(yīng)用的 index.html
 const indexPageURL = `file://${__dirname}/dist/index.html`;
 win.loadURL(indexPageURL);
 // 當(dāng) window 被關(guān)閉，這個事件會被觸發(fā)
 win.on('closed', () => {
  // 取消引用 window 對象
  win = null
 })
}

// Electron 會在創(chuàng)建瀏覽器窗口時調(diào)用這個函數(shù)。
app.on('ready', createWindow)

// 當(dāng)全部窗口關(guān)閉時退出
app.on('window-all-closed', () => {
 // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出
 // 否則絕大部分應(yīng)用會保持激活
 if (process.platform !== 'darwin') {
  app.quit()
 }
})

主進程啟動后會一直駐留在后臺運行，你眼睛所看得的和操作的窗口并不是主進程，而是由主進程新啟動的窗口子進程。

應(yīng)用從啟動到退出有一系列生命周期事件，通過 electron.app.on() 函數(shù)去監(jiān)聽生命周期事件，在特定的時刻做出反應(yīng)。 例如在 app.on('ready') 事件中通過 BrowserWindow 去展示應(yīng)用的主窗口。

啟動的窗口其實是一個網(wǎng)頁，啟動時會去加載在 loadURL 中傳入的網(wǎng)頁地址。 每個窗口都是一個單獨的網(wǎng)頁進程，窗口之間的通信需要借助主進程傳遞消息。

總體來說開發(fā) Electron 應(yīng)用和開發(fā) Web 應(yīng)用很相似，區(qū)別在于 Electron 的運行環(huán)境同時內(nèi)置了瀏覽器和 Node.js 的 API，在開發(fā)網(wǎng)頁時除了可以使用瀏覽器提供的 API 外，還可以使用 Node.js 提供的 API。

接入 Webpack

接下來做一個簡單的 Electron 應(yīng)用，要求為應(yīng)用啟動后顯示一個主窗口，在主窗口里有一個按鈕，點擊這個按鈕后新顯示一個窗口，且使用 React 開發(fā)網(wǎng)頁。

由于 Electron 應(yīng)用中的每一個窗口對應(yīng)一個網(wǎng)頁，所以需要開發(fā)2個網(wǎng)頁，分別是主窗口的 index.html 和新打開的窗口 login.html 。 也就是說項目由2個單頁應(yīng)用組成，這和3-10管理多個單頁應(yīng)用 中的項目非常相似，讓我們來把它改造成一個 Electron 應(yīng)用。

需要改動的地方如下：

在項目根目錄下新建主進程的入口文件 main.js ，內(nèi)容和上面提到的一致；

主窗口網(wǎng)頁的代碼如下：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { remote } from 'electron';
import path from 'path';
import './index.css';
class App extends Component {
 // 在按鈕被點擊時
 handleBtnClick() {
  // 新窗口對應(yīng)的頁面的 URI 地址
  const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
  // 新窗口的大小
  let win = new remote.BrowserWindow({ width: 400, height: 320 })
  win.on('close', function () {
   // 窗口被關(guān)閉時清空資源
   win = null
  })
  // 加載網(wǎng)頁
  win.loadURL(modalPath)
  // 顯示窗口
  win.show()
 }
 render() {
  return (
   <div>
    <h2>Page Index</h2>
    <button onClick={this.handleBtnClick}>Open Page Login</button>
   </div>
  )
 }
}
render(<App/>, window.document.getElementById('app'));

其中最關(guān)鍵的部分在于在按鈕點擊事件里通過 electron 庫里提供的 API 去新打開一個窗口，并加載網(wǎng)頁文件所在的地址。

頁面部分的代碼已經(jīng)修改完成，接下來修改構(gòu)建方面的代碼。 這里構(gòu)建需要做到以下幾點：

構(gòu)建出2個可在瀏覽器里運行的網(wǎng)頁，分別對應(yīng)2個窗口的界面；

1. 由于在網(wǎng)頁的 JavaScript 代碼里可能會有調(diào)用 Node.js 原生模塊或者 electron 模塊，也就是輸出的代碼依賴這些模塊。但由于這些模塊都是內(nèi)置支持的，構(gòu)建出的代碼不能把這些模塊打包進去。
2. 要完成以上要求非常簡單，因為 Webpack 內(nèi)置了對 Electron 的支持。 只需要給 Webpack 配置文件加上一行代碼即可，如下：

target: 'electron-renderer',

這句配置曾在2-7其它配置項-Target中提到，意思是指讓 Webpack 構(gòu)建出用于 Electron 渲染進程用的 JavaScript 代碼，也就是這2個窗口需要的網(wǎng)頁代碼。

以上修改都完成后重新執(zhí)行 Webpack 構(gòu)建，對應(yīng)的網(wǎng)頁需要的代碼都輸出到了項目根目錄下的 dist 目錄里。

為了以 Electron 應(yīng)用的形式運行，還需要安裝新依賴：

# 安裝 Electron 執(zhí)行環(huán)境到項目中
npm i -D electron

安裝成功后在項目目錄下執(zhí)行 electron . 你就能成功看到啟動的桌面應(yīng)用了，效果如圖：

本實例提供項目完整代碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前題目：詳解Webpack實戰(zhàn)之構(gòu)建Electron應(yīng)用
文章路徑：http://jinyejixie.com/article18/pgiegp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機、網(wǎng)站營銷、品牌網(wǎng)站制作、網(wǎng)站改版、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)