您好,欢迎来到养宠指南。
搜索
您的当前位置:首页

Webpack如何构建Electron应用

2022-06-15 来源:养宠指南
摘要
本篇文章主要介绍了Webpack实战之构建 Electron 应用,现在分享给大家,也给大家做个参考。Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互。 当你在 Electro

这次给大家带来Webpack如何构建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('app'));

其中最关键的部分在于在按钮点击事件里通过 electron 库里提供的 API 去新打开一个窗口,并加载网页文件所在的地址。

页面部分的代码已经修改完成,接下来修改构建方面的代码。 这里构建需要做到以下几点:

构建出2个可在浏览器里运行的网页,分别对应2个窗口的界面;

  1. 由于在网页的 JavaScript 代码里可能会有调用 Node.js 原生模块或者 electron 模块,也就是输出的代码依赖这些模块。但由于这些模块都是内置支持的,构建出的代码不能把这些模块打包进去。

  2. 要完成以上要求非常简单,因为 Webpack 内置了对 Electron 的支持。 只需要给 Webpack 配置文件加上一行代码即可,如下:
target: 'electron-renderer',

这句配置曾在2-7其它配置项-Target中提到,意思是指让 Webpack 构建出用于 Electron 渲染进程用的 JavaScript 代码,也就是这2个窗口需要的网页代码。

以上修改都完成后重新执行 Webpack 构建,对应的网页需要的代码都输出到了项目根目录下的 dist 目录里。

为了以 Electron 应用的形式运行,还需要安装新依赖:

# 安装 Electron 执行环境到项目中npm i -D electron

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Angular实现可添加删除与计算总金额效果插件

Bootstrap模态框多次弹出提交BUG

小编还为您整理了以下内容,可能对您也有帮助:

在Webpack中如何构建Electron应用

本篇文章主要介绍了Webpack实战之构建 Electron 应用,现在分享给大家,也给大家做个参考。

Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。

Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互。 当你在 Electron 应用中的一个窗口操作时,实际上是在操作一个网页。当你的操作需要通过操作系统去完成时,网页会通过 Node.js 去和操作系统交互。

采用这种方式开发桌面端应用的优点有:

降低开发门槛,只需掌握网页开发技术和 Node.js 即可,大量的 Web 开发技术和现成库可以复用于 Electron;

由于 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('app'));其中最关键的部分在于在按钮点击事件里通过 electron 库里提供的 API 去新打开一个窗口,并加载网页文件所在的地址。

页面部分的代码已经修改完成,接下来修改构建方面的代码。 这里构建需要做到以下几点:

构建出2个可在浏览器里运行的网页,分别对应2个窗口的界面;

由于在网页的 JavaScript 代码里可能会有调用 Node.js 原生模块或者 electron 模块,也就是输出的代码依赖这些模块。但由于这些模块都是内置支持的,构建出的代码不能把这些模块打包进去。

要完成以上要求非常简单,因为 Webpack 内置了对 Electron 的支持。 只需要给 Webpack 配置文件加上一行代码即可,如下:

target: 'electron-renderer',这句配置曾在2-7其它配置项-Target中提到,意思是指让 Webpack 构建出用于 Electron 渲染进程用的 JavaScript 代码,也就是这2个窗口需要的网页代码。

以上修改都完成后重新执行 Webpack 构建,对应的网页需要的代码都输出到了项目根目录下的 dist 目录里。

为了以 Electron 应用的形式运行,还需要安装新依赖:

# 安装 Electron 执行环境到项目中

npm i -D electron安装成功后在项目目录下执行 electron . 你就能成功看到启动的桌面应用了,效果如图:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

vue+springboot如何实现单点登录跨域问题(详细教程)

在vue中scroller返回页面并且记住滚动位置如何实现

如何看待vue中的深复制

在JavaScript中如何实现读取和写入cookie

在微信小程序中如何实现多文件下载

electron打包后,运行时为何离不开resources文件夹下的源文件?

可以使用webpack来打包electron的源代码,避免在运行时需要访问原始的源文件。

1. 在项目根目录下创建一个webpack配置文件,命名为webpack.config.js,并添加以下代码:

const path = require('path');

mole.exports = {

entry: './resources/app/main.js', // 入口文件

output: {

path: path.resolve(__dirname, 'dist'), // 打包输出目录

filename: 'bundle.js' // 打包输出文件名

}

};

2. 在package.json文件中添加一个脚本命令来运行webpack:

"scripts": {

"build": "webpack"

}

3. 运行npm run build命令来运行webpack,它将会根据webpack.config.js文件中的配置打包源代码并输出到dist目录下。

4. 修改electron的主进程入口文件为打包后的文件路径,例如修改package.json中的main字段为:"main": "dist/bundle.js"。

5. 运行electron应用程序时,它将会加载dist/bundle.js文件而不是原始的源文件,这样就不需要访问源文件了。

