Electron+React+七牛云 实战跨平台桌面应用

  [复制链接]
查看5160 | 回复12 | 2019-12-11 09:42:21 | 显示全部楼层 |阅读模式
QQ截图20191211093728.png ! O) m/ y8 h" h4 `0 v7 Z" e

$ ]  T2 N# ^3 X7 I5 c0 E〖课程介绍〗
1 X" @$ C# k0 E- p9 ~目前市场上对 Electron 的呼声很高,它几乎是 Web 开发人员开发桌面客户端的唯一途径,很多大厂都使用 Electron 开发自己的原生应用。Electron 天生适配任何前端开发框架,我们结合 React Hooks 这个炙手可热的新特性进行教学,同时因为 Electron 也可以使用 Node.js 的开发环境,所以我们同时使用七牛云和很多 Node 原生模块进行开发,来完成一个非常有吸引力的云同步 Markdown 文档管理应用。
$ t6 n- i% t1 l& ~6 C9 R  F# k  r# c' @2 u3 I  x$ J# G
〖课程目录〗4 m1 T& `% V* K+ V, U
第1章 进入 Electron 的世界! p% i1 U. {* q6 r: K/ N, ^
介绍了整个课程的背景知识,项目简介,学习流程,可以掌握的知识点,以及学习方法和前置知识。& K3 Q6 h( `1 i% {/ d
1-1 学习本课程的收获以及案例展示(内附彩蛋) 试看
$ g2 r( C0 t& G( w- j: @. E. j
第2章 我们的第一个应用+ |$ g4 w9 h( V/ O
本章讲述了 Electron 的基础用法,包括搭建 Electron 开发环境、进程和线程的知识、BrowserWindow 模块、跨进程访问等内容。
1 w" t- O% v' v: S6 O2-1 配置 Electron 开发环境 试看0 e/ O) p( D* C# g) S4 i* [
2-2 进程和线程
3 s1 _9 J/ h9 a+ {% A2-3 主进程和渲染进程
- x2 l7 r) s: c' p2-4 创建 BrowserWindow
/ h, J. d! K! _; q2-5 进程间的通信$ ~% a$ X0 C/ q) s3 d$ i* k
2-6 使用 IPC 进行通信) m. W- o& x, }1 ]
2-7 使用 remote 实现跨进程访问7 P  s8 K5 N6 r! @1 _( v* ]5 B* ^
2-8 升级到 electron 7.0 以上的注意事项
7 ?$ E0 P( J4 w* T! V
* o0 c' s0 y  G& Y/ l第3章 神奇的 React  y" V8 Y& ^4 O3 M
本章回顾了 React 的基础知识,从而引出了全新的 React Hooks,详细讲解了 useState、useEffect、自定义Hook 等内容。
2 ?5 z  @0 c) C8 z! N3-1 React 简介和缘起* X# Y2 t# K. ^6 W
3-2 配置 React 开发环境..1
8 S- t" a$ A3 w0 D) R$ _3-3 useState Hook
, j/ n/ r3 L+ t" p5 z+ X3 n! b- {3-4 useEffect 不需要清除的 Effect
- Y9 A6 o4 G0 v" _( {2 m: u/ U3-5 useEffect 需要清除的 Effect
6 [2 s% P) N9 T# L9 O, W3-6 useEffect 可控 effect
9 G* }& F: t0 u2 X  \3-7 自定义 Hook(一), A' S4 E& c* t8 h
3-8 HOC 的概念和缺点
( Q4 K1 D7 |0 l9 P: [) e, n3-9 自定义Hook(二)
, l: V2 f5 v; U3-10 Hook 规则和其他 Hook
: n* q" h" f8 z5 {- F& i2 R0 u( B! h+ [9 d7 f
第4章 双剑合璧与庖丁解牛" L/ V9 s8 `6 T- k' V4 {6 M. k
本章分析了整个应用的需求,将整个应用分割成组件,然后打造一个 适配 Electron 和 React 的开发环境
( l4 l( G2 Z* ?7 }4-1 全局需求 试看
5 ]( L; V1 r3 @/ B; D- H4-2 将 UI 拆分成组件, g. R# M3 b1 w8 ~' V. P$ }
4-3 配置开发环境(一)1 V4 Q/ r# J! K% L$ p- p  F
4-4 配置开发环境(二)
4 u- p" a& S- f) L" `3 X8 E4-5 文件结构和代码规范( \9 m/ ^4 ~3 c6 \( V3 `6 G
: x+ U3 N' a/ l, H8 Q$ w
第5章 左侧面板开发
! B( n/ |2 r7 Y+ N本章开始分别开发左侧面板的各个 React 组件,同时在开发过程中选用样式库、图标库,重构公共自定义 Hook。) k" g; q$ D7 }2 m
5-1 为项目选择样式库
% h; t1 H9 @0 d8 C5 y. `5-2 FileSearch 组件(一)
; _4 f0 N# a1 @. T2 `5-3 FileSearch 组件(二)
" Z+ \& D, Z9 ?- w1 @! g: ]/ b8 A5-4 为项目选择图标库6 N" ?- v2 W4 U: L+ y% V
5-5 使用 PropTypes 进行类型检查! J6 k% L$ r# r8 G) S
5-6 FileList 组件开发(一), V7 N- `; a8 q& A' `" U2 a
5-7 FileList 组件开发(二)
0 B2 O2 s$ v  X# s% M, C; E/ g5-8 第一个自定义 Hook - useKeyPress' {; v) E' r- p; L
5-9 左侧收尾工作
) F# `8 x4 E+ w( ^. ]& r+ {% S/ w
7 u/ A5 n! l# l0 ?# U8 [第6章 右侧面板开发0 O6 H& a$ l+ l
本章开发了应用右侧的 TabList 和编辑器部分,同时在整个过程中穿插了如何选取一个好用的开源库的思路。. u, _$ P" n/ J
6-1 TabList 需求和属性分析8 C5 Y, A, {3 n! J
6-2 TabList 组件代码(一)1 R* c! A* X. x5 O
6-3 TabList 组件代码(二)
& J  v) w  I7 T6-4 选择 MarkDown 编辑器( Q% ~! w8 i1 i9 t( a9 h
6-5 引入 easyMDE 编辑器
# i4 t' x+ D2 y: S' g4 ?$ b$ K; C/ P0 t
第7章 功能结合
; X' ?7 J, P. H7 ]5 T4 x1 n, X本章遵循 React 哲学的最后步骤,从分析应用 state 结构入手,从上至下的给应用添加状态和逻辑处理,然后提出了 flatten state 的概念, 最后用这个概念进化了整个应用的状态。" Q; `: f+ ~" O8 U& H6 G( T
7-1 分析设计 State 结构0 I) e. l7 c* `* U
7-2 分析应用数据流
8 y  A6 r6 t0 B- m& q! {7-3 给 App 组件添加状态
( V1 {2 H4 x1 I, P7-4 添加数据处理行为(一)
2 Q8 C) ^" K+ m" p7 |- W. n% d7-5 添加数据处理行为(二)- w7 i) {0 P# I
7-6 添加新建文件流程逻辑
# N3 n; u; I& W( F! l" G7-7 Flatten State 介绍/ m1 g% K6 V# @, n" ]8 L2 p
7-8 修改 State 为 Flatten 结构编码! U8 K6 |2 R( T1 U  D
7 @. ]) M, d/ D4 z
第8章 持久化保存数据
9 I- O+ z. D' x% [" J本章开始进入 Node.js 的世界,使用 FS 模块完成文件的增删改,同时还使用 Electron store 完成文件索引的持久化保存。
. K! K1 }$ {* q4 c3 ?3 s: g8-1 在 React 中使用 Node.js0 {) g% f" O$ d
8-2 FS 模块初试牛刀
: D$ G7 |: x% P' U0 r  Y. k8 X8-3 FS 模块使用 Promise 改造- T% y5 z1 b, M. x2 A' y
8-4 在 App 中集成文件操作
: p" p" D' ^  k8-5 数据持久化解决方案
3 X4 w  C4 x5 P8-6 将 Electron store 集成到 App 中
* Q# T( Y5 B" i6 h9 Z8-7 添加持久化数据逻辑代码
7 R0 N+ v# d1 Y8-8 由一个 Bug 引发的思考
1 y& E4 N* H" Q9 S3 G
* P: y4 ~& P" s0 S& Q7 @5 E第9章 Electron 锦上添花2 w% Y* u- i* d* B# s% b5 ]
本章使用 Electron 提供的模块 - Dialog、Menu、BrowserWindow 等模块进一步进化应用。在这之中,还穿插了 Node.js、DOM 遍历以及操作等一系列知识。
# s( h6 L, i6 \% W9 n9-1 导入文件对话框(一)
" [$ q! a$ k3 }6 B9-2 导入文件对话框(二)
4 q) v. f9 w% y' d( M5 V" f' I1 x9-3 添加上下文菜单(一)
, I- d8 ~& ]! w/ [1 |, Y  w9-4 添加上下文菜单第二部分
# f1 J* A6 _: a5 m' x6 e9-5 添加上下文菜单最终实现; _, {* k6 p( ^$ d
9-6 原生应用菜单简介2 o+ R8 I1 P- ^2 r5 x7 T  M
9-7 添加原生应用菜单编码(一)3 k+ D7 y2 n& ~1 Z7 L* s
9-8 添加原生应用菜单编码(二)
+ D' e2 q# S/ G( e, I2 g! ]5 `1 T9-9 设置窗口解决方案和流程分析
7 k/ @! v8 e- I1 ^! s& K9-10 添加设置窗口编码(一)4 y$ i* f) n" Y
9-11 添加设置窗口编码(二)+ j7 f4 p6 \% T. l# i% Z

0 z0 K. p. t7 K; r1 `) [  D) p第10章 认识七牛云平台: V9 z+ m# u* j" d
本章从对象存储云平台简介开始,引出七牛云使用的流程,以及七牛云 SDK 的下载。然后使用 SDK 写一些小 Demo,最后抽象到一个云文件操作类。7 I2 ~0 t( P4 y4 X
10-1 对象存储平台简介
' {5 `( f3 s! ~7 v; i; X10-2 七牛云平台使用简介2 z5 e& Y" N& K, K, y
10-3 初始七牛 SDK, B  A& c: ^0 C
10-4 云文件操作类编码(一)
& ~$ J. h; e8 B- {4 J" Q/ J/ W$ o( J10-5 云文件操作类编码(二)2 `- ^4 w0 T: f7 n9 `, D2 q
10-6 获得下载链接( l" ?* E) _; H, s  C
10-7 stream 流的概念0 |5 w3 x) [; O0 A5 }6 [7 q9 ?) n
10-8 stream 流的简单用法
  ^* Z6 s5 g+ q10-9 实现文件下载方法
' [" h* U0 d, z6 O  T$ _$ Q1 Z3 \8 o' B7 R7 c+ s" q$ y1 }
第11章 使用 SDK 同步到七牛云/ `! l1 H& I) W. Y' H
本章使用上一章完成的云文件操作类将云文件同步功能添加到应用当中。* I- G: l' p1 ]8 c$ P2 h  Q, Q
11-1 在设置窗口添加七牛云参数(一)/ }- L( c, r5 K
11-2 在设置窗口添加七牛云参数(二)
% e' f4 ~1 _5 M/ C) N9 o( P6 f11-3 添加云同步菜单: g6 ^* @% a! b
11-4 动态修改菜单项6 Y  C# D2 w  B% [4 K
11-5 自动同步单个文件至七牛云(一)
. a- A: K* @+ d11-6 自动同步单个文件至七牛云(二), F# y8 |3 c) }) Y* Y3 _% J
11-7 自动下载云文件至本地(一)) u5 n2 r$ W  r& Z: k! D
11-8 自动下载云文件至本地(二)6 W7 F3 t2 [" a
11-9 为应用添加 Loading 效果
$ T+ S, @* F: _/ u! P* c6 l* A11-10 完成全部文件同步到七牛云功能编码. n' d# W1 I: r9 h% c1 O4 n8 R/ }; k3 A
11-11 使用流程图和伪代码解决剩下需求
' S$ B) H0 P0 x! w. Q, d) N  W3 d8 g$ m2 i: o8 s3 D2 f* T
第12章 应用打包与分发  d1 ?0 e8 U9 b; ^) f, t% o! |/ T
本章主要以 MacOS 和 Windows 系统为例,讲解如何通过 Electron Builder 打包 Electron 应用程序。
/ |1 j, I3 R! N2 L: p12-1 安装 Electron builder
6 q0 q) t7 z4 V4 j12-2 为生产环境 build 代码4 g7 {$ l# _: @9 S! A3 ?+ I/ f$ o
12-3 添加配置文件$ M3 V$ T% ^3 t. _: r& |1 Z
12-4 调试整个pack流程. V! i9 a0 y) q0 N9 b% N
12-5 探究打包过程和生成文件内容4 p2 d: v; Q1 F8 Z; k6 }. Z
12-6 生成安装包
, t, `/ z5 [9 T( o2 A12-7 Electron 打包体积优化第一部分- 质的飞跃1 ~5 G8 s+ y" \
12-8 Electron 打包体积优化第二部分-极限优化; _/ }  _8 _2 A
12-9 自动更新第一部分 - 自动发布 release6 }0 ~" I# Q% H
12-10 自动更新第二部分 - 添加自动更新功能- R: @- @4 |* w3 }
12-11 自动更新 第三部分 - 本地调试自动更新功能
! Z/ R% x  C$ {* `( U3 ]: D- ?7 W/ d. z8 C0 E, T# f5 S$ Y; A
第13章 课程总结
$ a. m7 s. `9 b# S本课程的回顾与总结。0 ?" F& }$ p0 K& S: ~) m; W8 K
13-1 课程总结6 t7 _6 j, _( I4 _# z% h! ]
, L" [' ~  t# q$ \; ?; C" y' C( D
〖下载地址〗; B3 y. ~3 ]9 S0 j7 B; M3 {+ P( G
游客,如果您要查看本帖隐藏内容请回复
" |! \% _, b4 d8 E1 ]0 ?
* D+ R, H/ B8 q6 w4 e: Y: d
----------------华丽分割线-------------------------华丽分割线-----------------------华丽分割线-------------$ }0 Z3 C2 f0 c" g% Y/ c, ?1 r+ n

( I1 a( a! m7 b〖下载地址失效反馈〗0 H: V1 K& K3 w7 E* M  Y
如果下载地址失效,请尽快反馈给我们,我们尽快修复。请加微信留言:2230304070" C6 ?3 N. \, O+ I4 t' T1 i+ B

; {1 w7 X# Q9 u: T0 A+ r〖升级为终身会员免金币下载全站资源〗
; `( H9 N; I  h$ w3 p& C全站资源高清无密,每天更新,vip特权了解一下:http://www.mano100.cn/rjyfk_url-url.html
3 @: `' m( R- q7 e( X
- o1 D; {: F; |% Y3 M, J9 i〖客服24小时咨询〗
) z, C4 T' ^/ C& U有任何问题,请点击右侧QQ邮箱:2230304070@qq.com 咨询。
回复

使用道具 举报

小小码农 | 2020-9-25 17:35:40 | 显示全部楼层
支持楼主,楼主牛逼
回复

使用道具 举报

saitama | 2021-3-7 10:34:14 | 显示全部楼层
afdsfdsfsf
回复

使用道具 举报

qwety20185 | 2021-9-15 02:43:38 | 显示全部楼层

/ o" \- D8 ?3 W) s支持楼主,楼主牛逼
回复

使用道具 举报

modalogy | 2021-10-14 16:17:57 | 显示全部楼层
666666666666
回复

使用道具 举报

xiaoyou | 2021-10-19 18:35:38 | 显示全部楼层
支持支持支持支持支持支持
回复

使用道具 举报

lllwy | 2022-3-4 17:12:12 | 显示全部楼层
支持楼主,楼主牛逼
回复

使用道具 举报

13710858132 | 2022-4-3 20:14:45 | 显示全部楼层
666666666666666
回复

使用道具 举报

fengfengzi | 2022-5-18 18:45:22 | 显示全部楼层
ElectronElectronElectronElectronElectron
回复

使用道具 举报

newmanli1009 | 2022-6-20 05:29:13 | 显示全部楼层
爱了爱了爱了爱了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则