微信小程序这块,很多人是「用过但没写过」:能照着文档拼出一个页面,却说不清 WXML 和 HTML 到底差在哪,数据一变视图怎么跟着动,登录态和支付怎么串起来。这门课面向的就是这种状态——不是零基础扫盲,而是把小程序开发里那些绕不开的机制讲透,再用一个完整的电商项目把它们串成一条线。

先看看自己缺的到底是哪一块

  • 会写 Vue 或 React,但打开小程序开发者工具就发懵:没有 DOM,没有 window,那套「取节点、改样式」的习惯直接失效。
  • 能改别人写好的小程序页面,但只要涉及登录、下单、支付这类要跟服务端来回的流程,就得去翻同事的代码。
  • 知道有 setData,但说不清为什么它慢、什么情况下会踩坑、页面栈和组件生命周期到底谁先谁后。
  • 做过零散的小 demo,没做过一个从首页、分类、商品详情一路到购物车和订单的完整链路。

如果上面有几条说中了你,那这门课的定位就很清楚:补机制、补流程、补一个能跑通的完整项目经验。

基础部分要解决的具体问题

小程序最容易被低估的是它的「双线程」结构。逻辑层跑在 JSCore 里,渲染层是另一套,两层之间靠消息通信,所以setData的每一次数据传递都是有成本的。理解这一点,才知道为什么频繁 setData 会卡、为什么长列表要做局部更新。基础部分围绕的就是这类机制性问题:

  • WXML 的数据绑定、条件渲染、列表渲染,和常见框架的模板语法对应关系,以及语法上的差异点。
  • WXSS 的尺寸单位与样式隔离规则,为什么这里的 rpx 和常规移动端适配思路不完全一样。
  • 页面生命周期、组件生命周期、应用生命周期的执行顺序,以及页面栈的入栈出栈行为。
  • 网络请求封装、本地存储、路由跳转的几种方式及各自适用场景。

这些点单独看都很小,但它们决定了你后面写项目时是「碰运气调通」还是「知道为什么能通」。

项目部分真正练的是什么

慕尚花坊是一个电商场景的完整小程序。选这类项目不是为了多敲几行代码,而是因为电商几乎把小程序的常见交互都覆盖了一遍:列表分页加载、下拉刷新、商品规格选择、购物车状态同步、地址管理、订单流转、以及绕不开的登录与支付授权。

具体会碰到的练习点:

  • 首页与分类页的数据组织方式,分类列表和商品列表如何复用同一套渲染逻辑。
  • 商品详情页的规格弹层,涉及父子组件通信和多状态切换,是典型的组件拆分练习。
  • 购物车的本地与服务端状态同步,什么时候信任本地、什么时候必须回源。
  • 登录、获取用户信息、下单、发起支付这一整条链路,涉及异步时序和错误处理。
  • 接口封装的分层,把请求、错误提示、登录态校验集中处理,而不是散在每个页面里。

做项目最容易暴露的问题是:页面能显示,但状态一乱就崩。跟着做一遍的价值就在于,你会被迫面对状态管理、组件通信和异步时序这些平时能绕开的东西。

学完之后应该能回答的问题

  • 为什么小程序里直接操作 DOM 那套思路行不通,替代方案是什么?
  • setData 的性能开销从哪来,长列表场景下你会怎么优化?
  • 一个页面从打开到渲染完成,生命周期按什么顺序走?组件和页面谁先触发?
  • 小程序登录态是怎么维持的,token 过期后你打算怎么处理?
  • 如果让你从零做一个带购物车和订单的小程序,页面和组件你会怎么划分?

能顺畅答出这些,说明你不只是「跟做过一遍」,而是把机制和项目连上了。备课时可以把这些问题当作自测清单,卡在哪一条,就回到对应的小节重看。

�й��΢��С���� +��Ŀ��С���������Ľ�л�����Ŀ ��

��С�׵���ͨ������С���򿪷����ļ���

�༭����

ȫ�渲��С�������֪ʶ��ʵս��Ŀ��ѧ����������Ľ�л�����Ŀ��

? �༭�Ƽ�

�й��΢��С����γ̣��ӻ����﷨��ʵս��Ŀ�������������С���򿪷���

�����

? С�������֪ʶȫ�渲��
? ʵս��Ŀ��ѧ��ѧ������
? Ľ�л�����Ŀʵս��������������

�γ�Ŀ¼