通过webpack打包electron的源代码,可以更方便地管理和更新应用程序的源文件,同时避免了在运行时需要访问源文件的问题。

Electron跨平台桌面应用程序开发框架入门简介及学习笔记

Electron是什么及它的优势(摘自网络)Electron简介Electron是是GitHub开发的一个开源框架。它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。

Electron可以用于构建具有html、css、JAVAScript的跨平台桌面应用程序,它通过将Chromium和node.js合同一个运行的环境中来实现这一点,应用程序可以打包到mac、windows和linux系统

Electron为前端技术人员利用web前端技术开发桌面应用带来了可能,开发人员可利用已经掌握的前端技术如Html、CSS、JavaScript,以及结合一些前端技术框架:Vue、Angular、React、webpack,加之浏览器渲染引擎、Electron封装的系统API快速实现一款桌面应用的开发,Electron做了大部分复杂的工作,开发人员只需要专注在核心业务和前端技术本身。同时,通过一定的优化,Electron可以做到很好的体验。

支持平台目前支持Electron的平台有OSX、Windows、Linux:

OSX:对于OSX系统仅有64位的二进制文档,支持的最低版本是OSX10.8。Windows:仅支持Windows7及其以后的版本,之前的版本中是不能工作的。对于Windows提供x86和amd64(x64)版本的二进制文件。需要注意的是ARM版本的Windows目前尚不支持。Linux:预编译的ia32(i686)和x64(amd64)版本Electron二进制文件都是在Ubuntu12.04下编译的,arm版的二进制文件是在ARMv7(硬浮点ABI与DebianWheezy版本的NEON)下完成的。预编译二进制文件是否能够运行,取决于其中是否包括了编译平台链接的库,所以只有Ubuntu12.04可以保证正常工作,但是Ubuntu12.04+、Fedora21、Debian8等平台也被证实可以运行Electron的预编译版。Electron的优缺点Electron的优点如下所示:

部署升级方便,用户可以通过浏览器就可以访问。HTML/JS/CSS编写,方便且高效。可支持Windows、Linux、Mac系统。可让js前端的生态融入进来,让开发员有大量的模块和资源可用(类似python第三方库、vscode插件)Electron的缺点如下所示:

对于开发者而言:浏览器适配比较繁琐。有些应用必须指定浏览器版本(比如OCX必须是IE内核,H5必须是较高版本),必须打开浏览器,输入一长串URL地址。打包体积大:一个小应用打包下来可能就需要几十兆,不过目前磁盘存储已经不是什么大问题,随着网路环境越来越好,磁盘容积也越来越大,这个问题给用户带来的负担越来越不明显,几乎可以忽略。占用内存较在:一般50M起步,多数要100-400M,新版不知道有否优化。毕竟开的是浏览器,有点重。性能有延迟:在100多ms以上,没有Winform那么快。开发有一定复杂度:除需要掌握必要的前端知识外,基于Electron开发仍需要了解跨进程通信的一些知识点,进程上的一些问题往往还是容易给开发者带来一定的困惑,有一定的学习成本,但是通过系统学习还是容易攻克的。版本更新快:它是基于Chromium的,所以Electron跟随Chromium的版本发布节奏,版本迭代较快,这可能会导致一些兼容问题,但幸运的是目前Electron的核心功能一直都算是很稳定的。安全问题:Electron提供给了开发人员足够的便利,同时也有一些具有风险的开关,开发者需要在开发中妥善处理,避免对应用客户带来安全隐患,开发人员需要关注安全问题。对于传统C/S桌面客户端开发者:对web应用不习惯,尤其是使用专业c#Delphi软件,大多数会觉得web应用没有桌面应用方便或强大。Electron开发桌面程序需要的前端技术Electron是基于Chromium和Node.js实现的,所以开发人员所需要使用到的前端技术主要包括以下方面:

1、Html、CSS、JavaScript、ES6

2、前端开发工具Vue、Angular、React等的一种

3、其他网络、缓存、通讯、系统、跟踪等前端技术

4、对Vscode编辑器的熟悉

基于Electron实现的软件Electron现已被多个开源应用软件所使用,其中被广大所熟知和使用的Atom、MongoDB桌面版管理工具、Skype桌面版、WhatsApp桌面版、HTTP网络测试工具Postman、接口管理软件ApiFox、WhatsAp、Teams、支付宝小程序IDE、开发人员熟知的VisualStudioCode编辑器就是基于Electron实现的。案例将来还会更多。

一、搭Electron1、使用克隆库来搭建1)安装git

要先安装git,安装git,在任何目录右键就有相关的命令文件资源管理器直接敲cmd随时在当前目录下克隆来创建项目

2)克隆项目

然后gitclonehttps://github.com/electron/electron-quick-start

3)安装依赖

克隆后再:cdelectron-quick-start

安装依赖并运行(主要是针对package.json里面的DevDependencies这段里面的依赖配置)npminstall&&npmstart或者直接cnpmi(一定要先进入到项目目录,是针对当前文件夹来的)也可直接下载DownloadZip源码包下来再解压到你指定的文件夹下面

