微信小程序这块,很多人卡在同一个地方:官方文档翻得懂,真给一个需求却不知道怎么拆页面、怎么定数据结构、怎么在真机上把交互跑通。这个资料包围绕"慕尚花坊"这个完整项目展开,从基础概念一路做到可运行的小程序。下面按能力缺口说明它适合补什么、练什么。
先确认你缺的是哪一块
小程序开发的门槛不在语法,而在于它有一套和普通网页不同的运行环境。如果你属于下面几种情况,这份材料对症:
- 写过 Vue 或 React,知道组件化,但对小程序的页面栈、生命周期、数据绑定方式没概念;
- 看得懂 WXML、WXSS,却说不清 rpx 和 px 的换算逻辑,也不清楚样式隔离规则;
- 会用几个常用组件,但没独立搭过一个多页面、带数据请求和状态传递的小程序;
- 面试被问到小程序登录流程、授权、本地存储,只能背结论讲不出过程。
如果你已经独立上线过小程序,这套内容对你偏基础,收益有限。它更适合"会一点但没做完整项目"的阶段。
慕尚花坊这条主线在练什么
选一个电商类项目做主线,好处是能把零散知识点串起来。花坊这个场景涉及商品列表、详情、分类、购物车、下单流程等典型页面,几乎每个环节都会牵出不同的技术点。
比如商品列表会逼你处理:
- 数据从哪来——是本地 mock 还是走接口,请求怎么封装、怎么统一处理加载和错误态;
- 列表怎么渲染——列表渲染的写法、key 的作用、图片懒加载与长列表的性能权衡;
- 页面之间怎么传参——列表跳详情传什么、详情页如何取参、返回时状态怎么同步。
再往后到购物车和下单,就会碰上本地存储、数据缓存策略、表单校验、支付流程的前置条件等更贴近真实业务的问题。这些不是单独某个 API 能解决的,需要你在项目里反复调整。
做完之后,你应该能回答这些问题
检验自己有没有真学会,不看敲了多少行代码,看能不能把下面这些问题讲清楚:
- 小程序的页面和组件在生命周期上有什么差别,什么逻辑该写在页面里、什么该抽到组件里?
- 同一个页面里父组件给子组件传值、子组件回调父组件,各自有哪几种写法?
- 为什么小程序里改数据要用 setData,直接改 data 会怎样?setData 频繁调用会带来什么问题?
- 登录态是怎么建立的,从获取用户标识到本地保存凭证,中间经历了哪些步骤?
- rpx 的换算基准是什么,什么情况下反而不该用它?
如果这些问题你能顺着项目代码讲出前因后果,说明这套资料你已经吃透了。反过来,如果只能看着代码说"这里就是这么写的",建议回去把对应章节重做一遍,自己改需求验证一遍。
配套练习该怎么用
配套的讲义和课件更适合当"对照表"而不是"阅读材料"。建议的用法是:
- 先看视频里的效果,暂停,自己试着实现,卡住了再对照讲义找思路;
- 每完成一个页面,试着改一个需求,比如把列表换成两列布局、给详情加个收藏按钮,看自己能不能不查资料就改出来;
- 项目跑通后,把数据来源从本地换成真实接口,或者自己写一份 mock,练请求层封装;
- 把慕尚花坊的某个页面单独拎出来重写一遍,不看原代码,卡在哪里就回去补哪里。
项目类资料的最大风险是"跟着敲一遍就以为会了"。真正的分水岭在于脱离教程之后你能不能从零起一个页面。带着这个标准去用这份材料,它对你才有价值。
尚硅谷微信小程序+慕尚花坊项目
实战项目,掌握微信小程序开发
编辑点评
项目驱动,深入浅出,从基础到实战,适合初学者和进阶者。
⭐ 编辑推荐
跟随慕尚花坊项目,学习微信小程序开发,掌握组件、API、框架扩展等核心技能。
课程亮点
• 实战项目教学
• 全面覆盖微信小程序开发
• 适合初学者和进阶者
课程目录
📁 视频
097-项目初始化-创建项目与项目初始化.mp4 [70.2 MB]
029-组件-组件案例-字体图标的使用.mp4 [196.9 MB]
006-小程序基础-小程序开发者 ID.mp4 [27.0 MB]
147-更新用户信息-更新用户昵称.mp4 [47.3 MB]
032-事件系统-事件分类以及阻止事件冒泡.mp4 [59.1 MB]
186-订单结算-配置分包并跳转到结算页面+接口 API.mp4 [258.0 MB]
054-小程序API-路由与通信-编程式导航.mp4 [173.3 MB]
067-自定义组件-组件通信-子往父传值.mp4 [187.2 MB]
163-商品管理-商品列表-准备列表请求参数.mp4 [24.1 MB]
158-收货地址-收货地址列表渲染.mp4 [35.3 MB]
046-生命周期-应用生命周期.mp4 [85.9 MB]
133-框架扩展-在页面中使用 Store 数据-方式2.mp4 [29.8 MB]
073-自定义组件-拓展-组件复用机制 behaviors.mp4 [214.9 MB]
047-生命周期-页面生命周期.mp4 [134.8 MB]
110-网络请求封装-定义请求-响应拦截器.mp4 [263.9 MB]
093-补充-自定义导航栏.mp4 [68.8 MB]
112-网络请求封装-使用请求-响应拦截器.mp4 [273.1 MB]
017-配置文件-sitemap.json 文件.mp4 [40.4 MB]
087-开放能力-分享到朋友圈.mp4 [61.3 MB]
148-收货地址-定义新增参数以及封装接口 API.mp4 [49.2 MB]
130-框架扩展-mobx-miniprogram 创建 Store 对象.mp4 [30.8 MB]
072-自定义组件-拓展-使用 Component 构造页面.mp4 [160.0 MB]
180-购物车-实现全选和全不选功能.mp4 [44.5 MB]
197-小程序支付-支付状态查询.mp4 [21.6 MB]
165-商品管理-商品列表-实现上拉加载更多功能.mp4 [26.9 MB]
010-小程序基础-如何调试小程序代码.mp4 [74.4 MB]
193-小程序支付-梳理小程序支付流程.mp4 [28.5 MB]
152-收货地址-拒绝授权和授权完整的流程.mp4 [483.9 MB]
052-小程序API-界面交互-模态对话框-消息提示框.mp4 [85.1 MB]
037-wxml语法-拓展-setData修改对象类型数据.mp4 [214.3 MB]
077-npm支持-自定义构建 npm.mp4 [117.3 MB]
051-小程序API-界面交互-loading 提示框.mp4 [93.0 MB]
066-自定义组件-组件通信-父往子传值.mp4 [148.7 MB]
080-分包加载-介绍分包加载.mp4 [30.8 MB]
103-通用模块封装-模态对话框封装.mp4 [248.1 MB]
089-开放能力-客服功能.mp4 [42.5 MB]
070-自定义组件-组件所在页面的生命周期.mp4 [54.4 MB]
060-自定义组件-属性 properties.mp4 [190.5 MB]
172-购物车-加入购物车-模板分析和渲染.mp4 [34.6 MB]
098-项目初始化-自定义构建 npm以及集成Sass.mp4 [95.8 MB]
115-网络请求封装-完善 loading.mp4 [98.8 MB]
134-框架扩展-fields、actions 对象写法.mp4 [31.9 MB]
028-组件-组件案例-推荐商品区域-实现结构样式.mp4 [117.3 MB]
194-小程序支付-创建平台订单.mp4 [17.7 MB]
058-自定义组件-创建-注册-使用组件.mp4 [98.7 MB]
085-开放能力-获取微信昵称.mp4 [130.6 MB]
159-收货地址-实现更新收货地址功能.mp4 [66.9 MB]
140-用户登录-实现小程序登录功能.mp4 [56.9 MB]
039-wxml语法-简易双向数据绑定.mp4 [127.9 MB]
187-商品结算-获取收货地址.mp4 [33.8 MB]
082-分包加载-独立分包的配置.mp4 [49.9 MB]
034-事件系统-事件传参-mark 自定义数据.mp4 [104.8 MB]
075-自定义组件-完善复选框案例并总结自定义组件.mp4 [58.1 MB]
119-环境变量-小程序设置环境变量.mp4 [174.0 MB]
185-购物车-删除购物车中的商品.mp4 [35.3 MB]
005-小程序基础-项目成员和体验成员.mp4 [30.4 MB]
182-购物车-更新商品的购买数量.mp4 [91.7 MB]
176-购物车-购物车关联 Store 对象.mp4 [17.9 MB]
178-购物车-更新商品的购买状态.mp4 [43.9 MB]
022-组件-组件案例-轮播图区域绘制.mp4 [146.1 MB]
132-框架扩展-在页面中使用 Store 数据-方式1.mp4 [22.3 MB]
191-商品结算-收集送达时间.mp4 [45.3 MB]
086-开放能力-转发功能.mp4 [73.1 MB]
196-小程序支付-发起微信支付.mp4 [23.3 MB]
078-npm支持-vant组件库的使用.mp4 [205.8 MB]
183-购物车-更新商品购买数量防抖.mp4 [29.7 MB]
105-网络请求封装-为什么要封装 wx.request.mp4 [130.1 MB]
150-收货地址-收集新增地址其他请求参数.mp4 [35.7 MB]
014-配置文件-全局配置-tabbar 配置.mp4 [103.3 MB]
074-自定义组件-拓展-外部样式类.mp4 [96.0 MB]
084-开放能力-获取微信头像.mp4 [84.2 MB]
192-商品结算-提交订单请求参数验证.mp4 [56.0 MB]
096-项目初始化-开发前置-申请开发权限.mp4 [66.4 MB]
059-自定义组件-数据和方法.mp4 [99.5 MB]
118-网络请求封装-使用 npm 包发送请求.mp4 [151.8 MB]
104-通用模块封装-封装本地存储 API.mp4 [411.1 MB]
131-框架扩展-在组件中使用 Store 数据.mp4 [40.5 MB]
016-配置文件-项目配置文件和配置sass.mp4 [99.9 MB]
056-小程序API-页面处理函数-下拉刷新.mp4 [97.5 MB]
023-组件-组件案例-轮播图图片添加.mp4 [136.7 MB]
002-小程序基础-初识微信小程序.mp4 [34.9 MB]
055-小程序API-页面处理函数-上拉加载.mp4 [176.4 MB]
079-npm支持-Vant Weapp 组件样式覆盖.mp4 [167.2 MB]
170-商品管理-优化-小程序配置 @ 路径别名优化访问路径.mp4 [23.7 MB]
102-通用模块封装-消息提示模块封装.mp4 [260.9 MB]
020-样式-全局样式和局部样式.mp4 [35.1 MB]
038-wxml语法-拓展-setData修改数组类型数据.mp4 [150.3 MB]
155-收货地址-表单验证-async-validator 基本使用.mp4 [63.1 MB]
069-自定义组件-组件生命周期.mp4 [147.0 MB]
109-网络请求封装-wx.request 的注意事项.mp4 [111.8 MB]
064-自定义组件-拓展-小程序修改checkbox样式.mp4 [232.5 MB]
179-购物车-控制全选按钮的选中状态.mp4 [35.2 MB]
138-用户登录-什么是 token.mp4 [12.4 MB]
106-网络请求封装-request 实例方法.mp4 [250.7 MB]
174-购物车-加入购物车和立即购买区分处理.mp4 [61.9 MB]
004-小程序基础-完善小程序账号信息.mp4 [50.9 MB]
116-网络请求封装-控制 loading 显示.mp4 [142.1 MB]
071-自定义组件-总结小程序生命周期.mp4 [100.6 MB]
136-框架扩展-miniprogram-computed 计算属性和监听器.mp4 [261.4 MB]
167-商品管理-商品列表-节流阀进行列表节流.mp4 [34.7 MB]
📁 PPT
📁 小程序基础 ppt
06-微信小程序-生命周期.pdf [4.4 MB]
02-微信小程序-配置文件.pdf [4.3 MB]
10-微信小程序-分包加载.pdf [4.2 MB]
09-微信小程序-npm 支持.pdf [4.1 MB]
01-微信小程序-小程序基础.pdf [950.8 KB]
12-微信小程序-扩充.pdf [605.2 KB]
04-微信小程序-事件处理.pdf [4.1 MB]
05-微信小程序-模板语法.pdf [4.3 MB]
07-微信小程序-小程序API.pdf [4.5 MB]
08-微信小程序-自定义组件.pdf [5.0 MB]
11-微信小程序-开放能力.pdf [4.2 MB]
03-微信小程序-样式和组件.pdf [4.6 MB]
📁 慕尚花坊 ppt
慕尚花坊.pdf [505.8 KB]适合人群
- 微信小程序开发者
- 前端开发人员
- 编程爱好者
学习收获
掌握微信小程序开发基础
学会组件和API使用
实现项目实战经验
祝您学习愉快!
学有所成,前程似锦!






