微信小程序全栈开发实战 / 手把手带你实现一款电商小程序

Name: 微信小程序全栈开发实战
Author: 李艺

李艺腾讯云TVP

更新：2026-07-15 05:27:48

课程目录
课程介绍

06 | 开发环境配置：创建你的第一个小程序项目
07 | icon组件：关于图标的4个实现方案
08 | progress组件：如何自定义实现一个环形进度条？
09 | rich-text组件：如何单击预览rich-text中的图片并保存？
10 | view容器组件及Flex布局（一）：学习容器组件view及其重要属性
11 | view容器组件及Flex布局（二）：介绍flex布局中常用的样式及样式值
12 | 可移动容器及可移动区域（一）：学习使用movable-view与movable-area组件
13 | 可移动容器及可移动区域（二）：如何实现侧滑删除功能
14 | scroll-view介绍：在小程序中如何实现滚动锚定？
15 | scroll-view介绍：如果渲染一个滚动的长列表？
16 | 滚动选择器（一）：学习使用选择器组件
17 | 滚动选择器（二）：使用两种方式自定义实现省、市、区三级联动的选择器
18 | 滑动选择器表单组件：如何基于wxs自定义一个竖向的slider？
19 | 页面链接组件：如何自定义一个导航栏？
20 | image媒体组件（上）：如何实现图片的懒加载？
21 | image媒体组件（下）：开发中经常遇到的问题？
22 | 如何实现直播间功能？（一）：了解live-pusher、live-player组件的主要属性及使用限制
23 | 如何实现直播间功能？（二）：如何开启、使用腾讯云的云直播功能
24 | 如何实现直播间功能？（三）：安装与使用ffmepg，及使用ffmpeg进行推拉流验证
25 | 如何实现直播间功能？（四）：使用live-pusher、live-player组件在小程序中实现直播功能
26 | 如何实现直播间功能？（五）：同层渲染
27 | 如何实现直播间功能？（六）：live-pusher、live-player组件在开发中的常见问题
28 | web-view（一）：了解session、cookie等相关基本概念
29 | web-view（二）：了解常见的四种鉴权方式
30 | web-view（三）：如何使用koa框架，及如何进行热加载？
31 | web-view（四）：如何在服务器端实现cookie与sesson的生成？
32 | web-view（五）：如何将session存储到服务器端，及如何实现token验证？
33 | web-view（六）：基于koa中间件，实现微信一键登录的后端接口
34 | web-view（七）：实现微信用户一键登录
35 | web-view（八）：了解正确的微信登录姿势
36 | web-view（九）：web-view组件在开发的常见问题讲解
37 | WebGL介绍（一）：了解WebGL相关的基础概念
38 | WebGL介绍（二）：如何在小程序中取到WebGL上下文环境对象
39 | WebGL介绍（三）：了解WebGL的世界坐标系
40 | WebGL介绍（四）：重新认识右手坐标系及如何编写顶点着色器代码
41 | WebGL介绍（五）：学习片断着色器编写，了解变量修饰变型uniform与attribute
42 | WebGL介绍（六）：了解在WebGL中裁剪空间是如何裁剪出来的
43 | WebGL介绍（七）：了解着色器变量值的绑定及三种三角形绘制模式之间的差异
44 | WebGL介绍（八）：在着色器中使用共享变量，绘制一个颜色渐变的正方形
45 | WebGL介绍（九）：完成动画
46 | WebGL介绍（十）：绘制一个旋转的立方体
47 | WebGL介绍（十一）：在3D绘制中使用纹理材质
48 | WebGL介绍（十二）：如何创建相机、场景及光源
49 | WebGL介绍（十三）：创建加载器、渲染器与控制器，完成3D模型文件的加载与展示
50 | 网络接口简介（一）：如何使用wx.request接口
51 | 网络接口简介（二）：将登录代码模块化封装
52 | 网络接口简介（三）：Promise介绍及 6 个常用方法
53 | 网络接口简介（四）：Promise三个方法any、all与race的使用介绍
54 | 网络接口简介（五）：基于Promise+await、async关键字改写登录模块
55 | 网络接口简介（六）：关于Page页面隐藏代码执行及Promise对象的catch处理的补充
56 | 网络接口简介（七）：学习EventChannel对象
57 | 网络接口简介（八）：观察者模式介绍及Event模块实现
58 | 网络接口简介（九）：扩展wxp模块的request3方法，实现用户登录的自动融合
59 | tabBar组件（一）：系统默认的tabBar组件如何开启及使用
60 | tabBar组件（二）：基于系统提供的自定义方式，实现一个tabBar组件
61 | tabBar组件（三）：通过自定义组件扩展的方式，给任意组件添加通用方法
62 | 开放接口（一）：如何对Page进行全局扩展
63 | 开放接口（二）：优化前后端登录代码，解决后端解密错误
64 | 设备能力：如何实现扫码连WiFi功能？
65 | 前期留言集中答疑（一）
66 | 前期留言集中答疑（二）
67 | 搭建UI框架（一）：如何基于Vant快速创建小程序页面？
68 | 搭建UI框架（二）：使用art-template模板引擎
69 | 搭建UI框架（三）：规整后端koa项目结构
70 | 用户登录（一）：创建与使用数据库
71 | 用户登录（二）：创建sessionKey model并完善用户登录
72 | 商品列表页：创建分类模型
73 | 商品列表页：使用存储过程初始化分类表
74 | 商品列表页：创建商品表、品牌表
75 | 商品列表页：创建商品描述表
76 | 商品列表页：创建商品SKU表
77 | 商品列表页：初始化SKU表数据
78 | 商品列表页：创建商品列表接口
79 | 商品列表页：关联查询
80 | 商品列表页：实现vtabs侧边栏导航
81 | 商品列表页：调用商品分类分页列表接口
82 | 商品列表页：实现延迟加载
83 | 商品列表页：修改vtabs组件算法
84 | 商品列表页：实现分页加载
85 | 商品列表页：使用骨架屏
86 | 商品详情页：创建商品详情接口
87 | 商品详情页：使用EventChannel
88 | 商品详情页：显示标题与价格
89 | 商品详情页：使用Sketch
90 | 商品详情页：使用蓝湖
91 | 商品详情页：实现选择商品规格的UI
92 | 商品详情页：在底部添加商品导航组件
93 | 商品详情页：实现商品规格接口
94 | 商品详情页：展示商品规格以供选择
95 | 购物车页面：整合用户自动登录功能
96 | 购物车页面：添加 tabBar 导航
97 | 购物车页面：构建商品列表
98 | 购物车页面：实现编辑模式与正常模式切换
99 | 购物车页面：创建购物车模型
100 | 购物车页面：实现向购物车添加商品的接口
101 | 购物车页面：实现“加入购物车”功能
102 | 购物车页面：实现购物车拉取接口
103 | 购物车页面：调用购物车列表接口与绑定页面数据
104 | 购物车页面：实现改变购物车商品数量的接口
105 | 购物车页面：实现商品增减
106 | 购物车页面：实现批量删除
107 | 确认订单页面：实现地址项与商品列表UI
108 | 确认订单页面：绑定商品列表数据
109 | 确认订单页面：实现确认订单页面其它UI
110 | 购物车页面：尝试使用计算属性
111 | 快递地址列表页面：创建快递列表页面UI
112｜新增地址页：创建新增收货地址页面UI与双向绑定
113｜微信接口：验证接口是否可用
114｜收货地址列表页：从微信获取预存的收货地址
115｜后端：创建address模型与列表接口
116｜后端：创建新增收货地址接口、添加索引
117｜新增地址页：实现收货地址新增功能
118｜收货地址列表页：拉取真是收货地址并渲染
119｜收货地址列表页：优化微信收货地址获取的逻辑
120｜后端：实现收货地址编辑接口
121｜新增编辑地址页：实现前端编辑功能
122｜地址列表页：实现滑动删除功能的 UI
123｜地址列表页：实现地址删除接口及前端删除功能
124｜微信支付：申请微信认证及微信支付
125｜微信支付：登录商户平台作支付开发准备
126｜微信支付：安装微信支付模块 koa3-wechat
127｜微信支付：初始化 koa3-wechat 支付模块
128｜微信支付：使用 koa3-wechat 调用统一下单接口准备支付参数
129｜微信支付：使用 wx.requestPayment 接口发起微信支付
130｜微信支付：确认支付订单状态
131｜微信支付：在云服务器上部署测试代码与配置 nginx
132｜微信支付：测试支付确认接口是否可用
133｜确认下单页：清空已经下单的购物车商品
134｜微信支付：实现退款接口
135｜微信支付：尝试使用 weixin-pay 调用统一下单接口准备支付参数
136｜微信支付：解决 weixin-pay 退款失败的问题
137｜小微商户：申请帐号与支付测试
138｜小微商户：试用小微商户
139｜小微商户：实现下单接口
140｜小微商户：在手机上测试支付功能
141｜小微商户：解决商户 ID 不能为空等问题
142｜小微商户：实现支付结果回调的接口
143｜小微商户：实现退款接口
144｜公众号：公众号开发接入配置
145｜公众号：接管公众号消息并作应答
146｜微信认证：关于小程序公众号开放平台等帐号认证
147｜服务号：网页授权的两种方式
148｜云数据库：将线下数据库同步至线上
149｜网页授权：通过测试号拉取用户信息
150｜网页授权：在微信开发者工具中测试网页授权代码
151｜测试：使用内网穿透服务 ngrok
152｜微页面：如何实现 JS-SDK 的初始化
153｜云开发：创建第一个小程序云开发项目
154｜云开发：创建第一个云开发环境
155｜云开发：创建第一个云函数login
156｜云函数：如何获取用户的openid
157｜微信支付：基于云函数实现微信支付
158｜云数据库：如何创建集合并实现数据的基本操作
159｜云函数：如何在本地调试云函数
160｜云数据库：如何在小程序中操作云数据库
161｜TCB：小程序与公众号共享云环境
162｜云开发：使用实时数据监听实现多端信息同步
163｜云数据库与云存储：使用事务与图片的上传下载功能
164｜云环境：通过安装扩展应用快速实现功能
165｜广告：创建与展示 Banner 广告
166｜广告：创建与使用视频激励广告
167｜广告：使用封面广告与自定义模板广告
168｜插件开发：关于微信小程序插件的基础介绍
169｜插件开发：创建第一个插件项目
170｜插件开发：实现“每日天气”第一个版本的功能
171｜插件开发：插件的提交审核与使用
172｜插件开发：实现第二个版本的功能“每日微报”
173｜插件开发：在插件中调用云函数
174｜订阅与通知：实现消息订阅功能
175｜插件开发：转发插件内页面
176｜在小程序中使用Vue：使用kbone创建同构项目
177｜Webpack构建小程序项目的示例：支持原生混合开发与云开发
178｜课程答疑：如何使用源码
179｜课程回顾及结束语