4)运行项目

运行:在package.json里Scripts段里有一个start它模拟"electron."来运行相当于把"electron."封装成start这个命令了。所以可以通过:npmstart/cnpmstart来运行(npm是node.js里的)

可看到控制台里显示实际执行的是electron.node_moles:各种依赖库模块Ct+C结束运行Preload.js是在main.js讲程创建window时加载的写在webPreferences里监听了DOMContentLoaded事件使用replacetext来替换index.html按指定ID找到几个版本文本renderer.js渲染进程(与index.html一起组成渲染进程index.html引用了<scriptsrc="./renderer.js"></script>

2、使用electron-forge(锻造)脚手架来搭建项目1)npx是node.js新版支持的命令

npxcreate-electron-appmy-new-app(推荐用这个)或yarncreate-electron-appmy-new-app

npx相当于多步传统的方式npminstall-g@electron-forge/cli(安装脚手架)或cnpm安装electron-forgeinitmy-new-appcdmy-new-appnpmstart

但npx使用的是npm可能下载慢或下载不了,可考虑使用cnpmnpx运行时控制台可看到简洁的安装过程,最后一步是安装相关的依赖

2)使用Vscode打开项目

项目下载或克隆后,使用Vscode编辑器来打开生成以下文件会放在src目录下:index.js主进程index.html渲染进程index.cssindex.html用到的css

3)运行项目

打开package.json在scripts节中可看到"start":"electron-forgestart",所以你可以使用npmstart来运行同理,可使用npmmake来生成exe文件

4)关闭DevTools

运行可看到打开了调试工具这个是在index.js主进程的createWindow最后使用了一句mainWindow.webContents.openDevTools();

5)渲染进程重载网页

改完index.html或index.css后,可以不中止,直接在view-reload重新加载网页

3、手工写代码来搭建Electron项目,更好理解代码1)手工创建新项目

先创建项目目录,不能有空格,不能有中文在vscode打开这个目录

2)新建3个文件index.htmlindex.cssindex.js

在index.html文件中,输入html:5可产生一个基本的html框架或!+Tab键也可以(必须是html文件中,js文件中不行)输入div或html+tab(不用<div>也可)再新建main.js右键在文件资源管理器打开,再在上面输入cmd就会自动到达这个目录的命令行输入npminit--yes回车,它就会在当前目录下生成package.json文件它会自动找main.js入口,并配置好入口

也可手工再编辑修改package.json的内容

3)在当前项目安装一下Electron(开发环境)

虽然我们全局已安装了electron,但输入electron.没有代码自动补齐或提示需要在Vscode再用cnpmielectron--save-dev再安装一次,把它写到package.json中的devDependencies中依赖里这样再敲electron.代码就会自动提示了所以建议在项目里面安装一次这个模块

4)Requireelectron

再引用const{app,BroserWindow}=require("electron")

5)app添加监听ready事件

再监听应用的启动事件。需要事件名及回调函数

app.on("ready",()=>{constmainWindows=newBrowserWindows({width:600,height:400})mainWindow.loadFile(path.join(dirname,'index.html'));//path.joindirname都是node.js的

electron可直接引用node.js里面的东西

在前面要先引用constpath=require('path');//mainWindow.loadUrl('https://github.com');}

二、开发工具中配置Eslint(js代码检测工具)1、安装Eslint插件ESLint(有时发音为EasyLint)是一种静态代码分析工具,用于识别JavaScript代码中发现的有问题的模式,可配置

安装此插件后,代码敲错,会有提示安装:cnpminstall-geslint(全局安装不需要注重目录)

2、项目中配置Eslint插件cd到项目的目录终端下运行:eslint--init1)选择3种方式,只查找问题,....,第3种可强制修改你的格式(也可右键格式化你的代码shift+alt+f)2)再问你是在javascriptmoles(import/export)还是CommonJS(require/exports)使用,选择这个(node.js使用是require)

3)再问你是在ReactVue.jsNoneofthese(选择这个)

4)然后问你是否使用TypeScript,选择No

会生成一个.eslintrc.js配置文件(其实就是我们刚才选择的配置)

再回到刚才错误代码,就有提示了就是你虽然全局安装了,但需要用eslint--init在当前项目中使用(其实就是生成一个.eslintrc.js配置文件)

5)使用node来运行js文件随便创建一个文件,内容为console.log(process.platform)在终端输入:nodetest.js就可运行得到是win32(windows平台)

三、electron的运行流程运行electron项目是执行命令:electron.

1、它先找项目中的package.json中的入口找到"main":"main.js",加载这个主进程它实例化BrowserWindow,也就创建了一个渲染进程它再加载本地的index.html文件(htmlcss)展示给用户这个应用的页面再使用IPC去完成任务并从主进程得到信息

