第二篇　商品与展示：把货摆出来

选型和环境都就绪之后，第二篇解决的是最直观的问题：怎么把两百个 SKU 的货，像实体店橱窗一样摆进小程序里。这一篇全是顾客看得到的东西——商品模型设计得是否合理，直接决定店员上新累不累；列表分页顺不顺，决定顾客愿不愿意往下刷；详情图加载快不快，决定转化率。

本篇四节：先用 SPU/SKU 两张表把商品模型拆清楚，这是后面库存、价格、搜索一切的地基；再做商品列表的分页加载与骨架屏；然后是详情页的图片预览与富文本；最后收在图床上——云存储加 CDN 的组合拳，让两千张图也不拖垮首屏。

节 主题 关键产出
2.1 商品模型 goods 与 skus 两张集合
2.2 商品列表 分页加载与骨架屏
2.3 商品详情 图片预览与富文本
2.4 图床方案 云存储加 CDN 加速

做完这一篇，朋友在手机上刷到自己商品列表的那一刻，第一次觉得这个商城“像真的了”。

延伸阅读