支付宝小程序入门与实战开发高颜值电商项目

从0到1开发商业级高颜值电商小程序内容升级！本地搭建后端服务！

已完结难度初级时长 18小时学习人数 489 综合评分 9.99

立即购买加购物车

第1章课程导学与准备工作【毕设优质项目】 2 节 | 19分钟

【毕设优质项目】本章主要介绍为何学习支付宝小程序，以及开发支付宝小程序能为我们带来哪些收获。之后会为大家介绍本课程内容具体安排，最后给出如何学好这门课程的一些学习建议。希望大家都能通过这门课程，学有所成，学有所归。...

收起列表
- 图文： 1-1 课前必读（不看会错过一个亿）
- 视频： 1-2 课程导学 (18:10) 试看
第2章初识支付宝小程序 4 节 | 29分钟

本章首先会为大家介绍如何配置开发环境，如何使用蚂蚁开发者工具，随后我们会一起开发第一个hello world小例子，通过对开发工具以及基本文件类型的介绍，让大家快速熟悉支付宝小程序。为后面技术的学习，项目的开发做好基本准备。大家加油。...

收起列表
- 视频： 2-1 创建小程序，申请appId，设置团队开发者 (07:47)
- 视频： 2-2 开发环境搭建&开发者工具介绍 (10:12)
- 视频： 2-3 开发第一个支付宝小程序hello world (05:45)
- 视频： 2-4 四种基本文件类型与page样式 (05:13)
第3章支付宝小程序基础架构 11 节 | 96分钟

本章首先会讲解app的基本文件类型以及页面路由配置，包括小程序项目的生命周期以及页面的生命周期，随后会一起学习如何配置全局常量、对象、函数以及全局样式。此外我们会通过全局配置来设置标题栏、tab选项卡以及导航组件和api。让大家掌握小程序开发的基础架构开发。 ...

收起列表
- 视频： 3-1 app的三种文件类型与路径配置管理 (08:35)
- 视频： 3-2 结合生活实例讲解与演示app生命周期 (09:13)
- 视频： 3-3 页面的生命周期 - 上 (10:59)
- 视频： 3-4 页面的生命周期 - 下 (11:15)
- 视频： 3-5 全局常量、对象、自定义函数的使用 (06:47)
- 视频： 3-6 全局样式的使用和重写 (05:36)
- 视频： 3-7 全局与私有标题栏的配置 (05:22)
- 视频： 3-8 tab选项卡介绍与模块页面的创建 (08:01)
- 视频： 3-9 tab选项卡的配置与显示 (09:07)
- 视频： 3-10 导航组件页面跳转 (13:11)
- 视频： 3-11 导航api与章节回顾 (07:19)
第4章支付宝小程序flex布局精讲与实战 12 节 | 100分钟

本章首先会学习什么是flex布局，什么是flex模型。随后会对flex拆分为容器和元素进行逐一讲解。最后进行一个骰子练习，通过flex布局与css的配合实现骰子的6个点数，以此来加固flex的学习。（对于界面的开发，这部分知识非常重要）...

收起列表
- 视频： 4-1 flex布局的概念与模型 (04:55)
- 视频： 4-2 flex-direction 水平轴与交叉轴的排列方向 (09:18)
- 视频： 4-3 flex-warp 换行属性以及flex-flow的结合 (09:25)
- 视频： 4-4 justify-content在水平轴与交叉轴的对齐方式 (11:08)
- 视频： 4-5 align-items元素在交叉轴的对齐方式 (12:34)
- 视频： 4-6 align-content基于多轴线的对其方式 (10:48)
- 视频： 4-7 flex设置元素的排序、拉伸与缩放 (08:58)
- 视频： 4-8 flex设置元素的固定占比与重写对齐方式 (04:53)
- 视频： 4-9 模拟骰子1点数进行flex布局演练 (09:59)
- 视频： 4-10 模拟骰子2点数进行flex布局演练 (05:58)
- 视频： 4-11 模拟骰子3点数进行flex布局演练 (02:42)
- 视频： 4-12 模拟骰子4-6点数进行flex布局演练 (08:52)
第5章支付宝小程序视图层与基础语法精讲 7 节 | 68分钟

本章主要学习数据绑定，涉及到变量渲染，条件渲染以及列表渲染，另外对于view和block的区别会通过代码演示来理解。随后会讲解用户事件类型以及dataset绑定数据。最后我们会学习rpx自适应像素，来实现响应式布局，以此来实现多手机不同屏幕的自适应。...

收起列表
- 视频： 5-1 数据绑定与渲染 (07:24)
- 视频： 5-2 ifelse条件渲染 (09:44)
- 视频： 5-3 for循环列表渲染 (07:48)
- 视频： 5-4 view与block的区别 (05:56)
- 视频： 5-5 6种不同的事件类型 (13:08)
- 视频： 5-6 dataset自定义数据的使用 (08:36)
- 视频： 5-7 使用rpx响应式像素实现自适应拉伸_音频.mp4 (14:41)
第6章支付宝小程序首页模块开发 13 节 | 138分钟