2、主进程与渲染进程一个electron应用只有一个主进程,但可以有多个渲染进程,每个Electron中的web页面运行在它自己的渲染进程里

3、进程与线程的区别进程(Process):是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调试的基本单位,是操作系统结构的基础线程(Thread):在一一个程序里的一个执行路线就叫做线程(thread),更准确的定义是:线程是”一个进程内部的控制序列“线程和进程:一个程序至少有一个进程,一个进程至少有一个线程

4、可在newBrowserWindow时增加属性parent:设置窗体的父窗体

5、在主进程和渲染进程里修改内容怎么刷新在主进程里修改东西,必须重新运行electron.

在渲染进程里改东西,可以使用网页-View-ForceReload来刷新

6、如何在主进程和渲染进程中使用nodejs模块及NodeJs第三方模块主进程中无需任何配置就可使用Nodejs模块

constfs=require("fs")主进程打印console.log需要在终端里看,而不是在浏览器时里的开发工具里的console里看(DevTools)

渲染进程:第一种方法:preload加载的可直接使用在newBrowserWindow(查看官网它的详细参数)时使用webPreferences:{preload:path.join(__dirname,"renderer/preload.js")BrowserWindow通过preload.js可直接使用nodejs模块

第二种方法:不在preload加载的如果要在index.html引用Nodejs的模块如index.html里加了<scriptsrc="rederer.js"></script>在rederer.js中如果使用require就会出错。必须在main.js中的创建这个渲染进程newBrowserWindow(对应那个index.html)加上下面配置webPreferences:{nodeIntegration:true,contextIsolation:false

}

7、加个按钮来显示调用文件的内容1、在index.html增加个按钮<buttonid="opednFile">打开</button>

2、再定义<divid="content">//将来最好改成textArea,代码显示更美观一些

3、再为div增加个样式

4、在renderer.js中要监听按钮单击事件

window.onload=()=>{contentDom=document.querySelector('#openFile')openFileDom=document.querySelector('#content')openFileDom.onclick=()=>{alert('test')constfs=require('fso')fs.readFile('package.json',(err,data)=>{if(err){console.log(err)return}console.log(data.toString())contentDom.innerHTML=data.toString()})}}四、调用h5里的拖放Api及Nodejs实现文件拖放1、在窗体的onload设置ondragenterondrop等事件window.onload=()=>{varcontentDom=document.querySelector('#content')//=function()可改成箭头函数=()=>//阻止这些事件的默认行为contentDom.ondragenter=contentDom.ondragover=contentDom.ondragleave=()=>{returnfalse}contentDom.ondrop=(e)=>{//console.log(e)console.log(e.dataTransfer.files[0].path)}}2、electron进程图(摘自kevin5979)主进程什么是electron主进程?electron运行package.json的main脚本的进程被称作主进程electron主进程的相关/作用每个electron只有一个主进程用于管理原生GUI,典型的窗口(BrowserWindow、Tray、Dock、Menu)主进程用于创建渲染进程主进程控制应用的生命周期简单的说,electron项目的主进程只有一个,主进程的执行代码需要写到main.js中,起到统筹全局的作用

渲染进程什么是electron渲染进程?electron展示web页面的进程被称作主进程electron主进程的相关/作用通过Node.js、Electron提供的API与系统底层打交道一个electron可以有多个渲染进程主进程APIapp:控制应用的事件生命周期autoUpdater:自动更新BrowserView:创建和控制视图BrowserWindow:创建和控制窗口contentTracing:跟踪并确定性能问题dialog:创建和控制本机系统对话框globalShortcut:监听系统快捷键inAppPurchase:(MAC专用)MacAppStore的应用内购买ipcMain:从主模块到渲染模块(ipcRenderer)的异步通信Menu:创建远程应用以及上下文菜单MenuItem:在菜单中添加菜单项net:发出HTTP或HTTPS请求netLog:记录网络事件Notification:创建桌面通知powerMonitor:监视电源状态powerSaveBlocker:组织系统自动进入省电模式protocol:注册自定义协议并拦截基于协议的请求screen:检索有关屏幕大小、显示器、光标位置等的信息session:管理浏览器会话、cookie、缓存、代理设置等systemPreferences:获取系统配置信息TouchBar:(MAC专用)配置TouchBar布局Tray:添加图标和上下文菜单到系统通知区webContents:渲染以及控制web页面渲染进程APIipcRenderer:从渲染器进程到主进程的异步通信remote:在渲染进程中使用主进程模块webFrame:自定义渲染当前网页desktopCapturer:通过[navigator.mediaDevices.getUserMedia]API,可以访问那些用于从桌面上捕获音频和视频的媒体源信息通用APIclipboard:在系统剪贴板上执行复制和粘贴操作crashReporter:将崩溃日志提交给远程服务器nativeImage:使用PNG或JPG文件创建托盘、dock和应用程序图标shell:使用默认应用程序管理文件和url3、主进程、渲染进程可用模块及

Electron跨平台桌面应用程序开发框架入门简介及学习笔记

Electron是什么及它的优势(摘自网络)Electron简介Electron是是GitHub开发的一个开源框架。它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。

Electron可以用于构建具有html、css、JAVAScript的跨平台桌面应用程序,它通过将Chromium和node.js合同一个运行的环境中来实现这一点,应用程序可以打包到mac、windows和linux系统

Electron为前端技术人员利用web前端技术开发桌面应用带来了可能,开发人员可利用已经掌握的前端技术如Html、CSS、JavaScript,以及结合一些前端技术框架:Vue、Angular、React、webpack,加之浏览器渲染引擎、Electron封装的系统API快速实现一款桌面应用的开发,Electron做了大部分复杂的工作,开发人员只需要专注在核心业务和前端技术本身。同时,通过一定的优化,Electron可以做到很好的体验。

支持平台目前支持Electron的平台有OSX、Windows、Linux:

OSX:对于OSX系统仅有64位的二进制文档,支持的最低版本是OSX10.8。Windows:仅支持Windows7及其以后的版本,之前的版本中是不能工作的。对于Windows提供x86和amd64(x64)版本的二进制文件。需要注意的是ARM版本的Windows目前尚不支持。Linux:预编译的ia32(i686)和x64(amd64)版本Electron二进制文件都是在Ubuntu12.04下编译的,arm版的二进制文件是在ARMv7(硬浮点ABI与DebianWheezy版本的NEON)下完成的。预编译二进制文件是否能够运行,取决于其中是否包括了编译平台链接的库,所以只有Ubuntu12.04可以保证正常工作,但是Ubuntu12.04+、Fedora21、Debian8等平台也被证实可以运行Electron的预编译版。Electron的优缺点Electron的优点如下所示:

部署升级方便,用户可以通过浏览器就可以访问。HTML/JS/CSS编写,方便且高效。可支持Windows、Linux、Mac系统。可让js前端的生态融入进来,让开发员有大量的模块和资源可用(类似python第三方库、vscode插件)Electron的缺点如下所示:

对于开发者而言:浏览器适配比较繁琐。有些应用必须指定浏览器版本(比如OCX必须是IE内核,H5必须是较高版本),必须打开浏览器,输入一长串URL地址。打包体积大:一个小应用打包下来可能就需要几十兆,不过目前磁盘存储已经不是什么大问题,随着网路环境越来越好,磁盘容积也越来越大,这个问题给用户带来的负担越来越不明显,几乎可以忽略。占用内存较在:一般50M起步,多数要100-400M,新版不知道有否优化。毕竟开的是浏览器,有点重。性能有延迟:在100多ms以上,没有Winform那么快。开发有一定复杂度:除需要掌握必要的前端知识外,基于Electron开发仍需要了解跨进程通信的一些知识点,进程上的一些问题往往还是容易给开发者带来一定的困惑,有一定的学习成本,但是通过系统学习还是容易攻克的。版本更新快:它是基于Chromium的,所以Electron跟随Chromium的版本发布节奏,版本迭代较快,这可能会导致一些兼容问题,但幸运的是目前Electron的核心功能一直都算是很稳定的。安全问题:Electron提供给了开发人员足够的便利,同时也有一些具有风险的开关,开发者需要在开发中妥善处理,避免对应用客户带来安全隐患,开发人员需要关注安全问题。对于传统C/S桌面客户端开发者:对web应用不习惯,尤其是使用专业c#Delphi软件,大多数会觉得web应用没有桌面应用方便或强大。Electron开发桌面程序需要的前端技术Electron是基于Chromium和Node.js实现的,所以开发人员所需要使用到的前端技术主要包括以下方面:

1、Html、CSS、JavaScript、ES6

2、前端开发工具Vue、Angular、React等的一种

3、其他网络、缓存、通讯、系统、跟踪等前端技术

4、对Vscode编辑器的熟悉

基于Electron实现的软件Electron现已被多个开源应用软件所使用,其中被广大所熟知和使用的Atom、MongoDB桌面版管理工具、Skype桌面版、WhatsApp桌面版、HTTP网络测试工具Postman、接口管理软件ApiFox、WhatsAp、Teams、支付宝小程序IDE、开发人员熟知的VisualStudioCode编辑器就是基于Electron实现的。案例将来还会更多。

一、搭Electron1、使用克隆库来搭建1)安装git

要先安装git,安装git,在任何目录右键就有相关的命令文件资源管理器直接敲cmd随时在当前目录下克隆来创建项目

2)克隆项目

