这门课解决什么工作场景

在当前互联网技术栈中，掌握多端开发能力已成为前端工程师的重要竞争力，而支付宝小程序因其庞大的用户基数和商业支付场景，具有极高的就业市场价值。本课程的核心目标，是帮助开发者跨越从“通用 Web 开发”到“支付宝小程序独立交付”之间的技能鸿沟。它不局限于碎片化的语法点讲解，而是通过一个完整的、高颜值的电商实战项目，系统性地还原真实业务开发流程。对于希望丰富项目经验、准备转行进入电商或本地生活领域的职场人来说，这门课提供了一个从环境搭建到功能落地的全流程解决方案，让你在完成项目的同时，建立起对平台生态的深层理解。

入门门槛与学习路径

这门课的入门门槛适中，要求学习者具备扎实的 HTML、CSS 和 JavaScript 基础。如果你对这些前端基础概念还比较薄弱，建议先补齐相关知识，否则在学习生命周期和复杂交互时会感到吃力。学习建议按顺序推进：首先完成课前必读与环境搭建，务必亲手申请账号并配置开发者工具，这是后续所有操作的前提。接着深入第三章，彻底搞懂 app 与 page 的生命周期、全局配置以及导航逻辑，这是构建稳定应用的基石。随后进入第四章，重点攻克 Flex 布局，因为电商页面涉及大量的商品卡片排列和响应式对齐，这是实现“高颜值”界面的核心技术保障。不要跳过任何一个视频环节，尤其是生命周期部分，它与实际开发中的性能优化密切相关。

学后产出与资料配合

完成本课程后，你将能够独立从零开始搭建并开发一个结构规范的支付宝小程序。具体而言，你将掌握页面路由跳转、全局样式管理、复杂布局实现以及电商核心功能的逻辑编写，最终产出一个可直接放入作品集的完整项目。这不仅是一份简历亮点，更是你独立承担移动端项目开发能力的证明。在配合资料练习时，切忌只看不练。建议准备好纸笔记录关键 API 和配置项，每看完一个章节就在本地项目中复现效果，特别是 Flex 布局的多种属性组合，需要在代码中反复调试才能达到预期样式。通过这种“观看—复现—调试”的闭环，将课程中的知识点真正内化为你的工程实践能力，为应对更复杂的职场需求打下坚实基础。

课程目录

第1章 课程导学与准备工作【毕设优质项目】 2 节 | 19分钟 1-1 课前必读（不看会错过一个亿）.mp4
 1-2 课程导学 (18:10).mp4
 第2章 初识支付宝小程序 4 节 | 29分钟 2-1 创建小程序，申请appId，设置团队开发者 (07:47).mp4
 2-2 开发环境搭建&开发者工具介绍 (10:12).mp4
 2-3 开发第一个支付宝小程序hello world (05:45).mp4
 2-4 四种基本文件类型与page样式 (05:13).mp4
 第3章 支付宝小程序基础架构 

11 节 | 96分钟 3-1 app的三种文件类型与路径配置管理 (08:35).mp4
 3-2 结合生活实例讲解与演示app生命周期 (09:13).mp4
 3-3 页面的生命周期 - 上 (10:59).mp4
 3-4 页面的生命周期 - 下 (11:15).mp4
 3-5 全局常量、对象、自定义函数的使用 (06:47).mp4
 3-6 全局样式的使用和重写 (05:36).mp4
 3-7 全局与私有标题栏的配置 (05:22).mp4
 3-8 tab选项卡介绍与模块页面的创建 (08:01).mp4
 3-9 tab选项卡的配置与显示 (09:07).mp4
 3-

10 导航组件页面跳转 (13:11).mp4
 3-

11 导航api与章节回顾 (07:19).mp4
 第4章 支付宝小程序flex布局精讲与实战 