课程介绍

你将获得 2020 小程序最新功能全解析；常用组件与接口的最佳实践；打通前后端、云开发全栈技能；学会用技术手段实现流量变现。讲师介绍课程介绍...

你将获得

2020 小程序最新功能全解析；
常用组件与接口的最佳实践；
打通前后端、云开发全栈技能；
学会用技术手段实现流量变现。

讲师介绍

课程介绍

因此，本课程将在基础部分讲解常用的组件与接口，并且注重与最佳实践和易错问题的结合。在实战项目的安排上，为了避免实例太多，知识断裂无序，会带你开发一个大的项目，把绝大部分小程序开发的知识和技术包括进去，同时将必须的基础知识，在课程中按从易到难的顺序，穿插项目讲解，相信会让你受益匪浅。

课程目录

适合人群

无论你是前端工程师，还是后端开发者，只要你想学习小程序开发，都能在本课程中快速入门。项目讲解中，不仅讲授如何来做，还会告诉你为什么这样做，面向原因式的讲解。所以，即使是转型做小程序开发的产品经理，又或是刚刚毕业的计算机专业学生，都可以在这门课程中找到学习的价值。

06 | 开发环境配置：创建你的第一个小程序项目

07 | icon组件：关于图标的4个实现方案

08 | progress组件：如何自定义实现一个环形进度条？

