适用人群

想要独立开发一款商城项目，具有一定的HTML基础的同学。

课程概述

课程亮点：
纯前端实现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的实战

课程目录：
第一章：unipay项目介绍与知识点概述
第二章：项目初始化与主页面布局
第三章：Vuex状态管理在项目中的应用
第四章：商城订单页面构建
第五章：后台管理端相关页面
第六章：使用unicloud云开发联调数据
第七章：客户端页面联调
第八章：完成支付宝与微信支付
第九章：安全性测试与打包上线
第十章：完善前后端页面的权限校验及功能拓展
第十一章：项目打包上线

目录

章节1:unipay项目介绍与知识点概述试看
课时1视频1.1.uni-pay商城项目开发项目介绍及知识模块概述09:55可试看
课时2视频1.2.学习uniPay的前置知识储备04:09可试看
章节2:项目初始化与主页面布局试看
课时3视频2.1.创建项目及引入uView和uni扩展UI组件库11:14可试看
课时4视频2.2.对主体页面布局分析及自定义组件拆分15:33可试看
课时5视频2.3.scss扩展@mixin混合指令及css变量的定义14:38可试看
课时6视频2.4.scroll-view区域滚动组件布局12:56可试看
课时7视频2.5.产品列表for循环嵌套及sticky吸顶组件12:39可试看
课时8视频2.6.布局产品组件scss混合多行文字省略号函数14:34可试看
课时9视频2.7.uView组件库NumberBox步进器的自定义slot10:14
课时10视频2.8.通过createSelectorQuery查询滚动元素节点信息14:48
课时11视频2.9.开启导航防抖以及左右滑块的联动14:42
课时12视频2.10.布局购物车组件14:51
课时13视频2.11.自定义购物车弹窗及Overlay遮罩层10:14
课时14视频2.12.封装购物车单个卡片component14:16
课时15视频2.13.封装步进器组件达到组件可复用效果11:46
课时16视频2.14.内置css变量status-bar-height设置状态栏高度05:54
课时17视频2.15.SystemInfo获取系统状态栏信息及胶囊按钮12:39
课时18视频2.16.设置自定义头部组件品牌信息的结构布局21:17
课时19视频2.17.计算属性获取自定义头部的高度05:16
课时20视频2.18.滑动滚动条动态改变自定义子组件的信息12:29
课时21视频2.19.完全实现custom自定义头部的动态样式12:04
章节3:Vuex状态管理在项目中的应用试看
课时22视频3.1.vuex状态管理在项目中的作用及介绍知识点18:38可试看
课时23视频3.2.为项目封装modules和getters15:40可试看
课时24视频3.3.在vuex中编写系统信息的业务逻辑14:50可试看
课时25视频3.4.vuex应用到项目中进行页面和组件的数据共享08:33可试看
课时26视频3.5.mock测试数据渲染首页列表10:51可试看
课时27视频3.6.修改步进器将数据追加到购物车中14:27可试看
课时28视频3.7.统计购物车的总价及购买数量13:32
课时29视频3.8.完成购物车数据联动模块13:46
章节4:商城订单页面构建试看
课时30视频4.1.布局订单页面12:52可试看
课时31视频4.2.订单详情页面布局及组件分离15:26可试看
课时32视频4.3.布局搜索页面引入u-search组件11:46可试看
课时33视频4.4.读写Storage缓存将搜索记录持久化06:05可试看
课时34视频4.5.确认订单页面的布局14:22可试看
课时35视频4.6.filter滤镜还能这样用11:08可试看
课时36视频4.7.简化创建配送方式自定义组件模块11:29
课时37视频4.8.创建地址列表页面的布局13:59
课时38视频4.9.u-form表单创建与api校验15:27
课时39视频4.10.兼容微信小程序bug及ifdef条件编译13:36
课时40视频4.11.支付方式循环遍历的优化方案03:49
章节5:后台管理端相关页面试看
课时41文本【配套资料】前5章布局篇源码
课时42视频5.1.subPackages小程序分包加载配置10:56可试看
课时43视频5.2.uniapp官方扩展UI组件库布局后台首页12:43可试看
课时44视频5.3.布局产品分类页面09:19可试看
课时45视频5.4.关于分类数据的增删改查操作12:56可试看
章节6:使用unicloud云开发联调数据
课时46文本【配套资料】前6章配套课程源码
课时47视频6.1.引入uni-id-pages用户体系及配置12:35
课时48视频6.2.修改config配置项确认几种登录方式10:47
课时49视频6.3.创建schema及新增分类到数据库10:17
课时50视频6.4.完成分类页面数据的增删改查11:27
课时51视频6.5.使用uni-form表单布局品牌页14:51
课时52视频6.6.引入uni-file-picker上传组件09:45
课时53视频6.7.使用云对象实现新增和获取的逻辑13:28
课时54视频6.8.用深浅拷贝知识点完成修改品牌信息14:43
课时55视频6.9.新增商品相关的页面布局15:39
课时56视频6.10.表单rules验证及popup弹窗属性12:07
课时57视频6.11.属性列表及子元素嵌套布局14:02
课时58视频6.12.复选框及子元素选择高亮11:17
课时59视频6.13.共用一个弹出框更加条件做不同选择12:59
课时60视频6.14.创建sku云对象新增属性到数据库14:53
课时61视频6.15.完成新增属性及属性值的数据13:42
课时62视频6.16.filter和map过滤用户选择的数组14:13
课时63视频6.17.完成商品属性选择的业务逻辑13:00
课时64视频6.18.创建商品表并新增商品到数据库14:44
课时65视频6.19.循环遍历所有的分类及对应的商品14:50
课时66视频6.20.删除指定的商品10:57
课时67视频6.21.根据条件让新增和修改共用同一页面12:35
课时68视频6.22.使用函数递归实现默认属性选择项14:58
章节7:用户端渲染数据库数据
课时69文本【配套资料】全7章，配套学习资料
课时70视频7.1.获取数据库信息同步到vuex的state中14:02
课时71视频7.2.抽离异步请求到vuex的actions中15:29
课时72视频7.3.弹窗获取品牌更多信息13:33
课时73视频7.4.高德地图web服务配置location内置地图16:51
课时74视频7.5.获取商品列表定义公共功能方法类14:57
课时75视频7.6.对页面发现的已知bug进行修复12:31
课时76视频7.7.使用vuex状态管理兄弟组件间的传值15:25
课时77视频7.8.兄弟组件数据互通及详情弹窗布局14:46
课时78视频7.9.将详情页中的数据传值渲染到弹窗中15:44
课时79视频7.10.rich-text富文本和replace正则替换13:05
课时80视频7.11.弹出选择产品规格的弹窗14:49
课时81视频7.12.将产品规划的相关布局进行展现11:38
课时82视频7.13.将功能类似的事件方法进行公用13:08
课时83视频7.14.配合计算属性完成复杂的高亮按钮13:41
课时84视频7.15.产品详情弹窗与选择规格弹窗的联动12:51
课时85视频7.16.复习购物车添加逻辑的梳理08:44
课时86视频7.17.选择不同类型商品加入到购物车12:02
课时87视频7.18.v-for中key的作用太重要辣16:39
课时88视频7.19.通过this.$set将购物车数量和数据源统一15:07
课时89视频7.20.清空购物车及兼容微信小程序10:58
章节8:支付前验证与token安全校验
课时90文本【配套资料】全前8章的资料
课时91视频8.1.确认订单页面知识点概述及vuex传值12:26
课时92视频8.2.安装vue调试工具Devtools10:53
课时93视频8.3.picker级联选择器选择中国城市13:32
课时94视频8.4.云对象获取客户端token方法12:22
课时95视频8.5.在云对象中校验token获取真实uid13:16
课时96视频8.6.抽离自定义公共模块并在云对象中引入15:14
课时97视频8.7.获取当前用户的地址列表orderBy排序13:12
课时98视频8.8.设置默认地址及长按longpress14:58
课时99视频8.9.同页面修改和新增地址的兼容处理11:04
课时100视频8.10.支付页面获取默认地址14:38
课时101视频8.11.页面通讯$emit全局事件总线11:51
课时102视频8.12.支付前验证必填信息遍历对象11:30
课时103视频8.13.vuex数据持久化插件persistedstate09:41
章节9:微信及支付宝支付配置与订单相关
课时104视频9.1.上传公共模块及云对象连接云端云函数08:32
课时105视频9.2.uni-pay2集成到自己项目配置云端13:35
课时106视频9.3.uni-pay支付组件属性-事件-方法在前端页面调用14:08
课时107视频9.4.创建订单号云对象before预处理器中校验token权限12:52
课时108视频9.5.云对象向云数据库中创建订单11:37
课时109视频9.6.配置unipay回调地址获取uni-pay-co的url化地址08:31
课时110视频9.7.unipay支付宝支付证书生成详细教程14:44
课时111视频9.8.微信商户支付证书生成全过程uni-pay的配置11:42
课时112视频9.9.跑通uniPay微信支付与支付宝支付秘钥07:07
课时113视频9.10.创建支付生成两张order表认识支付回调notify14:25
课时114视频9.11.支付回调goods判断前后端价格是否一致16:39
课时115视频9.12.通过支付校验修改支付状态检验回调函数12:33
课时116视频9.13.获取支付后的订单列表循环渲染到前端页面14:43
课时117视频9.14.将订单列表数据时间戳格式化判断异常订单07:55
课时118视频9.15.encodeURI将对象编码解析到详情页13:18
课时119视频9.16.处理支付异常的订单展示状态及完成的样式10:50
课时120视频9.17.约定返回页面自定义navbar导航栏10:47
课时121视频9.18.支付成功清空购物车优化支付状态06:01
章节10:完善前后端页面的权限校验及功能拓展
课时122视频10.1.首页直接付款触发unipay的收银台16:30
课时123视频10.2.完成直接转账open及订单展示状态08:30
课时124视频10.3.实现搜索页面RegExp正则模糊检索功能11:43
课时125视频10.4.完成搜索页vuex数据同步及空状态展示14:29
课时126视频10.5.prototype全局挂载管理员权限校验13:42
课时127视频10.6.schema权限规则和云对象权限校验12:46
课时128视频10.7.对云对象中的权限校验进行统一检查过滤12:07
课时129视频10.8.管理员的订单页面及操作订单状态14:48
课时130视频10.9.云对象timing定时触发Cron表达式15:31
课时131视频10.10.小程序实现微信登录和login-by-sms短信登录16:04
课时132视频10.11.解决扩展组件uni-popup在小程序底部空隙问题09:14
章节11:项目打包上线试看
课时133文本【配套资料】所有章节学习资料及源码
课时134视频11.1.打包H5配置到uniCloud服务空间的前端网页托管中13:55
课时135视频11.2.打包发行微信小程序-项目完结撒花09:55
课时136文本商城【持续维护版本】gitcode地址
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。