# 2023版全新高质量商业级小程序全栈项目实战视频课程（内附源码）

*Published:* 2024-06-30
*Author:* 客服001

#### 温馨提醒

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

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



**小程序、 Vue3、Uni、NodeJs、MySQL 全新300+技术点，全流程实现复杂跨端应用！**

[![](https://www.xarjtc.com/wp-content/uploads/2024/06/171650e6477f777.webp)](https://www.xarjtc.com/wp-content/uploads/2024/06/171650e6477f777.webp)

**你将学到：**

1\. 获得全栈全新300+技术点

4\. 实现小程序12个典型业务场景

2\. 具备真实上线商业级全栈能力

5\. 打包生成多平台实现跨端应用

3\. 掌握复杂项目设计和研发过程

6\. 全程大白话学会每一个知识点

**简介：**

在前端越来越卷的当下，学习全栈技术已经变得刻不容缓。本课程带你从入门到进阶，体系化学习微信小程序 、Vue3、Uni-APP、NodeJs、MySQL 最新全栈技术， 并最后开发一个跨端、复杂、完整的并且已上线全栈小程序应用，让你具备商业级小程序的跨平台落地能力。

**适合人群**

想从 0 学习小程序、Vue3、NodeJs、Mysql 完整技术栈的同学

学过前端还想进阶全栈的同学

想学习后端知识开发复杂项目的同学

**技术储备**

了解 HTML、CSS 、JS 语法

了解过前端开发的同学

**环境参数**

小程序 v2.31.0

Vue3 v3.2.47

Uni-app v3.7.8

NodeJs v18.16.0

Mysql v8.0.32

**章节目录：**

第1章 开期准备 - 了解课程的内容，对课程学习有初步的认知

1 节｜13分钟

展开

视频：

1-1 导学

试看

12:35

第2章 【入门】微信小程序的概念与目录结构详解 - 在配置中去实现第一个小程序应用

16 节｜102分钟

收起

视频：

2-1 课堂介绍

01:09

视频：

2-2 什么是微信小程序

00:45

视频：

2-3 微信小程序的特点

03:15

视频：

2-4 为什么要学习微信小程序

01:51

视频：

2-5 微信小程序账号的注册

09:21

视频：

2-6 微信开发者工具的下载与项目创建

10:31

视频：

2-7 json 配置 project.config.json 和 project.private.config.json 的学习

11:47

视频：

2-8 json 配置 - app.json

21:25

视频：

2-9 json 配置 - sitemap.json

11:27

视频：

2-10 app.js 的作用和使用

试看

03:36

视频：

2-11 app.wxss 的作用和使用

02:04

视频：

2-12 页面结构 - .wxml 文件的作用

试看

02:46

视频：

2-13 页面结构 - .wxss 的作用

04:16

视频：

2-14 页面结构 - .js 的使用

03:59

视频：

2-15 页面结构 - .json 的使用

04:07

视频：

2-16 课程总结

09:26

第3章 【基础】微信小程序中的基础语法和常用组件 - 组成微信小程序的基本单元

21 节｜179分钟

收起

视频：

3-1 课程介绍

01:09

视频：

3-2 数据绑定

09:08

视频：

3-3 列表渲染

13:22

视频：

3-4 列表的 key详解

11:42

视频：

3-5 条件渲染 与 hidden 属性的区别

09:38

视频：

3-6 小程序组件的概念和特点

02:00

视频：

3-7 视图组件 - view

08:54

视频：

3-8 文本组件 - text

09:16

视频：

3-9 图标组件 - icon

04:47

视频：

3-10 按钮组件 - button

11:29

视频：

3-11 表单组件 - input

18:51

视频：

3-12 表单组件 - radio

07:17

视频：

3-13 表单组件 - checkbox

06:27

视频：

3-14 表单组件 - textarea

10:01

视频：

3-15 表单组件 - switch

05:24

视频：

3-16 表单组件 - form

10:07

视频：

3-17 表单实战 - 用户注册

14:15

视频：

3-18 template 的基本使用

10:03

视频：

3-19 include 导入的基本使用

03:39

视频：

3-20 组件的公共属性和属性的类型

04:45

视频：

3-21 课堂总结

06:16

第4章 【基础】微信小程序脚本与样式和Flex布局精讲- 编写出更加多姿多彩的小程序应用

29 节｜178分钟

展开

视频：

4-1 课程介绍

02:12

视频：

4-2 什么是 wxs

04:21

视频：

4-3 小程序的模块化

12:14

视频：

4-4 wxs变量声明和wxs的两种使用方式

14:12

视频：

4-5 wxs 如何使用注释

04:44

视频：

4-6 wxs 支持的运算符类型

01:44

视频：

4-7 wxs 支持的流程控制语句

02:12

视频：

4-8 wxs 支持的数据类型

04:39

视频：

4-9 wxs 支持的基础类库

03:54

视频：

4-10 wxss 的基础概念

03:16

视频：

4-11 rpx 的概念和换算规则

07:17

视频：

4-12 wxss 支持的选择器

01:48

视频：

4-13 style 的使用和动态的 style

04:54

视频：

4-14 wxss 的样式导入

06:01

视频：

4-15 flex精讲 - 概念

04:57

视频：

4-16 开启 flex 布局的两种方式

07:24

视频：

4-17 设置 flex 布局的方向

05:56

视频：

4-18 设置 flex 布局是否换行

05:24

视频：

4-19 同时设置 flex 布局的方向和是否换行

03:25

视频：

4-20 设置 flex 布局的分布和对齐方式

09:26

视频：

4-21 设置 flex 布局交叉轴上子元素的对齐方式

08:34

视频：

4-22 设置 flex 布局交叉轴多行子元素的分布

07:50

视频：

4-23 设置 flex 子元素的排列顺序

03:23

视频：

4-24 设置 flex 布局子元素的宽度扩展

06:10

视频：

4-25 设置 flex 布局子元素收缩

05:29

视频：

4-26 设置 flex 布局的基础尺寸

04:05

视频：

4-27 设置 flex 布局子元素宽度的扩展、收缩、基础尺寸

14:07

视频：

4-28 设置 flex 布局单个子元素在交叉轴上的对齐方式

04:26

视频：

4-29 课堂总结

13:30

第5章 【基础】微信小程序中的事件系统及交互反馈 - 极致的小程序交互体验

11 节｜94分钟

展开

视频：

5-1 课堂介绍

02:39

视频：

5-2 什么是事件系统

03:16

视频：

5-3 注册事件的不同方式

07:43

视频：

5-4 捕获阶段和冒泡阶段

11:24

视频：

5-5 事件对象 （上）

09:41

视频：

5-6 事件对象（下）

15:42

视频：

5-7 交互反馈 - Toast

05:53

视频：

5-8 交互反馈 - Modal

08:05

视频：

5-9 交互反馈 - loading

08:19

视频：

5-10 交互反馈 - actionsheet

06:32

视频：

5-11 课堂总结

13:50

第6章 【中级】小程序的路由跳转、生命周期和数据存储 - 构建功能更加丰富的小程序应用

15 节｜137分钟

展开

视频：

6-1 课堂介绍

02:15

视频：

6-2 路由跳转 - navigateTo

10:59

视频：

6-3 路由跳转 - navigateTo 中的 events 和 url 参数传递

14:26

视频：

6-4 路由跳转 - navigateBack

10:11

视频：

6-5 路由跳转 - redirect

05:23

视频：

6-6 路由跳转 - switchTab

05:54

视频：

6-7 路由跳转 - reLaunch

04:24

视频：

6-8 生命周期的概念

02:19

视频：

6-9 App 的生命周期

16:04

视频：

6-10 Page 的生命周期

17:23

视频：

6-11 数据存储的概念

02:09

视频：

6-12 全局数据的存储（增改查）

07:29

视频：

6-13 页面数据的存储（增改查）

08:50

视频：

6-14 缓存数据的存储（增删改查）

15:36

视频：

6-15 课堂总结

13:26

第7章 【中级】微信小程序网络请求的封装 - 现代应用必不可少的重要环

9 节｜77分钟

展开

视频：

7-1 课堂介绍

01:40

视频：

7-2 网络请求的概念

04:28

视频：

7-3 小程序中如何发起网络请求

15:09

视频：

7-4 封装的意义

03:05

视频：

7-5 网络请求的封装

15:09

视频：

7-6 后端接口的封装

08:27

视频：

7-7 表单实战 - UI 搭建

09:29

视频：

7-8 表单实战 - 逻辑接口完善

18:08

视频：

7-9 课堂总结

00:44

第8章 【基础】Vue3的概念与响应式数据创建和动态的页面渲染-Vue3的特点和基础语法

15 节｜183分钟

展开

视频：

8-1 课堂介绍

02:41

视频：

8-2 Vue3 的特点

10:46

视频：

8-3 Vue3 项目的创建方式

12:21

视频：

8-4 Vue3的模板语法

11:53

视频：

8-5 Vue3 响应式数据 - ref

15:13

视频：

8-6 Vue3 响应式数据- reactive

12:17

视频：

8-7 Vue3 源码解读 ref 和 reactive 之间的区别

11:17

视频：

8-8 Vue3 响应式数据检测

14:46

视频：

8-9 Vue3 指令 v-bind

16:09

视频：

8-10 Vue3 指令 v-on-

07:44

视频：

8-11 Vue3 事件修饰符

13:41

视频：

8-12 Vue3 条件渲染

09:19

视频：

8-13 Vue3 列表渲染

14:32

视频：

8-14 Vue3 数组的响应式变更

16:00

视频：

8-15 课堂总结

13:54

第9章 【入门】Vue3 的常用组件与数据侦听和生命周期的使用 - Vue3 的核心

14 节｜120分钟

展开

视频：

9-1 课堂介绍

03:10

视频：

9-2 表单控件 - input

07:33

视频：

9-3 表单控件 - textarea

05:23

视频：

9-4 双向绑定 v-model

07:40

视频：

9-5 表单控件 - radio

05:00

视频：

9-6 表单控件 - checkbox

05:47

视频：

9-7 表单控件 select

05:34

视频：

9-8 表单修饰符

08:44

视频：

9-9 计算属性 - computed

18:51

视频：

9-10 侦听器 - watch

18:39

视频：

9-11 生命周期 - 挂载阶段

07:41

视频：

9-12 生命周期 - 更新阶段

08:36

视频：

9-13 生命周期 - 卸载阶段

08:04

视频：

9-14 课堂总结

08:45

第10章 【中级】Vue3 的组件化开发和组件间的通信方式- 大型复杂应用的主流开发模式

13 节｜120分钟

展开

视频：

10-1 课堂介绍

02:13

视频：

10-2 组件化开发的概念

02:33

视频：

10-3 全局组件和局部组件的注册

10:57

视频：

10-4 动态组件 - component

04:25

视频：

10-5 props 的概念和数据传递

05:12

视频：

10-6 利用 snippet generator 生成 vscode 代码片段

04:44

视频：

10-7 props 传递的注意事项

11:07

视频：

10-8 props 的校验

18:09

视频：

10-9 单向数据流 - 更新父组件中的数据

19:31

视频：

10-10 slot - 插槽的基本使用

07:40

视频：

10-11 slot - 具名插槽

09:21

视频：

10-12 slot - 作用域插槽

10:56

视频：

10-13 课堂总结

12:40

第11章 【高级】Vue3 的路由管理与状态管理 - 构建 Vue3 大型应用的基石

18 节｜225分钟

展开

视频：

11-1 课堂介绍

02:14

视频：

11-2 Vue Router 的常用注册方式

19:54

视频：

11-3 Vue Router RouterLink 和 RouterView 的相关使用

20:40

视频：

11-4 Vue Router 嵌套路由

16:07

视频：

11-5 Vue Router 敏感模式和严格模式

05:43

视频：

11-6 Vue Router 动态路由及404页面配置

16:12

视频：

11-7 Vue Router 命名路由和编程式导航

16:07

视频：

11-8 Vue Router 中重定向的两种常用方式

06:50

视频：

11-9 Vue Router 导航守卫的概念

05:34

视频：

11-10 Vue Router 导航守卫详解

18:12

视频：

11-11 KeepAlive 组件详解和活跃阶段的生命周期

15:21

视频：

11-12 Pinia的概念

04:59

视频：

11-13 Pinia 的安装和集成

12:07

视频：

11-14 Pinia State 的相关使用

16:10

视频：

11-15 Pinia Getters 的相关使用

06:24

视频：

11-16 Pinia Actions的相关使用

14:21

视频：

11-17 Pinia Plugins 的相关使用

09:54

视频：

11-18 课堂总结

17:53

第12章 【高级】Uni 的概念与项目创建和相关文件的作用 - 跨端框架的首选

12 节｜118分钟

展开

视频：

12-1 课堂介绍

02:12

视频：

12-2 uni 的概念、由来和使用原因

09:33

视频：

12-3 uni 的语言特点

04:04

视频：

12-4 uni 编译器和运行时

08:07

视频：

12-5 uni 官网面板介绍和使用 HBuilderX 创建项目

17:11

视频：

12-6 uni 使用 vue-cli 创建项目

13:48

视频：

12-7 uni 两种方式创建项目的区别

13:29

视频：

12-8 uni main.js 的作用

08:19

视频：

12-9 uni App.vue 的作用

12:30

视频：

12-10 uni manifest.json 的作用

07:47

视频：

12-11 uni pages.json 的作用和代码片段的配置

14:11

视频：

12-12 课堂总结

06:02

第13章 【基础】Uni 的多个复杂案例实现 - 加深对 Vue3 和小程序知识点的掌握

11 节｜127分钟

展开

视频：

13-1 课堂介绍

02:36

视频：

13-2 TabBar 案例

17:20

视频：

13-3 Counter 案例（1）

08:07

视频：

13-4 Counter 案例（2）

09:22

视频：

13-5 Router 案例（1）

12:43

视频：

13-6 Router 案例（2）

11:33

视频：

13-7 Form 案例

11:28

视频：

13-8 Request 案例（1）

15:04

视频：

13-9 Request 案例（2）

16:45

视频：

13-10 List 案例

17:47

视频：

13-11 课堂总结

03:25

第14章 【高级】“共享足球”项目实战（前端）- 灵活运用所学知识

20 节｜259分钟

展开

视频：

14-1 课堂介绍

09:07

视频：

14-2 首页功能分析和代码格式化

10:51

视频：

14-3 首页地图功能搭建

17:14

视频：

14-4 首页扫码借还和场馆概览搭建

18:23

视频：

14-5 首页扫码借还和场馆概览事件处理

12:21

视频：

14-6 首页右侧图标功能搭建

15:20

视频：

14-7 场馆详情开发搭建

20:37

视频：

14-8 场馆详情功能完善

14:52

视频：

14-9 客服中心页面搭建

14:57

视频：

14-10 客服中心页面事件处理

08:01

视频：

14-11 问题详情页面开发

14:51

视频：

14-12 个人中心页面开发-上

18:12

视频：

14-13 个人中心页面开发-下

11:51

视频：

14-14 用户注册登录页面

17:51

视频：

14-15 我的钱包页面搭建

08:18

视频：

14-16 会员充值页面搭建

13:36

视频：

14-17 订单列表搭建

07:29

视频：

14-18 奖品兑换搭建

06:47

视频：

14-19 关于我们页面搭建

15:10

视频：

14-20 课堂总结

02:25

第15章 【高级】NodeJs 的概念和 NPM 的相关使用 - 构建服务端的基础技能

12 节｜136分钟

展开

视频：

15-1 课堂介绍

02:33

视频：

15-2 NodeJs 的概念作用

08:04

视频：

15-3 NodeJs 的安装和初体验

05:51

视频：

15-4 NodeJs的REPL

08:58

视频：

15-5 NodeJs 的版本管理工具

14:41

视频：

15-6 Npm 的作用和使用

19:59

视频：

15-7 Npm 常用的命令及Npm 包的发布

16:17

视频：

15-8 Npm 源管理工具 - Nrm

06:47

视频：

15-9 模块化开发的概念介绍

03:53

视频：

15-10 CommonJs 模块化规范.mp4

23:27

视频：

15-11 EsModule 模块化规范

18:27

视频：

15-12 课堂总结

06:22

第16章 【高级】NodeJs的事件循环、异步IO、常用内置模块 - NodeJs的核心

10 节｜137分钟

展开

视频：

16-1 课堂介绍

01:31

视频：

16-2 NodeJs 的底层架构

08:56

视频：

16-3 NodeJs 事件循环详解

22:38

视频：

16-4 NodeJs 事件循环练习题目

15:04

视频：

16-5 NodeJs 内置模块 fs 介绍

12:20

视频：

16-6 NodeJs 内置模块 fs 常用操作

19:42

视频：

16-7 NodeJs 文件描述符

12:45

视频：

16-8 NodeJs 内置模块 path 介绍

15:44

视频：

16-9 NodeJs 内置模块 http 介绍

21:17

视频：

16-10 课堂总结

06:52

第17章 【高级】NodeJs的常用框架 Express和Koa-提升NodeJs开发效率

20 节｜198分钟

展开

视频：

17-1 课堂介绍

03:38

视频：

17-2 Express 的概念及安装

12:56

视频：

17-3 -1 Express 的 req 和 res 对象

13:56

视频：

17-4 -2 Express 的 req 和 res 对象\_Sub\_01

15:16

视频：

17-5 Express 的中间件

16:52

视频：

17-6 Express 路由

11:29

视频：

17-7 Express 静态资源存放

07:09

视频：

17-8 Express 文件上传

19:45

视频：

17-9 Express 静态资源存放

07:09

视频：

17-10 Express 日志记录

07:14

视频：

17-11 Express 错误处理

12:31

视频：

17-12 Koa 的介绍

05:25

视频：

17-13 Koa 的请求和响应对象

09:22

视频：

17-14 Koa 的中间件

14:00

视频：

17-15 Koa 的路由使用

11:07

视频：

17-16 Koa 的文件上传

09:49

视频：

17-17 Koa 的静态资源

04:22

视频：

17-18 Koa 的日志收集

03:20

视频：

17-19 Koa 的错误处理

08:05

视频：

17-20 课堂总结

04:19

第18章 【高级】MySQL 的概念和常用的数据类型 - 了解MySQL和初体验

8 节｜72分钟

展开

视频：

18-1 课堂介绍

01:47

视频：

18-2 MySQL 的概念

05:53

视频：

18-3 MySQL 的安装

13:11

视频：

18-4 MySQL 默认数据库及相关概念

08:11

视频：

18-5 MySQL 案例初体验

17:08

视频：

18-6 MySQL 语句分类

05:05

视频：

18-7 MySQL 常用的数据类型

14:05

视频：

18-8 课堂总结

06:19

第19章 【高级】数据库操作学习和使用 - 做一个 CRUD 工程师

10 节｜141分钟

展开

视频：

19-1 课堂介绍

01:24

视频：

19-2 数据库的增删改查

11:31

视频：

19-3 表的增删改查

22:31

视频：

19-4 数据的增删改查

19:48

视频：

19-5 MySQL 查询讲解-1

16:11

视频：

19-6 MySQL 查询讲解-2

17:10

视频：

19-7 MySQL SQL JOIN 讲解-1

16:35

视频：

19-8 MySQL SQL JOIN 讲解-2

16:50

视频：

19-9 mysql2 的使用方式

14:53

视频：

19-10 课堂总结

03:10

第20章 【高级】“共享足球”项目实战（后端）- 灵活使用所学知识

19 节｜307分钟

展开

视频：

20-1 课堂介绍

02:26

视频：

20-2 项目环境搭建

22:05

视频：

20-3 场馆设备接口实现

22:15

视频：

20-4 登录流程详解

17:18

视频：

20-5 注册接口实现

23:55

视频：

20-6 -1 登录接口实现

10:05

视频：

20-7 -2 登录接口实现

10:00

视频：

20-8 微信支付流程详解

14:19

视频：

20-9 -1 登录鉴权和充值接口实现

18:57

视频：

20-10 -2 登录鉴权和充值接口实现

19:33

视频：

20-11 奖品兑换接口实现

20:13

视频：

20-12 创建订单接口实现

21:08

视频：

20-13 结束订单接口实现

17:01

视频：

20-14 订单列表接口实现

19:01

视频：

20-15 客服问题接口实现

15:04

视频：

20-16 头像上传接口实现

25:50

视频：

20-17 用户头像访问实现

13:37

视频：

20-18 接口数据结构的处理

08:04

视频：

20-19 课堂总结

05:50

第21章 前后端项目接口联调 - 保证项目平稳落地

11 节｜134分钟

展开

视频：

21-1 课堂介绍

02:38

视频：

21-2 场馆接口联调

21:32

视频：

21-3 客服问题联调

11:30

视频：

21-4 注册登录改造

23:20

视频：

21-5 注册登录接口联调

11:18

视频：

21-6 头像上传接口调试

16:26

视频：

21-7 充值接口联调

11:00

视频：

21-8 cdkey 兑换联调

05:50

视频：

21-9 订单的创建和结束

12:14

视频：

21-10 订单列表接口联调

08:44

视频：

21-11 课堂总结

08:44

第22章 项目上线及部署 - 发布你的应用让全世界的人去使用吧！

6 节｜87分钟

展开

视频：

22-1 课堂介绍

02:14

视频：

22-2 云服务器的概念和作用

05:39

视频：

22-3 云服务器的选择和购买

17:02

视频：

22-4 centos 7.9 项目环境搭建和部署

26:22

视频：

22-5 pm2 的使用和自动化部署

24:41

视频：

22-6 课堂总结

10:09

本课程已完结