本章主要开发支付宝小程序首页模块，首先我们会学习图片组件以及13种模式，随后配合轮播图组件实现首页轮播图，同时我们搭配rpx实现自适应。接下来会对滚动视图组件进行学习并完成横向滑动的推荐商品列表。最后学习网络请求api实现本地调用在线接口，获取真实数据并且渲染整个首页。...

收起列表
- 视频： 6-1 图片组件的使用 (08:01)
- 视频： 6-2 图片的4种缩放模式与9种裁剪模式讲解 (13:32)
- 视频： 6-3 轮播图组件的使用与属性讲解 (13:29)
- 视频： 6-4 scroll-view组件的使用 (07:08)
- 视频： 6-5 开发首页轮播图 (10:14)
- 视频： 6-6 flex二级嵌套开发商城特色一栏_x264 (06:48)
- 视频： 6-7 可滚动视图组件开发推荐商品 (09:58)
- 视频： 6-8 完成纵向新品列表 (22:21)
- 视频： 6-9 发送httpRequest获取轮播图数据 (12:13)
- 视频： 6-10 首页轮播图动态渲染 (07:07)
- 视频： 6-11 网络请求获取推荐商品以及新品列表数据 (07:10)
- 视频： 6-12 推荐商品以及新品列表数据渲染展示 (12:08)
- 视频： 6-13 下拉实现首页数据刷新 (07:20)
第7章商品分类、列表、详情模块开发 17 节 | 169分钟

本章首先通过flex布局实现商品分类，并且实现自适应。随后可以通过搜索查询商品并且跳转到商品列表以及详情页。最后通过模板来实现代码的公用。对于商品详情我们通过json对象的解析来渲染。

收起列表
- 视频： 7-1 开发分类页面 - 固定搜索栏 (15:32)
- 视频： 7-2 开发分类页面 - 显示每一个分类元素 (10:31)
- 视频： 7-3 键盘回车触发confirm事件获取搜索框的值 (05:04)
- 视频： 7-4 页面带参与debugger调试 (07:35)
- 视频： 7-5 使用导航组件带参 (05:35)
- 视频： 7-6 根据不同参数发起网络请求查询商品列表 (09:57)
- 视频： 7-7 使用交互api提高用户体验 (05:24)
- 视频： 7-8 查询结果文字动态数据绑定与显示 (07:30)
- 视频： 7-9 使用模板实现商品列表代码公用 (11:29)
- 视频： 7-10 httpRequest请求商品详情 (12:51)
- 视频： 7-11 开发商品详情页 - 封面图 (09:31)
- 视频： 7-12 开发商品详情页 - 基本信息渲染上 (17:38)
- 视频： 7-13 开发商品详情页 - 基本信息渲染下 (11:36)
- 视频： 7-14 开发商品详情页 - json解析渲染商品介绍 (11:54)
- 视频： 7-15 开发商品详情页 - 固定底部操作栏 (12:15)
- 视频： 7-16 完善首页商品导航跳转_x264 (04:55)
- 视频： 7-17 完善首页轮播图跳转 (09:16)
第8章购物车模块开发 14 节 | 164分钟

本章主要讲解购物车模块开发，首先我们会实现用户点击购物车动画效果，随后学习本地缓存api，通过缓存贯穿整个购物车业务，最后在购物车页面，我们实现自定义checkbox组件来替换原生，从而达到整体项目的配色一致，同时也会动态计算合计金额以及购买件数。 ...

收起列表
- 视频： 8-1 实现加入购物车动画 (20:37)
- 视频： 8-2 实现动画复原 (07:36)
- 视频： 8-3 购物车方案与缓存api (06:13)
- 视频： 8-4 商品加入购物车 (10:47)
- 视频： 8-5 完善相同商品加入购物车业务 (09:47)
- 视频： 8-6 开发空购物车页面与switchTab (12:33)
- 视频： 8-7 请求购物车真实数据 (11:00)
- 视频： 8-8 构建不可变商品列表 (11:48)
- 视频： 8-9 固定底部购物车操作栏 (12:41)
- 视频： 8-10 渲染非空购物车与debugger调试js (13:49)
- 视频： 8-11 自定义checkbox组件实现选择单个商品.. (18:50)
- 视频： 8-12 自定义checkbox实现全选或取消全选 (11:47)
- 视频： 8-13 重新计算商品金额和件数 (11:47)
- 视频： 8-14 章节回顾 (03:57)
第9章订单模块开发 7 节 | 70分钟

本章主要讲解订单业务处理流程，首先会根据流程图来理解整个流程，随后理解每个节点的订单状态。之后开发订单结算页面并且渲染购物车提交的商品数据，作为订单数据，我们会构建预处理订单，以此来实现需要预先准备给提交到后端的数据。...

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

本章主要讲解地址管理相关业务，用户可以对地址进行增加、修改以及删除，在地址列表，用户可以设置默认地址也可以选择地址，并且列表页面的选中效果我们会实现信封风格样式。操作地址的时候会涉及到表单组件以及自定义组件，最后通过开发自定义的城市选择组件以此实现组件通用化。...

