首頁 web前端 js教程 在Webpack中如何建構Electron應用

在Webpack中如何建構Electron應用

Jun 15, 2018 pm 03:39 PM
electron 應用

本篇文章主要介紹了Webpack實戰之建構 Electron 應用,現在分享給大家,也給大家做個參考。

Electron 可以讓你使用開發 Web 的技術去開發跨平台的桌面端應用,由 Github 主導和開源,大家熟悉的 Atom 和 VSCode 編輯器就是使用 Electron 開發的。

Electron 是 Node.js 和 Chromium 瀏覽器的結合體,用 Chromium 瀏覽器顯示的 Web 頁面作為應用的 GUI,透過 Node.js 去和作業系統互動。當你在 Electron 應用程式中的一個視窗操作時,實際上是在操作一個網頁。當你的操作需要透過作業系統去完成時,網頁會透過 Node.js 去和作業系統互動。

採用這種方式開發桌面端應用的優點有:

  1. 降低開發門檻,只需掌握網頁開發技術和Node.js 即可,大量的Web開發技術和現成函式庫可以重複用於Electron;

  2. 由於Chromium 瀏覽器和Node.js 都是跨平台的,Electron 能做到寫一份程式碼在不同的作業系統運行。

在執行 Electron 應用程式時,會從啟動一個主進程開始。主進程的啟動是透過Node.js 去執行一個入口JavaScript 檔案實現的,這個入口檔案main.js 內容如下:

const { app, BrowserWindow } = require('electron')
// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let win
// 打开主窗口
function createWindow() {
 // 创建浏览器窗口
 win = new BrowserWindow({ width: 800, height: 600 })
 // 加载应用的 index.html
 const indexPageURL = `file://${__dirname}/dist/index.html`;
 win.loadURL(indexPageURL);
 // 当 window 被关闭,这个事件会被触发
 win.on('closed', () => {
  // 取消引用 window 对象
  win = null
 })
}

// Electron 会在创建浏览器窗口时调用这个函数。
app.on('ready', createWindow)

// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
 // 在 macOS 上,除非用户用 Cmd + Q 确定地退出
 // 否则绝大部分应用会保持激活
 if (process.platform !== 'darwin') {
  app.quit()
 }
})
登入後複製

主進程啟動後會一直駐留在後台運行,你眼睛所看得的和操作的視窗並不是主進程,而是由主進程新啟動的視窗子進程。

應用從啟動到退出有一系列生命週期事件,透過 electron.app.on() 函數去監聽生命週期事件,在特定的時刻做出反應。例如在 app.on('ready') 事件中透過 BrowserWindow 去展示應用程式的主視窗。

啟動的視窗其實是一個網頁,啟動時會去載入在 loadURL 中傳入的網頁位址。每個視窗都是一個單獨的網頁進程,視窗之間的通訊需要藉助主進程傳遞訊息。

總體來說開發Electron 應用程式和開發Web 應用程式很相似,差別在於Electron 的運行環境同時內建了瀏覽器和Node.js 的API,在開發網頁時除了可以使用瀏覽器提供的API 外,還可以使用Node.js 提供的API。

接入Webpack

接下來做一個簡單的Electron 應用,要求為應用程式啟動後顯示一個主窗口,在主窗口裡有一個按鈕,點擊這個按鈕後新顯示一個窗口,並使用React 開發網頁。

由於 Electron 應用程式中的每個視窗對應一個網頁,所以需要開發2個網頁,分別是主視窗的 index.html 和新開啟的視窗 login.html 。也就是說專案由2個單頁應用程式組成,這和3-10管理多個單頁應用程式中的專案非常相似,讓我們來把它改造成一個 Electron 應用程式。

需要改動的地方如下:

在專案根目錄下新新程式的入口檔案main.js ,內容和上述的一致;