09 | rich-text组件：如何单击预览rich-text中的图片并保存？

10 | view容器组件及Flex布局（一）：学习容器组件view及其重要属性

11 | view容器组件及Flex布局（二）：介绍flex布局中常用的样式及样式值

12 | 可移动容器及可移动区域（一）：学习使用movable-view与movable-area组件

13 | 可移动容器及可移动区域（二）：如何实现侧滑删除功能

14 | scroll-view介绍：在小程序中如何实现滚动锚定？

15 | scroll-view介绍：如果渲染一个滚动的长列表？

16 | 滚动选择器（一）：学习使用选择器组件

17 | 滚动选择器（二）：使用两种方式自定义实现省、市、区三级联动的选择器

18 | 滑动选择器表单组件：如何基于wxs自定义一个竖向的slider？

19 | 页面链接组件：如何自定义一个导航栏？

20 | image媒体组件（上）：如何实现图片的懒加载？

21 | image媒体组件（下）：开发中经常遇到的问题？

22 | 如何实现直播间功能？（一）：了解live-pusher、live-player组件的主要属性及使用限制

23 | 如何实现直播间功能？（二）：如何开启、使用腾讯云的云直播功能

24 | 如何实现直播间功能？（三）：安装与使用ffmepg，及使用ffmpeg进行推拉流验证