然后gitclonehttps://github.com/electron/electron-quick-start

3)安装依赖

克隆后再:cdelectron-quick-start

安装依赖并运行(主要是针对package.json里面的DevDependencies这段里面的依赖配置)npminstall&&npmstart或者直接cnpmi(一定要先进入到项目目录,是针对当前文件夹来的)也可直接下载DownloadZip源码包下来再解压到你指定的文件夹下面

4)运行项目

运行:在package.json里Scripts段里有一个start它模拟"electron."来运行相当于把"electron."封装成start这个命令了。所以可以通过:npmstart/cnpmstart来运行(npm是node.js里的)

可看到控制台里显示实际执行的是electron.node_moles:各种依赖库模块Ct+C结束运行Preload.js是在main.js讲程创建window时加载的写在webPreferences里监听了DOMContentLoaded事件使用replacetext来替换index.html按指定ID找到几个版本文本renderer.js渲染进程(与index.html一起组成渲染进程index.html引用了<scriptsrc="./renderer.js"></script>

2、使用electron-forge(锻造)脚手架来搭建项目1)npx是node.js新版支持的命令

npxcreate-electron-appmy-new-app(推荐用这个)或yarncreate-electron-appmy-new-app

npx相当于多步传统的方式npminstall-g@electron-forge/cli(安装脚手架)或cnpm安装electron-forgeinitmy-new-appcdmy-new-appnpmstart