12 节 | 100分钟 4-1 flex布局的概念与模型 (04:55).mp4
 4-2 flex-direction 水平轴与交叉轴的排列方向 (09:18).mp4
 4-3 flex-warp 换行属性以及flex-flow的结合 (09:25).mp4
 4-4 justify-content在水平轴与交叉轴的对齐方式 (11:08).mp4
 4-5 align-items元素在交叉轴的对齐方式 (12:34).mp4
 4-6 align-content基于多轴线的对其方式 (10:48).mp4
 4-7 flex设置元素的排序、拉伸与缩放 (08:58).mp4
 4-8 flex设置元素的固定占比与重写对齐方式 (04:53).mp4
 4-9 模拟骰子1点数进行flex布局演练 (09:59).mp4
 4-10 模拟骰子2点数进行flex布局演练 (05:58).mp4
 4-11 模拟骰子3点数进行flex布局演练 (02:42).mp4
 4-12 模拟骰子4-6点数进行flex布局演练 (08:52).mp4
 第5章 支付宝小程序视图层与基础语法精讲 7 节 | 68分钟 5-1 数据绑定与渲染 (07:24).mp4
 5-2 ifelse条件渲染 (09:44).mp4
 5-3 for循环列表渲染 (07:48).mp4
 5-4 view与block的区别 (05:56).mp4
 5-5 6种不同的事件类型 (13:08).mp4
 5-6 dataset自定义数据的使用 (08:36).mp4
 5-7 使用rpx响应式像素实现自适应拉伸_音频.mp4
 (14:41) 第6章 支付宝小程序首页模块开发 

13 节 | 138分钟 6-1 图片组件的使用 (08:01).mp4
 6-2 图片的4种缩放模式与9种裁剪模式讲解 (13:32).mp4
 6-3 轮播图组件的使用与属性讲解 (13:29).mp4
 6-4 scroll-view组件的使用 (07:08).mp4
 6-5 开发首页轮播图 (10:14).mp4
 6-6 flex二级嵌套开发商城特色一栏_x264 (06:48).mp4
 6-7 可滚动视图组件开发推荐商品 (09:58).mp4
 6-8 完成纵向新品列表 (22:21).mp4
 6-9 发送httpRequest获取轮播图数据 (12:13).mp4
 6-

10 首页轮播图动态渲染 (07:07).mp4
 6-

11 网络请求获取推荐商品以及新品列表数据 (07:10).mp4
 6-

12 推荐商品以及新品列表数据渲染展示 (12:08).mp4
 6-

13 下拉实现首页数据刷新 (07:20).mp4
 第7章 商品分类、列表、详情模块开发 

17 节 | 169分钟 7-1 开发分类页面 - 固定搜索栏 (15:32).mp4
 7-2 开发分类页面 - 显示每一个分类元素 (10:31).mp4
 7-3 键盘回车触发confirm事件获取搜索框的值 (05:04).mp4
 7-4 页面带参与debugger调试 (07:35).mp4
 7-5 使用导航组件带参 (05:35).mp4
 7-6 根据不同参数发起网络请求查询商品列表 (09:57).mp4
 7-7 使用交互api提高用户体验 (05:24).mp4
 7-8 查询结果文字动态数据绑定与显示 (07:30).mp4
 7-9 使用模板实现商品列表代码公用 (11:29).mp4
 7-

10 httpRequest请求商品详情 (12:51).mp4
 7-

11 开发商品详情页 - 封面图 (09:31).mp4
 7-

12 开发商品详情页 - 基本信息渲染 上 (17:38).mp4
 7-

13 开发商品详情页 - 基本信息渲染 下 (11:36).mp4
 7-

14 开发商品详情页 - json解析渲染商品介绍 (11:54).mp4
 7-

15 开发商品详情页 - 固定底部操作栏 (12:15).mp4
 7-16 完善首页商品导航跳转_x264 (04:55).mp4
 7-

17 完善首页轮播图跳转 (09:16).mp4
 第8章 购物车模块开发 

14 节 | 164分钟 8-1 实现加入购物车动画 (20:37).mp4
 8-2 实现动画复原 (07:36).mp4
 8-3 购物车方案与缓存api (06:13).mp4
 8-4 商品加入购物车 (10:47).mp4
 8-5 完善相同商品加入购物车业务 (09:47).mp4
 8-6 开发空购物车页面与switchTab (12:33).mp4
 8-7 请求购物车真实数据 (11:00).mp4
 8-8 构建不可变商品列表 (11:48).mp4
 8-9 固定底部购物车操作栏 (12:41).mp4
 8-