? ��Ƶ
    ��Ƶ�ؿ�.zip  [1.8 MB]
    100-��չ-VsCode ����С������Ŀ�ʹ����ʽ��.mp4  [252.7 MB]
    039-wxml�﷨-����˫�����ݰ�.mp4  [127.9 MB]
    036-wxml�﷨-setData() �޸�����.mp4  [73.6 MB]
    083-�ְ�����-�ְ�Ԥ����.mp4  [78.9 MB]
    005-С�������-��Ŀ��Ա�������Ա.mp4  [30.4 MB]
    081-�ְ�����-���÷ְ��Լ����������ԭ��.mp4  [115.3 MB]
    059-�Զ������-���ݺͷ���.mp4  [99.5 MB]
    023-���-�������-�ֲ�ͼͼƬ����.mp4  [136.7 MB]
    047-��������-ҳ����������.mp4  [134.8 MB]
    148-�ջ���ַ-�������������Լ���װ�ӿ� API.mp4  [49.2 MB]
    120-���������װ-�ӿڵ��÷�ʽ˵��.mp4  [97.1 MB]
    165-��Ʒ����-��Ʒ�б�-ʵ���������ظ��๦��.mp4  [26.9 MB]
    020-��ʽ-ȫ����ʽ�;ֲ���ʽ.mp4  [35.1 MB]
    125-��Ŀ��ҳ-��ҳ�Ǽ������.mp4  [207.5 MB]
    117-���������װ-��װ uploadFile.mp4  [374.5 MB]
    136-�����չ-miniprogram-computed �������Ժͼ�����.mp4  [261.4 MB]
    135-�����չ-�󶨶�� store �Լ������ռ�.mp4  [40.8 MB]
    095-��Ŀ��ʼ��-Ľ�л�����Ŀ����.mp4  [36.5 MB]
    001.�̳̼��.mp4  [12.4 MB]
    055-С����API-ҳ�洦������-��������.mp4  [176.4 MB]
    014-�����ļ�-ȫ������-tabbar ����.mp4  [103.3 MB]
    028-���-�������-�Ƽ���Ʒ����-ʵ�ֽṹ��ʽ.mp4  [117.3 MB]
    108-���������װ-��װ�����ݷ���.mp4  [189.5 MB]
    159-�ջ���ַ-ʵ�ָ����ջ���ַ����.mp4  [66.9 MB]
    058-�Զ������-����-ע��-ʹ�����.mp4  [98.7 MB]
    093-����-�Զ��嵼����.mp4  [68.8 MB]
    074-�Զ������-��չ-�ⲿ��ʽ��.mp4  [96.0 MB]
    051-С����API-���潻��-loading ��ʾ��.mp4  [93.0 MB]
    078-npm֧��-vant������ʹ��.mp4  [205.8 MB]
    127-��Ʒ����-��Ⱦһ�����ಢʵ���л�����.mp4  [214.3 MB]
    168-��Ʒ����-��Ʒ�б�-ʵ������ˢ�¹���.mp4  [23.4 MB]
    099-��Ŀ��ʼ��-������Ŀҳ���ļ��ͻ�������.mp4  [52.9 MB]
    065-�Զ������-���ݼ�����observers.mp4  [251.3 MB]
    190-��Ʒ����-��ȡ����������Ʒ����.mp4  [35.4 MB]
    186-��������-���÷ְ�����ת������ҳ��+�ӿ� API.mp4  [258.0 MB]
    098-��Ŀ��ʼ��-�Զ��幹�� npm�Լ�����Sass.mp4  [95.8 MB]
    189-��Ʒ����-��ȡ������������.mp4  [36.8 MB]
    200-��Ŀ����-��ʾ��������.mp4  [15.7 MB]
    176-���ﳵ-���ﳵ���� Store ����.mp4  [17.9 MB]
    015-�����ļ�-ҳ������.mp4  [36.3 MB]
    045-��������-С�����������ڽ���.mp4  [25.5 MB]
    061-�Զ������-���wxml��slot.mp4  [202.0 MB]
    170-��Ʒ����-�Ż�-С�������� @ ·�������Ż�����·��.mp4  [23.7 MB]
    179-���ﳵ-����ȫѡ��ť��ѡ��״̬.mp4  [35.2 MB]
    160-�ջ���ַ-ʵ��ɾ���ջ���ַ.mp4  [22.9 MB]
    169-��Ʒ����-��Ʒ������Ⱦ+Ԥ��ͼƬ.mp4  [206.8 MB]
    035-wxml�﷨-�����Ͱ�����.mp4  [141.4 MB]
    184-���ﳵ-���ﳵ��Ʒ�ϼ�.mp4  [24.7 MB]
    006-С�������-С���򿪷��� ID.mp4  [27.0 MB]
    198-�����б�-���������б�ģ�����.mp4  [20.0 MB]
    178-���ﳵ-������Ʒ�Ĺ���״̬.mp4  [43.9 MB]
    086-��������-ת������.mp4  [73.1 MB]
    012-�����ļ�-ȫ������-pages ����.mp4  [46.3 MB]
    072-�Զ������-��չ-ʹ�� Component ����ҳ��.mp4  [160.0 MB]
    181-���ﳵ-������Ʒ��������˼·����.mp4  [14.9 MB]
    032-�¼�ϵͳ-�¼������Լ���ֹ�¼�ð��.mp4  [59.1 MB]
    121-��Ŀ��ҳ-��ȡ��ҳ����.mp4  [277.1 MB]
    122-��Ŀ��ҳ-�����ֲ�ͼ������Ⱦ.mp4  [172.6 MB]
    066-�Զ������-���ͨ��-�����Ӵ�ֵ.mp4  [148.7 MB]
    116-���������װ-���� loading ��ʾ.mp4  [142.1 MB]
    138-�û���¼-ʲô�� token.mp4  [12.4 MB]
    140-�û���¼-ʵ��С�����¼����.mp4  [56.9 MB]
    059-�Զ������-���ݺͷ���(1).mp4  [99.5 MB]
    149-�ջ���ַ-�ռ�ʡ��������.mp4  [53.4 MB]
    161-�ջ���ַ-��չ-ɾ������ SwipeCell �Զ�����.mp4  [65.1 MB]
    142-�û���Ϣ-��ȡ�û���Ϣ���洢�� Store.mp4  [50.0 MB]
    092-����-С�������ͨ��-�¼�����.mp4  [38.0 MB]
    196-С����֧��-����΢��֧��.mp4  [23.3 MB]
    144-�ְ�����-���÷ְ��Լ�Ԥ����.mp4  [52.6 MB]
    022-���-�������-�ֲ�ͼ�������.mp4  [146.1 MB]
    069-�Զ������-�����������.mp4  [147.0 MB]
    115-���������װ-���� loading.mp4  [98.8 MB]
    025-���-�������-��Ʒ��������.mp4  [69.3 MB]
    167-��Ʒ����-��Ʒ�б�-�����������б�����.mp4  [34.7 MB]
    090-����-��ܽӿ�-getApp()-ȫ�����ݹ���.mp4  [98.9 MB]
    085-��������-��ȡ΢���dz�.mp4  [130.6 MB]
    124-��Ŀ��ҳ-��Ʒ����+�����+����ϲ��+�����Ƽ�.mp4  [379.9 MB]
    089-��������-�ͷ�����.mp4  [42.5 MB]
    080-�ְ�����-���ְܷ�����.mp4  [30.8 MB]
    131-�����չ-�������ʹ�� Store ����.mp4  [40.5 MB]
    199-������-������������������.mp4  [480.6 MB]
    191-��Ʒ����-�ռ��ʹ�ʱ��.mp4  [45.3 MB]
    158-�ջ���ַ-�ջ���ַ�б���Ⱦ.mp4  [35.3 MB]
    101-ͨ��ģ���װ-Ϊʲô����ģ���װ.mp4  [33.9 MB]
    084-��������-��ȡ΢��ͷ��.mp4  [84.2 MB]
    166-��Ʒ����-��Ʒ�б�-�ж������Ƿ�������.mp4  [32.6 MB]
    152-�ջ���ַ-�ܾ���Ȩ����Ȩ����������.mp4  [483.9 MB]
    155-�ջ���ַ-������֤-async-validator ����ʹ��.mp4  [63.1 MB]
    071-�Զ������-�ܽ�С������������.mp4  [100.6 MB]
    076-npm֧��-���ʹ�� npm ��.mp4  [66.9 MB]
    172-���ﳵ-���빺�ﳵ-ģ���������Ⱦ.mp4  [34.6 MB]
    114-���������װ-���� loading.mp4  [85.2 MB]
    053-С����API-���ش洢.mp4  [188.5 MB]
    154-�ջ���ַ-��Ѷλ�÷������ַ������ȡ��ַ.mp4  [106.2 MB]
    042-wxml�﷨-������Ⱦ.mp4  [208.2 MB]
    129-�����չ-mobx-miniprogram ����.mp4  [22.9 MB]
    096-��Ŀ��ʼ��-����ǰ��-���뿪��Ȩ��.mp4  [66.4 MB]
    008-С�������-����С������Ŀ.mp4  [45.7 MB]
    123-��Ŀ��ҳ-ʵ���ֲ�ͼ��ָʾ�������.mp4  [147.6 MB]
