详解使用webpack+electron+reactJs开发windows桌面应用

electron是一两年前挺火的一个框架

本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件

（当然听说mac上也可以用electron，不过没试过）

（没错我还在用windows，不是mac也不是linux，我是个lowB）

团队主要的技术栈是react，所以考虑用react开发，方便维护。

PS.由于项目是大半年前做的，所以一些细节可能记忆有误请见谅

几个重点：

1.想要能调试必须使用webpack打包，不能用react那些常用的打包脚手架，因为webpack打包有target: "electron-main"

2.对于不使用electron模块的项目，electron可以直接跑任何网页；对于用到electron模块的项目，如果不设置target: "electron-main"，而直接用webpack打包（或者其他的打包工具），打包工具会直接默认把electron模块一起打包进去。而electron模块里会用到node的比如fs模块，这些模块都不允许在网页上调用，因为需要直接访问电脑文件

下面开始

我们知道electron其实是有两个部分的，一个是窗体部分，一个是窗体里运行的网页项目

窗体部分通常放在根目录下，只使用main.js一个文件来控制

网页项目部分一般放在src目录下，打包出来的文件放到dist目录下

目录大致如下

main.js文件里会对窗体部分做很多配置

具体可以参见electron的官方文档：electron官方文档

mainWnd = new BrowserWindow({
  // 窗体配置参数
});
mainWnd.loadURL(`file://${__dirname}/dist/index.html`); //这句话是用于配置窗体加载的网页项目的，配置为打包后的目录

网页项目部分使用ipc模块与electron的窗体部分的ipcMain模块进行通信，网页项目部分可以发送以某个指令给窗体部分

网页项目部分发送指令

// src/MyComponent.js
const ipc = require('electron').ipcRenderer;
ipc.send('logout');

窗体部分接收到指令后做相应的行为

//main.js

ipcMain.on('logout', function (event, arg) {
  // do something
  console.log('logint');
});

窗体部分也可以使用webContent模块与网页项目部分通信

比如用户点击关闭窗体，可以使用event.preventDefault();阻塞关闭，然后通知网页项目部分，做退出登录的行为，退登完成之后再关闭窗体

// main.js 

mainWnd.webContents.send('mainWnd-close');

网页项目部分做对应的行为

比如退出登录，退出登录完成后，也使用ipc通知窗体部分，窗体接收到'logout-succ'后，执行关闭窗体的行为。

// src/MyComponent.js

ipc.on('mainWnd-close', () => {
  // do something
  ipc.send('logout-succ');
})

·在开发项目时，可以先用网页的形式开发项目，等到网页项目部分差不多完成后，再注入electron中，开发网页项目部分和窗体部分的交互