但npx使用的是npm可能下载慢或下载不了,可考虑使用cnpmnpx运行时控制台可看到简洁的安装过程,最后一步是安装相关的依赖

2)使用Vscode打开项目

项目下载或克隆后,使用Vscode编辑器来打开生成以下文件会放在src目录下:index.js主进程index.html渲染进程index.cssindex.html用到的css

3)运行项目

打开package.json在scripts节中可看到"start":"electron-forgestart",所以你可以使用npmstart来运行同理,可使用npmmake来生成exe文件

4)关闭DevTools

运行可看到打开了调试工具这个是在index.js主进程的createWindow最后使用了一句mainWindow.webContents.openDevTools();

5)渲染进程重载网页

改完index.html或index.css后,可以不中止,直接在view-reload重新加载网页

3、手工写代码来搭建Electron项目,更好理解代码1)手工创建新项目

先创建项目目录,不能有空格,不能有中文在vscode打开这个目录

2)新建3个文件index.htmlindex.cssindex.js

在index.html文件中,输入html:5可产生一个基本的html框架或!+Tab键也可以(必须是html文件中,js文件中不行)输入div或html+tab(不用<div>也可)再新建main.js右键在文件资源管理器打开,再在上面输入cmd就会自动到达这个目录的命令行输入npminit--yes回车,它就会在当前目录下生成package.json文件它会自动找main.js入口,并配置好入口

也可手工再编辑修改package.json的内容

3)在当前项目安装一下Electron(开发环境)

虽然我们全局已安装了electron,但输入electron.没有代码自动补齐或提示需要在Vscode再用cnpmielectron--save-dev再安装一次,把它写到package.json中的devDependencies中依赖里这样再敲electron.代码就会自动提示了所以建议在项目里面安装一次这个模块

4)Requireelectron

再引用const{app,BroserWindow}=require("electron")

5)app添加监听ready事件

再监听应用的启动事件。需要事件名及回调函数

app.on("ready",()=>{constmainWindows=newBrowserWindows({width:600,height:400})mainWindow.loadFile(path.join(dirname,'index.html'));//path.joindirname都是node.js的

electron可直接引用node.js里面的东西

在前面要先引用constpath=require('path');//mainWindow.loadUrl('https://github.com');}

二、开发工具中配置Eslint(js代码检测工具)1、安装Eslint插件ESLint(有时发音为EasyLint)是一种静态代码分析工具,用于识别JavaScript代码中发现的有问题的模式,可配置

安装此插件后,代码敲错,会有提示安装:cnpminstall-geslint(全局安装不需要注重目录)

2、项目中配置Eslint插件cd到项目的目录终端下运行:eslint--init1)选择3种方式,只查找问题,....,第3种可强制修改你的格式(也可右键格式化你的代码shift+alt+f)2)再问你是在javascriptmoles(import/export)还是CommonJS(require/exports)使用,选择这个(node.js使用是require)

3)再问你是在ReactVue.jsNoneofthese(选择这个)

4)然后问你是否使用TypeScript,选择No

会生成一个.eslintrc.js配置文件(其实就是我们刚才选择的配置)

再回到刚才错误代码,就有提示了就是你虽然全局安装了,但需要用eslint--init在当前项目中使用(其实就是生成一个.eslintrc.js配置文件)

5)使用node来运行js文件随便创建一个文件,内容为console.log(process.platform)在终端输入:nodetest.js就可运行得到是win32(windows平台)

三、electron的运行流程运行electron项目是执行命令:electron.

1、它先找项目中的package.json中的入口找到"main":"main.js",加载这个主进程它实例化BrowserWindow,也就创建了一个渲染进程它再加载本地的index.html文件(htmlcss)展示给用户这个应用的页面再使用IPC去完成任务并从主进程得到信息

2、主进程与渲染进程一个electron应用只有一个主进程,但可以有多个渲染进程,每个Electron中的web页面运行在它自己的渲染进程里