收起列表
- 视频： 10-1 渲染页面地址信息 (06:57)
- 视频： 10-2 渲染静态地址选择页面 (05:28)
- 视频： 10-3 渲染地址信息页面 (06:05)
- 视频： 10-4 城市选择api (07:46)
- 视频： 10-5 开发自定义城市组件.mp4 (13:31)
- 视频： 10-6 提交新地址 (12:36)
- 视频： 10-7 订单页初始化地址信息 (13:02)
- 视频： 10-8 地址列表同步展示 (06:11)
- 视频： 10-9 编辑地址业务处理，更新订单结算页地址 (18:39)
- 视频： 10-10 删除地址业务处理 (07:52)
- 视频： 10-11 信封效果动态选中实现 (12:38)
- 视频： 10-12 确认选择地址 (04:11)
- 视频： 10-13 设为默认地址 (12:53)
第11章个人信息页面开发与登录授权api讲解 11 节 | 73分钟

本章主要讲解个人页面的开发，首先我们会讲解支付宝授权登录，熟悉他的整个处理流程，本页面的历史订单数据用于提供给用户查看不同状态的订单，当然用户可以处理不同的订单，比如重新支付、取消订单、确认收货等。最后通过交互api实现用户的退出。授权登录的审核注意点我们也会提前在这里讲解噢！...

收起列表
- 视频： 11-1 团队协作细则 (03:14)
- 视频： 11-2 是否登录页面展示 (06:51)
- 视频： 11-3 授权登录业务梳理 (04:34)
- 视频： 11-4 授权api获取用户授权码 (10:03)
- 视频： 11-5 请求个人信息设置全局对象 (10:20)
- 视频： 11-6 完善提交订单的全局用户信息 (03:37)
- 视频： 11-7 使用showActionSheet退出 (08:01)
- 视频： 11-8 真机调试 (04:21)
- 视频： 11-9 商品详情页的默认收藏状态 (07:57)
- 视频： 11-10 商品收藏与取消 (08:59)
- 视频： 11-11 拦截未登录用户 (04:35)
第12章支付宝收银台支付模块开发试看 13 节 | 105分钟

本章主要讲解支付宝授权支付，实现唤起收银台进行支付，同时对于整个支付的业务处理会详细讲解。当用户支付完毕后可以在个人页面看到历史订单，针对不同订单会涉及到不同的订单状态，通过本章的学习，可以打通支付的整套环节。...

收起列表
- 视频： 12-1 支付宝支付业务梳理 (05:34) 试看
- 视频： 12-2 跳转到支付页面 (11:32)
- 视频： 12-3 获得支付宝交易流水号tradeNo (06:17)
- 视频： 12-4 唤起收银台 (05:32)
- 视频： 12-5 支付状态码与支付结果 (07:22)
- 视频： 12-6 开发历史订单tab组件 (11:48)
- 视频： 12-7 控制tab选中效果 (09:54)
- 视频： 12-8 初始化订单列表 (08:09)
- 视频： 12-9 构建历史订单列表 (12:43)
- 视频： 12-10 切换不同订单状态列表 (04:17)
- 视频： 12-11 取消订单 (07:24)
- 视频： 12-12 提取支付公用方法，重新唤起收银台 (07:36)
- 视频： 12-13 确认收货 (06:17)
第13章属于你的支付宝小程序发布与上线试看 3 节 | 24分钟

大家如果是从头到现在一直跟下来的，相信大家已经开发出了一款属于自己的支付宝小程序了，接下来本章为大家讲解小程序如何发布与上线，如何避免审核的坑，以及审核方面的各个流程和注意点，如何设置体验版，最终发布上线。让大家真正拥有一款高质量的线上作品。...

收起列表
- 视频： 13-1 打包上传，生成体验版 (09:35) 试看
- 视频： 13-2 提交审核的注意事项与驳回案例 (10:13)
- 视频： 13-3 灰度测试与上架 (03:56)
第14章后端内容扩展 7 节 | 56分钟

本章节针对原有实战体系做了后端内容的扩展，演示了从零搭建java开发环境，并且导入项目运行项目以及基本的配置，此外支付宝小程序也已经可以使用个人版进行对接并且实现支付宝授权登录，对于商品图片与文字等信息也可以根据自己需要去修改数据库噢~（注：java代码没有基础不建议修改噢~）...

收起列表
- 视频： 14-1 安装jdk (07:08)
- 视频： 14-2 安装maven (03:39)
- 视频： 14-3 maven依赖库 (02:32)
- 视频： 14-4 安装数据库MariaDB，导入数据库，讲解表结构 (14:08)
- 视频： 14-5 安装sts, 配置jdk，导入项目 (05:47)
- 视频： 14-6 使用个人支付宝账号联调授权登录 (16:07)
- 视频： 14-7 假支付跑通订单流程 (05:39)
第15章课程总结 1 节 | 8分钟

恭喜大家，坚持到了最后，本章我将和大家一起对整个实战做总结和回顾。最后期待大家将自己的作品发布上线，等待你们的好消息。

收起列表
- 视频： 15-1 课程总结 (07:22)