·在webpack中使用target: "electron-main"后，webpack将不会打包有关eletron的代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Electron-vue开发的客户端支付收款工具的实现

    目前实现了支付宝当面付的扫码支付功能.二维码支付功能,即主动扫和被动扫.测试请使用支付宝沙箱环境,支付宝是沙箱版. 最终效果如下: 前端页面使用阿里的组件,ant-design-vue 通过node,使用nedb内存数据库进行本地数据存储 安装文件支持自定义.生成的exe,安装过程如下 程序代码简述 main.js import devtools from '@vue/devtools' import Vue from 'vue' import axios from 'axios' import

  • 解决Vue+Electron下Vuex的Dispatch没有效果问题

    解决Vue+Electron下Vuex的Dispatch没有效果问题

    这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题. 先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个-- 其中 /src/main 是存放主配置文件的,/src/render 下面有 store.router.components 等. components 下面就

  • Electron 如何调用本地模块的方法

    Electron 结合了 Chromium.Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口.通知.图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使用 Node.或者说:就好像构建一个 Node app,并通过 HTML 和 CSS 构建界面. 那么如何在页面中调用 Node API 呢? 碰到了一些坑- 先从页面加载方式说起,Electron 中加载页面的方式有两种: 一种是直接加载本地文件,另一种是通过 http 网络请求页面. //方法1

  • 利用Electron简单撸一个Markdown编辑器的方法

    Markdown 是我们每一位开发者的必备技能,在写 Markdown 过程中,总是寻找了各种各样的编辑器,但每种编辑器都只能满足某一方面的需要,却不能都满足于日常写作的各种需求. 所以萌生出自己动手试试,利用 Electron 折腾一个 Markdown 编辑器出来. 下面罗列出我所理想的 Markdown 编辑器的痛点需求: 必须要有图床功能,而且还可以直接上传到自己的图片后台,如七牛: 样式必须是可以自定义的: 导出的 HTML 内容可以直接粘贴到公众号编辑器里,直接发布,而不会出现格式的

  • 前端Electron新手入门教程详解

    前端Electron新手入门教程详解

    Electron 是什么 定义 Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架.这里所说的桌面应用指的是在Windows.OSX及Linux系统上运行的程序. 历史 2013年的时候,Atom编辑器问世,作为实现它的底层框架Electron也逐渐被熟知,到2014年时被开源,那时它还是叫Atom Shell. 接下来的几年,Electron在不断的更新迭代,几乎每年都有一个重大的里程碑 2013年4月11日,

  • electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验. 1.webpack的核心概念 •Entry:入口,Webpack执行构建的第一步从Entry开始: •Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件.Webpack会从配置的Entry开始递归找出所有依赖的模块. •Chunk:代码块,一个Chunk由多个模块组

  • 详解使用webpack+electron+reactJs开发windows桌面应用

    electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r

  • 详解使用WebPack搭建React开发环境

    第一步.基础环境 初始化 项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架 入口文件(src/index.js) import React from 'react' import {render} from 'react-dom' import App from './App' render(<App/>,document.getElementById('root')) 主组件(s

  • 详解dll动态库的开发与调用及文件的读写小程序

    详解dll动态库的开发与调用及文件的读写小程序 首先我们先来学习一下动态库的调用,先找到动态库的.dll和.lib文件并将其导入到同源文件相同级别的文件夹下面,然后在添加进其头文件,并右击项目处,然后点击链接,链接我们的lib文件(一定要是全名称包括扩展名),然后我们就可以调用动态库的函数了. Dll是我们具体的函数, lib使我们的函数描述文件. #include <stdio.h> #include <stdlib.h> /* 该代码是对文件读写操作的使用 */ #pragma

  • 详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)

    最近疫情比较严重,很多公司依靠阿里旗下的办公软件钉钉来进行远程办公,当然了,钉钉这个产品真的是让人一言难尽,要多难用有多难用,真的让人觉得阿里的pm都是脑残才会设计出这种脑残产品,不过吐槽归吐槽,该用还得用,虽然钉钉别的功能很鸡肋,但是机器人这个功能还是让人眼前一亮,属于比较极客的功能,它可以将第三方服务的信息聚合到钉钉群中,实现信息的自动化同步,例如:通过聚合Github.Gitlab等源码管理服务,实现源码更新同步:通过聚合Trello.JIRA等项目协调服务,实现项目信息同步:同事,支持W

  • 详解spring如何使用注解开发

    详解spring如何使用注解开发

    在Spring4之后,要使用注解开发,必须要保证aop的包导入了. 使用注解需要导入context约束,增加注解的支持. <?xml version="1.0" encoding="utf-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance

  • Java Spring详解如何配置数据源注解开发以及整合Junit

    Java Spring详解如何配置数据源注解开发以及整合Junit

    目录 Spring数据源的配置 数据源(连接池)的作用 数据源的开发步骤 手动创建数据源 Spring注解开发 Spring原始注解 Spring新注解 Spring整合Junit Spring集成Junit步骤 Spring数据源的配置 数据源(连接池)的作用 数据源(连接池)是提高程序性能如出现的 事先实例化数据源,初始化部分连接资源 使用连接资源时从数据源中获取 使用完毕后将连接资源归还给数据源 常见的数据源(连接池):DBCP.C3PO.BoneCP.Druid等 数据源的开发步骤 1.

  • 详解通用webpack多页面自动导入方案

    详解通用webpack多页面自动导入方案

    目录 前言 思考 安装glob 创建工具类 getEntry getHtmlWebpackPlugin 二次封装 应用 前言 在之前,我写了一个webpack的模板.在平时我写栗子或者是写几个页面的时候会用到它.当这个模板需要多个页面时需要手动到webpack.config.ts文件中配置entry和HtmlWebpackPlugin,有点麻烦. 思考 我们项目中的页面都是存放在src/pages/*.html中的,我们可以搜索这里文件夹下的html文件我们可以利用node中的glob包中的.s

  • 详解Vue-cli webpack移动端自动化构建rem问题

    相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题: 1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用 2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助 1 安装v

  • 详解如何使用VisualStudio高效开发调试AndroidNDK

    详解如何使用VisualStudio高效开发调试AndroidNDK

    本文介绍了如何使用VisualStudio高效开发调试AndroidNDK,分享给大家,具体如下: 场景 场景一:Java层代码与SO的开发分为不同的程序猿负责,开发SO的时候基本上APK的其他文件不会修改. 场景二:主要代码就是C++,Java层代码也只是个DEMO,Java代码基本没啥修改. 常见的做法是: 1. 使用编辑器或者编译器编写C++代码. 2. 使用NDK命令编译SO. 3. 重新打包APK,或者直接替换APK中的SO文件再重签名. 4. 安装到手机. 5. 运行. 6. 崩溃.

  • 详解android studio游戏摇杆开发教程，仿王者荣耀摇杆

    最近在做一个山寨版的王者荣耀,刚开始做的时候毫无头绪 摇杆的多点触控做的特别烂 经过几天的思考已完美解决所有问题,下面就和大家分享下这个摇杆的开发思路 若有不正之处,请多多谅解并欢迎指正. 首先这个摇杆要用到较多的数学知识,小编的数学特别烂也就高中水平吧 我们这个摇杆一共就五个按钮,一个移动摇杆.三个技能摇杆和一个普通攻击按钮 最终效果 好了废话少说让我们开始吧 新建一个项目 建好项目之后,我们先新建一个类叫做"画".也是我们的主View 修改Hua.java的代码 public cl

随机推荐