此篇接上篇文章: Electron-从零到一搭建-编写基础看框架

这篇文章主要在此基础上来集成React、Mobx, 大家先拉取下上篇demo: https://github.com/spcBackToLife/electron-sprout/tree/release-191017

阅读剩下更多

前面，我们提到每个BrowserWindow加载页面后都会是一个独立的渲染进程，那如何处理多窗口的每一个渲染进程的js呢，以及说多窗口的每个BrowserWindow应该如何去写会好些。这里可能不是最好的设计，可供参考。
在设计多窗口的东西之前，我们需要知道我们可能有哪些需求：

• 每个窗口可能会有窗口需要的数据信息需要缓存，如何缓存。
• 可能会需要获取当前激活窗口、激活窗口id、聚焦窗口、聚焦窗口id, 当前有多少个窗口。
• 窗口之间可能会互相通信、可能会与主进程通信。
• 可以打开不同类型的窗口加载不同内容、可能打开同类型窗口加载不同类容。
• 可能同时会想打开几个窗口，可能是打开单个窗口。
• 单个窗口的属性可能不一样
• 单个窗口一些生命周期可能一样
• 有可能从主进程打开或操作窗口、有可能从渲染进程打开或操作窗口
• 每个窗口有自己的菜单栏、menubar、touchbar?
• 每个窗口有自己不同的右键菜单需求？

总结一下为：

• 单个窗口具有共同的一些属性、一些生命周期监听；具有一些不同的属性、不同的生命周期监听。（右键菜单、menu、touchbar、快捷键？、对话框样式）
• 单个窗口或有不同的通信需求：向主进程通信、向其余窗口通信。
• 单个窗口或有持久化的缓存，或非持久化缓存。
• 对当前窗口的管理需求：多少窗口、聚焦窗口、激活窗口、获得某个窗口、打开某种类型窗口。
• 对不同的窗口有不同的操作需求。

阅读剩下更多

本文主要有以下内容：

• Electron环境
• Electron 主进程、渲染进程环境
• Electron 主进程、渲染进程
• 渲染进程、窗口、index.html之间的关系
• webpack如何处理主进程、渲染进程: target: ‘electron-renderer’, electron-main
• 神奇的remote-主进程、渲染进程通信

在看这篇之前，如果你对Electron基础已经了解，则可以继续，如果不了解，建议先看下：

• Electron 入门简介

阅读剩下更多

介绍

这篇文章，主要的是讲述如何搭建Electron项目，这里会用到上篇文章：Webpack4+node+typescript+hotReload 搭建的框架，这里，大家可以先clone下来：

1

git clone git@github.com:spcBackToLife/node-webpack4-ts-demo.git

基础框架的搭建主要有以下部分内容，基本每部分都是单独的一篇文章：

• 基础node环境搭建: webpack4 + node + typescript
• Electron集成: 单窗口 + 主进程、渲染进程在dev、prod环境的webpack处理。
• React 集成
• Mobx 集成 （由于redux比较重，dva比较麻烦，最后选择Mobx做react状态管理会更合适）
• Electron集成: 多窗口 + 窗口渲染进程webpack处理。
• 数据缓存、存储服务管理
• 应用基础功能服务设计：录屏、截屏
• 应用集成三方环境设计：Python环境
• 应用webview注入js设计
• 运行日志集成

阅读剩下更多

Electron 简介

Electron 是 跨平台 的桌面应用。
Electron 兼容 Mac, Windows(xp不兼容) 和 Linux。
Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
Electron 的内核Chromium会随着Electron的版本更新而更新。当然，你也可以自己指定更新内核。（建议跟Electron版本更方便）

阅读剩下更多

运行时出现此错误的话： MSBUILD : error MSB4132，无法识别工具版本“2.0” 等（还有提示啥14.0,4.0的都一样）。

1
2
3
4
5
6

// 此处2015 是电脑上装的2015 ，如果不是，可以看自己电脑是不是2012，
// 或者不知道怎么看的，直接试试 2012 是不是得行。
npm install --global --production windows-build-tools(管理员权限) -- 预计要15分钟左右，耐心等待
npm install --msvs_version 2015 -g
npm config set msvs_version 2015 -g
// 卸载中打开：visual studio 15 生成工具2017 , 点击修改，右侧选择适用于桌面的VC++2015.3v1400

阅读剩下更多

这个是在链接chrome插件的时候访问不到，导致的。可以在应用中取掉此插件, 比如你的应用里有如此代码，就是加载插件(electronInstall)：

1
2
3
4
5
6
7
8
9

export async function installExtensions() {
  if (
    process.env.NODE_ENV === 'development'
    || process.env.DEBUG_PROD === 'true'
  ) {
    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
    await electronInstall([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS], forceDownload);
  }
}

复制：C:\Users\pk\AppData\Roaming\Electron 中的文件到自己电脑中。

AppData是隐藏文件夹，需要显示了能看哦。

或者你换个热点、翻个墙，就可以下载chrome插件了。

阅读剩下更多