3、进程与线程的区别进程(Process):是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调试的基本单位,是操作系统结构的基础线程(Thread):在一一个程序里的一个执行路线就叫做线程(thread),更准确的定义是:线程是”一个进程内部的控制序列“线程和进程:一个程序至少有一个进程,一个进程至少有一个线程

4、可在newBrowserWindow时增加属性parent:设置窗体的父窗体

5、在主进程和渲染进程里修改内容怎么刷新在主进程里修改东西,必须重新运行electron.

在渲染进程里改东西,可以使用网页-View-ForceReload来刷新

6、如何在主进程和渲染进程中使用nodejs模块及NodeJs第三方模块主进程中无需任何配置就可使用Nodejs模块

constfs=require("fs")主进程打印console.log需要在终端里看,而不是在浏览器时里的开发工具里的console里看(DevTools)

渲染进程:第一种方法:preload加载的可直接使用在newBrowserWindow(查看官网它的详细参数)时使用webPreferences:{preload:path.join(__dirname,"renderer/preload.js")BrowserWindow通过preload.js可直接使用nodejs模块

第二种方法:不在preload加载的如果要在index.html引用Nodejs的模块如index.html里加了<scriptsrc="rederer.js"></script>在rederer.js中如果使用require就会出错。必须在main.js中的创建这个渲染进程newBrowserWindow(对应那个index.html)加上下面配置webPreferences:{nodeIntegration:true,contextIsolation:false

}

7、加个按钮来显示调用文件的内容1、在index.html增加个按钮<buttonid="opednFile">打开</button>

2、再定义<divid="content">//将来最好改成textArea,代码显示更美观一些

3、再为div增加个样式

4、在renderer.js中要监听按钮单击事件

window.onload=()=>{contentDom=document.querySelector('#openFile')openFileDom=document.querySelector('#content')openFileDom.onclick=()=>{alert('test')constfs=require('fso')fs.readFile('package.json',(err,data)=>{if(err){console.log(err)return}console.log(data.toString())contentDom.innerHTML=data.toString()})}}四、调用h5里的拖放Api及Nodejs实现文件拖放1、在窗体的onload设置ondragenterondrop等事件window.onload=()=>{varcontentDom=document.querySelector('#content')//=function()可改成箭头函数=()=>//阻止这些事件的默认行为contentDom.ondragenter=contentDom.ondragover=contentDom.ondragleave=()=>{returnfalse}contentDom.ondrop=(e)=>{//console.log(e)console.log(e.dataTransfer.files[0].path)}}2、electron进程图(摘自kevin5979)主进程什么是electron主进程?electron运行package.json的main脚本的进程被称作主进程electron主进程的相关/作用每个electron只有一个主进程用于管理原生GUI,典型的窗口(BrowserWindow、Tray、Dock、Menu)主进程用于创建渲染进程主进程控制应用的生命周期简单的说,electron项目的主进程只有一个,主进程的执行代码需要写到main.js中,起到统筹全局的作用

渲染进程什么是electron渲染进程?electron展示web页面的进程被称作主进程electron主进程的相关/作用通过Node.js、Electron提供的API与系统底层打交道一个electron可以有多个渲染进程主进程APIapp:控制应用的事件生命周期autoUpdater:自动更新BrowserView:创建和控制视图BrowserWindow:创建和控制窗口contentTracing:跟踪并确定性能问题dialog:创建和控制本机系统对话框globalShortcut:监听系统快捷键inAppPurchase:(MAC专用)MacAppStore的应用内购买ipcMain:从主模块到渲染模块(ipcRenderer)的异步通信Menu:创建远程应用以及上下文菜单MenuItem:在菜单中添加菜单项net:发出HTTP或HTTPS请求netLog:记录网络事件Notification:创建桌面通知powerMonitor:监视电源状态powerSaveBlocker:组织系统自动进入省电模式protocol:注册自定义协议并拦截基于协议的请求screen:检索有关屏幕大小、显示器、光标位置等的信息session:管理浏览器会话、cookie、缓存、代理设置等systemPreferences:获取系统配置信息TouchBar:(MAC专用)配置TouchBar布局Tray:添加图标和上下文菜单到系统通知区webContents:渲染以及控制web页面渲染进程APIipcRenderer:从渲染器进程到主进程的异步通信remote:在渲染进程中使用主进程模块webFrame:自定义渲染当前网页desktopCapturer:通过[navigator.mediaDevices.getUserMedia]API,可以访问那些用于从桌面上捕获音频和视频的媒体源信息通用APIclipboard:在系统剪贴板上执行复制和粘贴操作crashReporter:将崩溃日志提交给远程服务器nativeImage:使用PNG或JPG文件创建托盘、dock和应用程序图标shell:使用默认应用程序管理文件和url3、主进程、渲染进程可用模块及

如何解读 webpack 的构建流程?

Webpack 的构建流程可以分为以下几个步骤:

1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。

2. 开始编译:初始化 compiler 对象,注册所有的插件。

3. 解析模块:从入口文件开始,找到所有依赖的模块,递归处理。

4. 编译模块:使用 loader 对模块进行编译处理。

5. 输出资源:将处理后的资源输出到目标位置。

electron-ui 快速方便的打造炫酷的桌面应用

electron-ui是基于electron和electron-vue扩展出来的一套基础的应用框架,目的是为了快速的搭建炫酷的桌面应用,其实也算不上框架只是一种解决方案而已,让electron后来的开发者在少采坑的情况下搭建出相对漂亮而快速的应用

公司的有个项目使用electron搭建的,最开始只是套了个网页,后来随着应用的上线,发现这种套网页的样式比较丑陋,页面加载很不流畅,网上看了大部分的electron应用也没有找到几个比较好看的,所以自己业余时间写了这么一个东西,一来可以应用到公司产品上,而来方便以后的开发,可以直接拿来当做基础框架使用

1.采用electron-vue框架,并且把依赖升级到最新版本,例如webpack4等,直接写vue还是比较舒服的

2.优化了多窗口的加载速率,以往打开一个窗口要加载html,css,js文件后还要解析vue渲染数据等等,所以弹窗打开速度很慢,现在采用路由跳转的方式,弹窗直接变为路由跳转,所以弹窗速度秒开

3.实现了vuex的多窗口的数据同步问题,多个窗口同步store数据

4.封装了窗口间的通讯,发送和接收信息简单方便

5.制作了窗口转换的部分动画,效果上还可以

6.页面框架已经搭建好,包括header,body,footer,可以按需引入

7.制作了背景样式可以更换图片和背景色甚至字体颜色

后续功能还在开发中。。。。

各位如果喜欢的话就给个star把

electron-ui

养宠指南还为您提供以下相关内容希望对您有帮助:

Webpack如何构建Electron应用

Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览...

electron打包后,运行时为何离不开resources文件夹下的源文件?_百度知 ...

1. 在项目根目录下创建一个webpack配置文件,命名为webpack.config.js,并添加以下代码:const path = require('path');module.exports = { entry: './resources/app/main.js', // 入口文件 output: { path: path....

Electron跨平台桌面应用程序开发框架入门简介及学习笔记

Electron可以用于构建具有html、css、JAVAScript的跨平台桌面应用程序,它通过将Chromium和node.js合同一个运行的环境中来实现这一点,应用程序可以打包到mac、windows和linux系统 Electron为前端技术人员利用web前端技术开发桌面应用带来了可能,开...

2022-03-02 关于electron-vue中引入web worker的几种方法尝试

2.采用worker loader的方式引入web worker 注意:这里有个坑 测试环境按照网上的跑起来没有问题 但是打包之后始终报错误 Uncaught TypeError: Cannot read properties of undefined (reading 'webpackJsonp')//针对于这个错误搜...

怎么使用webpack构建vue.js单页应用

作为一个完整的Demo,系列文章中的完整项目,会实现一个文件上传和管理的单页面Web应用1 安装依赖包项目中使用了vue.js,webpack,gulp,还有饿了么开源的elementUI,因为使用了es2015,所以还需要引入babel将es6的js代码转换...

如何用webpack打包一个网站应用

npm install --save-dev webpack 4.我们需要一个webpack.config.js文件,记录webpack配置信息。它的配置大概这样:var webpack = require('webpack');var path = require('path');var buildPath = path.resolve(__...

使用electron中遇到的问题总结

因为前者不会被webpack编译,在渲染进程require关键字就是表示node模块的系统 渲染进程:主进程main.js:配置好重新启动前端工程会之前的错误没有了,但是出现 window.require is not a function .错误 由此看出直接使用...

如何用webpack打包一个网站应用

其中最常见的是“转换数据任务”和“执行SQL任务”--“包属性”:在DTS的设计器中选择“包”-&gt;“属性”或右键“包属性”,可以打开包属性对话框--添加“连接”--添加“任务”--1、源:源可以是源连接中的一个表、...

electron管理员权限启动后出现的问题

2、Electron-Vue打包成exe一片空白。解决方法:webpack.renderer.config.js文件中注释掉Object.keys(dependencies||{}).filter(d=&gt;。whiteListedModules.includes(d))。3、cannotfindmouldbytebuffer。解决方法:放在dependencies...

electron-ui 快速方便的打造炫酷的桌面应用

1.采用electron-vue框架,并且把依赖升级到最新版本,例如webpack4等,直接写vue还是比较舒服的 2.优化了多窗口的加载速率,以往打开一个窗口要加载html,css,js文件后还要解析vue渲染数据等等,所以弹窗打开速度很慢,现在...

上一篇:Angular中使用better-scroll插件的方法_AngularJS

下一篇:Bootstrap模态框多次弹出提交BUG

Top