当前播放: 15 | 项目架构与基础业务:Electron 与 React 框架结合
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:Electron基础篇 (12讲)
01 | 课程介绍
免费
02 | 内容综述:学完这门课程你能得到什么?
免费
03 | Electron介绍:为什么Electron这么火?
免费
04 | 揭秘Electron架构原理:Chromium + Node.js是如何一起工作?
免费
05 | 桌面端技术选型:如何选择合适的桌面端技术?
06 | Electron开发准备:环境搭建及前期准备
07 | 第一个Electron应用:开发一个简单版的番茄钟(上)
08 | 第一个Electron应用:开发一个简单版的番茄钟(下)
09 | 与Web开发不同(一):主进程与渲染进程
10 | 与Web开发不同(二):进程间通信
11 | 与Web开发不同(三):Native能力及原生GUI
12 | 与Web开发不同(四): 释放前端想象力,基于Electron能做什么?
第二章:实战篇 - 远程控制软件 (13讲)
13 | 实战项目综述:整体需求分析
14 | 设计思路:做远程控制有几步?
15 | 项目架构与基础业务:Electron 与 React 框架结合
16 | 主页面基础业务:Real World IPC
17 | 傀儡端实现(一):基于Electron能力捕获桌面视频流
18 | 傀儡端实现(二):如何接收&响应指令?
19 | 傀儡端实现(三):基于WebRTC传输视频流(上)
20 | 傀儡端实现(四):基于WebRTC传输视频流(下)
21 | 信令服务:如何连接两端(上)
22 | 信令服务:如何连接两端(下)
23 | 指令传输实现:如何建立数据传输?
24 | 项目完善与总结(上):App特性
25 | 项目完善与总结(下):原生GUI
第三章:Electron 工程篇 (7讲)
26 | Electron 应用打包:从HTML到安装包
27 | Electron 应用更新(一):软件更新的痛点
28 | Electron 应用更新(二):线上项目如何更新?
29 | Electron 质量监控:桌面端的质量抓手是什么?
30 | 使用原生能力:如何集成C++能力?
31 | Electron 自动化测试:如何编写端到端测试?
32 | Electron体验优化:如何优化白屏问题?
15 | 项目架构与基础业务:Electron 与 React 框架结合

15 | 项目架构与基础业务:Electron 与 React 框架结合

邓耀龙
美团高级前端工程师
33讲 约300分钟1782
单独订阅¥99
2人成团¥79
本节摘要

你好,我是邓耀龙。

2020 年新年即将到来,春节期间(2020 年 1 月 30 日)我们的课程将会停止更新一次,节后(2020 年 2 月 6 日)恢复更新。这里为末推荐一些自学资料,你可以自行学习。

最后预祝你新春快乐,学有所成。

课件和 Demo 地址
https://github.com/geektime-geekbang/geektime-electron

展开
登录 后留言

精选留言(6)

  • 瑞泉
    老师,按要求设置 BROWSER=none react-scripts start,启动后报错:
    'BROWSER' is not recognized as an internal or external command,
    operable program or batch file.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! main@0.1.0 start: `BROWSER=none react-scripts start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the main@0.1.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Gree\AppData\Roaming\npm-cache\_logs\2020-01-27T12_21_05_394Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! remote-control@1.0.0 start:render: `cd app/renderer/src/main && npm start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the remote-control@1.0.0 start:render script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Gree\AppData\Roaming\npm-cache\_logs\2020-01-27T12_21_05_536Z-debug.log
    在网上搜不到解决方法,望老师支招……

    作者回复: win上的话应该是环境变量不能这么设,你装一个cross-env,之后在BROWSER前面加上cross-env

    2020-01-27
    1
  • 马小🐎
    这个window.require是干什么用的老师

    作者回复: 跟require一样的,用来引模块,但windows.require不会被webpack识别,可以避免require引入electron报错。

    2020-02-21
  • 梦牵绕了谁的灵魂
    老师,我用npx创建不了react项目?这个怎么搞?

    作者回复: 看看你的node,npm版本是不是有点低了,我用的是12.14,nvm install 12.14,nvm use 12.14试试

    2020-02-05
    1
  • 🌀Pick Monster 🌀
    老师,发现使用npm start启动render和electron之后,关闭electron窗口后electron程序停止了,但是React程序没有停止,如果项目打包后会不会出现React程序一直没有被停止的情况?

    作者回复: 打包后当然不会,打完包就是一个静态页。第三章会讲到

    2020-02-05
  • Geek_0a41b1
    react集成的那一节有点复杂

    作者回复: 其实如果不篡改,直接用window.require还是比较简单的。实际项目中几乎都是按项目需求配置的。

    2020-02-03
  • 暴怒侠(有牙齿的IT妞)
    http://t.cn/A6vJWcdN does not work here. it redirect to a 404 page

    作者回复: 更新链接了

    2020-01-30
收起评论
看过的人还看
JavaScript核心原理解析

周爱民  《JavaScript语言精髓与编程实践》作者,南潮科技(Ruff)首席架构师

28讲 | 4044 人已学习

拼团 ¥55 原价 ¥68
前端全链路性能优化实战

刘威  前端架构师

60讲 | 1993 人已学习

拼团 ¥99 原价 ¥129
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 3354 人已学习

拼团 ¥99 原价 ¥129
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 4392 人已学习

拼团 ¥99 原价 ¥129