搜索
首页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
如何自动切换特定应用程序的iPhone方向锁定如何自动切换特定应用程序的iPhone方向锁定Jun 06, 2023 am 08:22 AM

在iOS中,当您将iPhone从纵向旋转到横向时,许多App会显示不同的视图。根据应用程序及其使用方式,这种行为并不总是可取的,这就是Apple在“控制中心”中包含方向锁定选项的原因。但是,某些应用程序在禁用方向锁定的情况下工作得更有用-想想YouTube或照片应用程序,将设备旋转到横向可以提供更好的全屏观看体验。如果您倾向于保持锁定状态,则必须在每次打开这些类型的应用程序时在“控制中心”中禁用它以获得全屏体验。然后,当您关闭应用程序时,您必须记住重新打开方向锁定,这并不理想。幸运的是,您可以创

在虚拟 Windows 11 桌面上应用自定义壁纸的简单技巧在虚拟 Windows 11 桌面上应用自定义壁纸的简单技巧May 02, 2023 pm 02:01 PM

如果您每天都使用虚拟桌面,那么我们有好消息要告诉您!在Windows10InsiderBuilds上进行多次测试后,在虚拟桌面上应用自定义壁纸的功能现在已成为Windows11的一部分。虽然现在,在Windows10上,您可以打开多个桌面,但不可能在每个桌面上使用不同的壁纸。随着下周第一个Windows11InsiderBuild版本的发布,您将能够轻松地做到这一点。通常,虚拟桌面用于特定的应用程序和操作,并且大部分时间用于保持事物井井有条。但是,如果您还想使用自定义壁纸个性化

Go语言中的RPC框架原理与应用Go语言中的RPC框架原理与应用Jun 01, 2023 pm 03:01 PM

一、RPC框架的概念在分布式系统中,常常需要在不同的服务端和客户端之间传递数据,RPC(RemoteProcedureCall)框架是一种常用的技术手段。RPC框架允许应用程序通过远程消息传递调用另一个执行环境的函数或方法,从而使程序能够在不同的计算机上运行。目前市面上有很多RPC框架,如Google的gRPC、Thrift、Hessian等,本文主要介

在Go语言中使用SQLite和Electron构建桌面应用程序的最佳实践在Go语言中使用SQLite和Electron构建桌面应用程序的最佳实践Jun 17, 2023 pm 12:23 PM

随着桌面应用程序的普及,越来越多的开发者开始考虑使用Go语言来构建他们的应用程序。Go语言作为一种快速、高效、且轻量级的编程语言,特别适合构建桌面应用程序。本文将介绍如何在Go语言中使用SQLite和Electron构建桌面应用程序的最佳实践。SQLiteSQLite是一种轻型的嵌入式关系型数据库,它的数据存储在单个磁盘文件中。它是一种开源软件,由D.Ri

基于对抗梯度的探索模型及其在点击预估中的应用基于对抗梯度的探索模型及其在点击预估中的应用Apr 13, 2023 pm 11:34 PM

1. 摘要排序模型在广告、推荐和搜索系统中起到了至关重要的作用。在排序模块中,点击率预估技术又是重中之重。目前工业界的点击率预估技术大多采用深度学习算法,基于数据驱动来训练深度神经网络,然而数据驱动带来的相应问题是推荐系统中的新进项目会存在冷启动问题。探索与利用(Exploration-Exploitation,E&amp;E)方法通常用于处理大规模在线推荐系统中的数据循环问题。过去的研究通常认为模型预估不确定度高意味着潜在收益也较高,因此大部分研究文献聚焦到对不确定度的估计上。对于采用

AI人必看!外媒总结最佳AI应用,你用过几个?AI人必看!外媒总结最佳AI应用,你用过几个?May 27, 2023 pm 07:42 PM

人工智能是一种有前途的技术,在许多领域都变得不可或缺。它集成到一系列应用程序和软件中,以显著提高生产力。对于许多专家来说,最能掌握人工智能工作方式的公司和人员无疑将成为明天世界的领导者。然后,重要的是要识别这些工具并控制它们的工作方式。目前,人工智能市场已经拥有许多技术,这些技术具有非常有趣且特殊的特征。对此,国外媒体评选出了2023年25个最好的人工智能产品或应用。1.ChatGPTChatGPT聊天由美国人工智能公司OPENAI开发,现在被视为人工智能革命的引擎。它确实是一个强大的工具,能够

她用10年日记训练GPT-3,对话童年的自己,网友:AI最治愈的应用她用10年日记训练GPT-3,对话童年的自己,网友:AI最治愈的应用Apr 12, 2023 pm 04:25 PM

“这是我目前听过关于AI最好、最治愈的一个应用。”到底是什么应用,能让网友给出如此高度的评价?原来,一个脑洞大开的网友Michelle,用GPT-3造了一个栩栩如生的“童年Michelle”。然后她和童年的自己聊起了天,对方甚至还写来一封信。“童年Michelle”的“学习资料”也很有意思——是Michelle本人的日记,而且是连续十几年,几乎每天都写的那种。日记内容中有她的快乐和梦想,也有恐惧和抱怨;还有很多小秘密,包括和Crush聊天时紧张到眩晕…(不爱写日记的我真的给跪了……)厚厚一叠日记

浅析:ChatGPT应用的底层原理浅析:ChatGPT应用的底层原理Apr 13, 2023 am 08:37 AM

ChatGPT 无疑是最近网络中最靓的仔,小汪哥通过这段时间的使用,加上对一些资料的查阅,了解了一些背后的原理,试图讲解一下ChatGPT应用的底层原理。如果有不正确的地方,欢迎指正。阅读本文可能为会你解答以下问题:为什么有的ChatGPT 收费,有的不收费?为什么ChatGPT是一个字一个字地回答的?为什么中文问题的答案有时候让人啼笑皆非?为什么你问它今天是几号,它的回答是过去的某个时间?为什么有的问题会拒绝回答?“ChatGPT 国内版” 运行原理随着ChatGPT的爆火,出现了很多国内版,

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。