? PPT
    ? Ľ�л��� ppt
        Ľ�л��� ppt�ĵ�.zip  [1.8 MB]
        Ľ�л���.pdf  [505.8 KB]
    ? ������� ppt
        С������� ppt�ĵ�.zip  [1.8 MB]
        07-΢��С����-С����API.pdf  [4.5 MB]
        10-΢��С����-�ְ�����.pdf  [4.2 MB]
        12-΢��С����-����.pdf  [605.2 KB]
        05-΢��С����-ģ���﷨.pdf  [4.3 MB]
        03-΢��С����-��ʽ�����.pdf  [4.6 MB]
        08-΢��С����-�Զ������.pdf  [5.0 MB]
        02-΢��С����-�����ļ�.pdf  [4.3 MB]
        09-΢��С����-npm ֧��.pdf  [4.1 MB]
        04-΢��С����-�¼�����.pdf  [4.1 MB]
        01-΢��С����-С�������.pdf  [950.8 KB]
        06-΢��С����-��������.pdf  [4.4 MB]
        11-΢��С����-��������.pdf  [4.2 MB]
    PPT�ؿ�.zip  [1.8 MB]

�ʺ���Ⱥ

  • С���򿪷�����
  • ǰ�˿�����
  • ���ƶ�Ӧ�ÿ�������Ȥ��

ѧϰ�ջ�

����С��������﷨��API
ѧ��ʹ�ÿ�ܺ������
�������С������Ŀ����

ף��ѧϰ��죡

ѧ�����ɣ�ǰ���ƽ���