25 | 如何实现直播间功能？（四）：使用live-pusher、live-player组件在小程序中实现直播功能

26 | 如何实现直播间功能？（五）：同层渲染

27 | 如何实现直播间功能？（六）：live-pusher、live-player组件在开发中的常见问题

28 | web-view（一）：了解session、cookie等相关基本概念

29 | web-view（二）：了解常见的四种鉴权方式

30 | web-view（三）：如何使用koa框架，及如何进行热加载？

31 | web-view（四）：如何在服务器端实现cookie与sesson的生成？

32 | web-view（五）：如何将session存储到服务器端，及如何实现token验证？

33 | web-view（六）：基于koa中间件，实现微信一键登录的后端接口

34 | web-view（七）：实现微信用户一键登录

35 | web-view（八）：了解正确的微信登录姿势

36 | web-view（九）：web-view组件在开发的常见问题讲解

37 | WebGL介绍（一）：了解WebGL相关的基础概念

38 | WebGL介绍（二）：如何在小程序中取到WebGL上下文环境对象

39 | WebGL介绍（三）：了解WebGL的世界坐标系

40 | WebGL介绍（四）：重新认识右手坐标系及如何编写顶点着色器代码

41 | WebGL介绍（五）：学习片断着色器编写，了解变量修饰变型uniform与attribute

42 | WebGL介绍（六）：了解在WebGL中裁剪空间是如何裁剪出来的

43 | WebGL介绍（七）：了解着色器变量值的绑定及三种三角形绘制模式之间的差异

44 | WebGL介绍（八）：在着色器中使用共享变量，绘制一个颜色渐变的正方形

45 | WebGL介绍（九）：完成动画

46 | WebGL介绍（十）：绘制一个旋转的立方体

47 | WebGL介绍（十一）：在3D绘制中使用纹理材质

48 | WebGL介绍（十二）：如何创建相机、场景及光源

49 | WebGL介绍（十三）：创建加载器、渲染器与控制器，完成3D模型文件的加载与展示

50 | 网络接口简介（一）：如何使用wx.request接口

51 | 网络接口简介（二）：将登录代码模块化封装

52 | 网络接口简介（三）：Promise介绍及 6 个常用方法

53 | 网络接口简介（四）：Promise三个方法any、all与race的使用介绍

54 | 网络接口简介（五）：基于Promise+await、async关键字改写登录模块

55 | 网络接口简介（六）：关于Page页面隐藏代码执行及Promise对象的catch处理的补充

56 | 网络接口简介（七）：学习EventChannel对象

57 | 网络接口简介（八）：观察者模式介绍及Event模块实现

58 | 网络接口简介（九）：扩展wxp模块的request3方法，实现用户登录的自动融合

59 | tabBar组件（一）：系统默认的tabBar组件如何开启及使用

60 | tabBar组件（二）：基于系统提供的自定义方式，实现一个tabBar组件

61 | tabBar组件（三）：通过自定义组件扩展的方式，给任意组件添加通用方法

62 | 开放接口（一）：如何对Page进行全局扩展

63 | 开放接口（二）：优化前后端登录代码，解决后端解密错误

64 | 设备能力：如何实现扫码连WiFi功能？

65 | 前期留言集中答疑（一）

66 | 前期留言集中答疑（二）

67 | 搭建UI框架（一）：如何基于Vant快速创建小程序页面？

68 | 搭建UI框架（二）：使用art-template模板引擎

69 | 搭建UI框架（三）：规整后端koa项目结构

70 | 用户登录（一）：创建与使用数据库

71 | 用户登录（二）：创建sessionKey model并完善用户登录

72 | 商品列表页：创建分类模型

73 | 商品列表页：使用存储过程初始化分类表

74 | 商品列表页：创建商品表、品牌表

75 | 商品列表页：创建商品描述表

76 | 商品列表页：创建商品SKU表

77 | 商品列表页：初始化SKU表数据

78 | 商品列表页：创建商品列表接口

79 | 商品列表页：关联查询

80 | 商品列表页：实现vtabs侧边栏导航

81 | 商品列表页：调用商品分类分页列表接口

82 | 商品列表页：实现延迟加载

83 | 商品列表页：修改vtabs组件算法

84 | 商品列表页：实现分页加载

85 | 商品列表页：使用骨架屏