# 前端高手特训课程：从0到1带你手写一个微信小程序底层框架【完结】

*Published:* 2024-05-28
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年12月29日，已超过 180天没有更新



**深入学习小程序框架底层原理，培养双线程思维，打造前端差异化竞争力，实现弯道超车。**

[![](https://www.xarjtc.com/wp-content/uploads/2024/05/e257de98442f8c7.webp)](https://www.xarjtc.com/wp-content/uploads/2024/05/e257de98442f8c7.webp)

**你将学到：**

- 能力：自研小程序框架能力
- 思维：培养双线程架构思维
- 细节：1:1还原微信小程序架构
- 流程：小程序框架研发全流程
- 深度：掌握小程序底层原理
- 面试：储备差异化竞争力

**简介：**

> 无论你是一位新手，还是一位有经验的开发者，能够自研一套小程序底层框架，都是你突破技术瓶颈有效途径。在本课程中，由曾参与主持小程序框架自研工作的小默老师，带领大家从架构设计 ，原理剖析，再到源码的实现，一步步地实战构建一个完整的微信小程序底层框架，让你深度掌握小程序双线程原理，助力你具备把握最佳机会的能力和提升获取心仪Offer的成功率，成为一个真正有实力的技术人才 。

**适合人群**

前端开发工程师

小程序框架开发者

**技术储备**

熟悉 HTML CSS JS（必须）

了解 Vue（必须）

了解 node.js（必须）

**章节目录：**

第1章 课程简介

2 节｜13分钟

展开

图文：

1-1 课程演示 demo 地址

视频：

1-2 导学

试看

12:48

第2章 双线程简易模型：对双线程有一个初步认识

6 节｜66分钟

收起

视频：

2-1 小程序框架技术方案概述

试看

06:26

视频：

2-2 webview的使用

23:54

视频：

2-3 jscore的使用

09:51

视频：

2-4 iframe的使用

09:43

视频：

2-5 webworker的使用

06:28

视频：

2-6 简易双线程示例

08:59

第3章 微信客户端开发：双线程模型运行的基石

4 节｜55分钟

收起

视频：

3-1 客户端模拟项目搭建

04:17

视频：

3-2 ios设备模拟

07:01

视频：

3-3 微信应用模拟

23:18

视频：

3-4 小程序容器初始化

20:20

第4章 小程序应用初始化

2 节｜27分钟

展开

视频：

4-1 小程序应用初始化

21:40

视频：

4-2 通信桥bridge创建

04:40

第5章 逻辑线程建设：JS代码运行环境

2 节｜30分钟

展开

视频：

5-1 逻辑线程初始化

09:42

视频：

5-2 逻辑线程的通信通道建设

20:16

第6章 渲染线程建设：wxml代码运行环境

2 节｜39分钟

展开

视频：

6-1 渲染线程初始化

19:31

视频：

6-2 渲染线程的通信通道建设

18:34

第7章 应用资源加载

3 节｜37分钟

展开

视频：

7-1 小程序资源加载

19:48

视频：

7-2 逻辑线程注册信息的存储

10:18

视频：

7-3 渲染线程注册信息存储

06:52

第8章 app实例的创建于生命周期函数调用

2 节｜30分钟

展开

视频：

8-1 创建app实例

08:59

视频：

8-2 app生命周期调用

20:16

第9章 页面首次渲染过程

4 节｜36分钟

展开

视频：

9-1 构建initialData

11:36

视频：

9-2 initialData分发

05:24

视频：

9-3 wxml转render函数

07:02

视频：

9-4 页面首次渲染 firstRender

11:24

第10章 page实例的创建于生命周期函数调用

2 节｜33分钟

展开

视频：

10-1 创建page实例

13:45

视频：

10-2 page生命周期调用

18:20

第11章 事件机制与视图更新setData的实现

2 节｜24分钟

展开

视频：

11-1 事件机制的实现

15:50

视频：

11-2 视图更新setData的实现

07:33

第12章 构建编译命令行工具：编译出微信开放平台提审产物

7 节｜111分钟

展开

视频：

12-1 命令行设计

05:51

视频：

12-2 配置文件编译

17:10

视频：

12-3 wxml的编译-1

15:17

视频：

12-4 wxml的编译-2

14:33

视频：

12-5 js的编译

30:31

视频：

12-6 wxss的编译

12:03

视频：

12-7 编译产物消费

15:30

第13章 小程序路由管理：多个webview的调度与生命周期实现

2 节｜23分钟

展开

视频：

13-1 页面跳转navigationTo

14:48

视频：

13-2 页面返回navigationBack

07:37

第14章 内置组件开发：更丰富的内置组件，为编写抖音小程序做准备

11 节｜97分钟

展开

视频：

14-1 条件渲染模板语法的实现

06:59

视频：

14-2 列表渲染模板语法的实现

06:46

视频：

14-3 内联样式的实现

10:21

视频：

14-4 异步回调函数的实现

11:15

视频：

14-5 打开小程序navigateToMiniProgram

06:35

视频：

14-6 封装text内置组件

06:44

视频：

14-7 封装image内置组件

03:17

视频：

14-8 wx.showToast的实现

10:56

视频：

14-9 封装swiper内置组件

10:22

视频：

14-10 事件参数的实现

06:43

视频：

14-11 封装video内置组件

16:55

第15章 抖音小程序实现：运行在我们自己搭建小程序框架之上

3 节｜42分钟

展开

视频：

15-1 开发抖音小程序1

19:27

视频：

15-2 开发抖音小程序2

18:05

视频：

15-3 课程总结

04:00

本课程已完结