uniapp进阶uniPay微信小程序商城uniCloud云开发APP
uniapp进阶uniPay微信小程序商城uniCloud云开发APP
unipay项目介绍与知识点概述
项目初始化与主页面布局
- 2.1.创建项目及引入uView和uni扩展UI组件库
- 2.2.对主体页面布局分析及自定义组件拆分
- 2.3.scss扩展@mixin混合指令及css变量的定义
- 2.4.scroll-view区域滚动组件布局
- 2.5.产品列表for循环嵌套及sticky吸顶组件
- 2.6.布局产品组件scss混合多行文字省略号函数
- 2.7.uView组件库NumberBox步进器的自定义slot
- 2.8.通过createSelectorQuery查询滚动元素节点信息
- 2.9.开启导航防抖以及左右滑块的联动
- 2.10.布局小程序H5商城购物车组件
- 2.11.自定义购物车弹窗及Overlay遮罩层
- 2.12.封装购物车单个卡片component
- 2.13.封装步进器组件达到组件可复用效果
- 2.14.内置css变量status-bar-height设置状态栏高度
- 2.15.SystemInfo获取系统状态栏信息及胶囊按钮
- 2.16.设置自定义头部组件品牌信息的结构布局
- 2.17.计算属性computed获取自定义头部的高度
- 2.18.滑动滚动条动态改变自定义子组件的信息
- 2.19.完全实现custom自定义头部的动态样式
Vuex状态管理在项目中的应用
商城订单页面构建
后台管理端相关页面
使用unicloud云开发联调数据
- 6.1.引入uni-id-pages用户体系及配置
- 6.2.修改config配置项确认几种登录方式
- 6.3.创建schema及新增分类到数据库
- 6.4.完成分类页面数据的增删改查schema
- 6.5.使用uni-form表单布局品牌页
- 6.6.引入uni-file-picker上传组件
- 6.7.使用云对象实现新增和获取的逻辑
- 6.8.用深浅拷贝知识点完成修改品牌信息
- 6.9.新增商品相关的页面布局
- 6.10.表单rules验证及popup弹窗属性
- 6.11.属性列表及子元素嵌套布局
- 6.12.复选框及子元素选择高亮
- 6.13.共用一个弹出框更加条件做不同选择
- 6.14.创建sku云对象新增属性到数据库
- 6.15.完成新增属性及属性值的数据
- 6.16.filter和map过滤用户选择的数组
- 6.17.完成商品属性选择的业务逻辑
- 6.18.创建商品表并新增商品到数据库
- 6.19.循环遍历所有的分类及对应的商品
- 6.20.删除指定的商品
- 6.21.根据条件让新增和修改共用同一页面
- 6.22.使用函数递归实现默认属性选择项
用户端渲染数据库数据
- 7.1.获取数据库信息同步到vuex的state中
- 7.2.抽离异步请求到vuex的actions中
- 7.3.弹窗获取品牌更多信息
- 7.4.高德地图web服务配置location内置地图
- 7.5.获取商品列表定义公共功能方法类
- 7.6.对页面发现的已知bug进行修复
- 7.7.使用vuex状态管理兄弟组件间的传值
- 7.8.兄弟组件数据互通及详情弹窗布局
- 7.9.将详情页中的数据传值渲染到弹窗中
- 7.10.rich-text富文本和replace正则替换
- 7.11.弹出选择产品规格的弹窗
- 7.12.将产品规划的相关布局进行展现
- 7.13.将功能类似的事件方法进行公用
- 7.14.配合计算属性完成复杂的高亮按钮
- 7.15.产品详情弹窗与选择规格弹窗的联动
- 7.16.复习购物车添加逻辑的梳理
- 7.17.选择不同类型商品加入到购物车
- 7.18.v-for中key的作用太重要辣
- 7.19.通过this.$set将购物车数量和数据源统一
- 7.20.清空购物车及兼容微信小程序
支付前验证与token安全校验
微信及支付宝支付配置与订单相关
- 9.1.上传公共模块及云对象连接云端云函数
- 9.2.uni-pay2集成到自己项目配置云端
- 9.3.uni-pay支付组件属性-事件-方法在前端页面调用
- 9.4.创建订单号云对象before预处理器中校验token权限
- 9.5.云对象向云数据库中创建订单
- 9.6.配置unipay回调地址获取uni-pay-co的url化地址
- 9.7.unipay支付宝支付证书生成详细教程
- 9.8.微信商户支付证书生成全过程uni-pay的配置
- 9.9.跑通uniPay微信支付与支付宝支付秘钥
- 9.10.创建支付生成两张order表认识支付回调notify
- 9.11.支付回调goods判断前后端价格是否一致
- 9.12.通过支付校验修改支付状态检验回调函数
- 9.13.获取支付后的订单列表循环渲染到前端页面
- 9.14.将订单列表数据时间戳格式化判断异常订单
- 9.15.encodeURI将对象编码解析到详情页
- 9.16.处理支付异常的订单展示状态及完成的样式
- 9.17.约定返回页面自定义navbar导航栏
- 9.18.支付成功清空购物车优化支付状态
完善前后端页面的权限校验及功能拓展
项目打包上线
提交答案
视频学习中有任何产品建议都可由此反
馈，我们将及时处理！
馈，我们将及时处理！
课时介绍
使用函数递归实现默认属性选择项，unicloud云函数云对象的使用
课程介绍
课程亮点：
纯前端实现H5、小程序、APP商城开发；
技术栈：uniapp+uniCloud+unipay+uni-ui+uView+vuex；
学完可开发定制化商城，web前端技术再进阶一大步；
知识模块：
1.uniapp+unicloud云开发
2.uniapp常用组件库及官方扩展UI库
3.uView第三方UI组件库
4.unicloud云开发实践，管理校验token权限
5.vuex状态管理module模块商业级使用
6.uni-id微信一键登录及手机验证码登录
7.开通微信支付及支付宝支付的全流程操作，unipay的实战
推荐课程