10 渲染非空购物车与debugger调试js (13:49).mp4
 8-

11 自定义checkbox组件实现选择单个商品.. (18:50).mp4
 8-

12 自定义checkbox实现全选或取消全选 (11:47).mp4
 8-

13 重新计算商品金额和件数 (11:47).mp4
 8-

14 章节回顾 (03:57).mp4
 第9章 订单模块开发 7 节 | 70分钟 9-1 订单流程、订单状态、支付失败的业务讲解 (11:23).mp4
 9-2 构建预处理订单数据 (13:44).mp4
 9-3 渲染订单结算页面 (10:48).mp4
 9-4 监听文本框事件 (04:05).mp4
 9-5 生成待付款订单 (13:26).mp4
 9-6 清除购物车商品缓存 (09:40).mp4
 9-7 商品页直接购买 (06:43).mp4
 第10章 地址管理模块开发 

13 节 | 128分钟 10-1 渲染页面地址信息 (06:57).mp4
 10-2 渲染静态地址选择页面 (05:28).mp4
 10-3 渲染地址信息页面 (06:05).mp4
 10-4 城市选择api (07:46).mp4
 10-5 开发自定义城市组件.mp4
 (13:31) 10-6 提交新地址 (12:36).mp4
 10-7 订单页初始化地址信息 (13:02).mp4
 10-8 地址列表同步展示 (06:11).mp4
 10-9 编辑地址业务处理，更新订单结算页地址 (18:39).mp4
 10-

10 删除地址业务处理 (07:52).mp4
 10-

11 信封效果动态选中实现 (12:38).mp4
 10-

12 确认选择地址 (04:11).mp4
 10-

13 设为默认地址 (12:53).mp4
 第11章 个人信息页面开发与登录授权api讲解 

11 节 | 73分钟 11-1 团队协作细则 (03:14).mp4
 11-2 是否登录页面展示 (06:51).mp4
 11-3 授权登录业务梳理 (04:34).mp4
 11-4 授权api获取用户授权码 (10:03).mp4
 11-5 请求个人信息设置全局对象 (10:20).mp4
 11-6 完善提交订单的全局用户信息 (03:37).mp4
 11-7 使用showActionSheet退出 (08:01).mp4
 11-8 真机调试 (04:21).mp4
 11-9 商品详情页的默认收藏状态 (07:57).mp4
 11-

10 商品收藏与取消 (08:59).mp4
 11-

11 拦截未登录用户 (04:35).mp4
 第12章 支付宝收银台支付模块开发 试看 

13 节 | 105分钟 12-1 支付宝支付业务梳理 (05:34).mp4
 12-2 跳转到支付页面 (11:32).mp4
 12-3 获得支付宝交易流水号tradeNo (06:17).mp4
 12-4 唤起收银台 (05:32).mp4
 12-5 支付状态码与支付结果 (07:22).mp4
 12-6 开发历史订单tab组件 (11:48).mp4
 12-7 控制tab选中效果 (09:54).mp4
 12-8 初始化订单列表 (08:09).mp4
 12-9 构建历史订单列表 (12:43).mp4
 12-

10 切换不同订单状态列表 (04:17).mp4
 12-

11 取消订单 (07:24).mp4
 12-

12 提取支付公用方法，重新唤起收银台 (07:36).mp4
 12-

13 确认收货 (06:17).mp4
 第13章 属于你的支付宝小程序发布与上线 试看 3 节 | 24分钟 13-1 打包上传，生成体验版 (09:35).mp4
 13-2 提交审核的注意事项与驳回案例 (10:13).mp4
 13-3 灰度测试与上架 (03:56).mp4
 第14章 后端内容扩展 7 节 | 56分钟 14-1 安装jdk (07:08).mp4
 14-2 安装maven (03:39).mp4
 14-3 maven依赖库 (02:32).mp4
 14-4 安装数据库MariaDB，导入数据库，讲解表结构 (14:08).mp4
 14-5 安装sts, 配置jdk，导入项目 (05:47).mp4
 14-6 使用个人支付宝账号联调授权登录 (16:07).mp4
 14-7 假支付跑通订单流程 (05:39).mp4
 第15章 课程总结 1 节 | 8分钟 15-1 课程总结 (07:22).mp4