主視窗網頁的程式碼如下:

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() {
  // 新窗口对应的页面的 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 () {
   // 窗口被关闭时清空资源
   win = null
  })
  // 加载网页
  win.loadURL(modalPath)
  // 显示窗口
  win.show()
 }
 render() {
  return (
   <p>
    <h1>Page Index</h1>
    <button onClick={this.handleBtnClick}>Open Page Login</button>
   </p>
  )
 }
}
render(<App/>, window.document.getElementById(&#39;app&#39;));
登入後複製

其中最關鍵的部分在於在按鈕點擊事件裡透過electron 庫裡提供的API 去新打開一個窗口,並加載網頁文件所在的地址。

頁面部分的程式碼已經修改完成,接下來修改建置方面的程式碼。這裡建構需要做到以下幾點:

建構出2個可在瀏覽器裡運行的網頁,分別對應2個視窗的介面;

  1. 由於在網頁的JavaScript 程式碼裡可能會有呼叫Node.js 原生模組或electron 模組,也就是輸出的程式碼依賴這些模組。但由於這些模組都是內建支援的,建置出的程式碼不能把這些模組打包進去。

  2. 要完成上述要求非常簡單,因為 Webpack 內建了對 Electron 的支援。只需要為Webpack 設定檔加上一行程式碼即可,如下:

target: &#39;electron-renderer&#39;,
登入後複製

這句設定曾在2-7其它設定項-Target中提到,意思是指讓Webpack建構出用於Electron 渲染流程用的JavaScript 程式碼,也就是這2個視窗所需的網頁程式碼。

以上修改都完成後重新執行 Webpack 構建,對應的網頁所需的程式碼都輸出到了專案根目錄下的 dist 目錄裡。

為了以Electron 應用程式的形式運行,還需要安裝新依賴:

# 安装 Electron 执行环境到项目中
npm i -D electron
登入後複製

安裝成功後在專案目錄下執行electron . 你就能成功看到啟動的桌面應用了,效果如圖:

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

vue springboot如何實作單一登入跨網域問題(詳細教學)

#

在vue中scroller返回頁面並且記住滾動位置如何實現

如何看待vue中的深複製

##在JavaScript中如何實作讀取和寫入cookie

在微信小程式中如何實作多檔案下載#

以上是在Webpack中如何建構Electron應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在iPhone中撤銷從主畫面中刪除 如何在iPhone中撤銷從主畫面中刪除 Apr 17, 2024 pm 07:37 PM

從主畫面中刪除了重要內容並試圖將其取回?您可以透過多種方式將應用程式圖示放回螢幕。我們已經討論了您可以遵循的所有方法,並將應用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的,有幾種方法可以在iPhone上恢復此變更。方法1–替換應用程式庫中的應用程式圖示您可以直接從應用程式庫將應用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應用程式庫中的所有應用程式。步驟2–找到您先前刪除的應用程式圖示。步驟3–只需將應用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應用程式圖

PHP中箭頭符號的作用及實作應用 PHP中箭頭符號的作用及實作應用 Mar 22, 2024 am 11:30 AM

PHP中箭頭符號的作用及實踐應用在PHP中,箭頭符號(-&gt;)通常用於存取物件的屬性和方法。物件是PHP中物件導向程式設計(OOP)的基本概念之一,在實際開發中,箭頭符號在操作物件時發揮重要作用。本文將介紹箭頭符號的作用以及實踐應用,並提供具體的程式碼範例來幫助讀者更好地理解。一、箭頭符號的作用存取物件的屬性箭頭符號可以用來存取物件的屬性。當我們實例化一個對

從入門到精通:探索Linux tee命令的各種應用場景 從入門到精通:探索Linux tee命令的各種應用場景 Mar 20, 2024 am 10:00 AM

Linuxtee命令是一個非常有用的命令列工具,它可以在不影響已有輸出的情況下,將輸出寫入檔案或將輸出送到另一個命令。在本文中,我們將深入探索Linuxtee命令的各種應用場景,從入門到精通。 1.基本用法首先,我們來看看tee指令的基本用法。 tee指令的語法如下:tee[OPTION]...[FILE]...該指令會從標準輸入讀取數據,並將數據

探索Go語言的優勢及應用場景 探索Go語言的優勢及應用場景 Mar 27, 2024 pm 03:48 PM

Go語言是一種由Google開發的開源程式語言,於2007年首次發布。它被設計成一種簡單易學、高效、並發性強的語言,受到越來越多開發者的青睞。本文將探討Go語言的優勢,並介紹一些適合Go語言的應用場景,同時給出具體的程式碼範例。優勢並發性強:Go語言內建支援輕量級執行緒-goroutine,能夠輕鬆實現並發程式設計。透過使用go關鍵字就可以啟動goroutin

Linux在雲端運算領域的廣泛應用 Linux在雲端運算領域的廣泛應用 Mar 20, 2024 pm 04:51 PM

Linux在雲端運算領域的廣泛應用隨著雲端運算技術的不斷發展和普及,Linux作為一種開源作業系統在雲端運算領域中發揮重要作用。由於其穩定性、安全性和靈活性,Linux系統被廣泛應用於各種雲端運算平台和服務中,為雲端運算技術的發展提供了堅實的基礎。本文將介紹Linux在雲端運算領域的廣泛應用,並給出具體的程式碼範例。一、Linux在雲端運算平台中的應用虛擬化技術虛擬化技術

理解MySQL時間戳記:功能、特性與應用場景 理解MySQL時間戳記:功能、特性與應用場景 Mar 15, 2024 pm 04:36 PM

MySQL時間戳記是十分重要的資料類型,它可以儲存日期、時間或日期加時間。在實際的開發過程中,合理地使用時間戳記可以提高資料庫操作的效率,並且方便進行時間相關的查詢和計算。本文將從MySQL時間戳記的功能、功能和應用場景等面向展開探討,並結合具體的程式碼範例來講解。一、MySQL時間戳記的功能與特性MySQL中有兩種類型的時間戳,一種是TIMESTAMP

探討Golang中宏的概念與應用 探討Golang中宏的概念與應用 Mar 05, 2024 pm 10:00 PM

在Golang中,巨集(Macro)是一種高階程式技術,它可以幫助程式設計師簡化程式碼結構並提高程式碼的可維護性。宏是一種原始程式碼層級的文字替換機制,可以在編譯過程中將宏程式碼片段替換為實際程式碼片段。在本文中,我們將探討Golang中巨集的概念和應用,並提供具體的程式碼範例。一、宏的概念在Golang中,宏並不是原生支援的特性,因為Golang的設計初衷是保持語言的簡潔和清晰

蘋果關閉運行的應用程式的方法教程 蘋果關閉運行的應用程式的方法教程 Mar 22, 2024 pm 10:00 PM

1.首先我們點選小白點。 2、點選設備。 3、點擊更多。 4.點擊應用程式切換器。 5、將應用程式後台進行關閉即可。

See all articles