点击空白处退出提示
作品详情
1、基于Vue.js 开发使用HBuilderX搭建Uni-App 项目、使用Git管理项目代码托管GitHup
2、使在 Pages 目录中,创建首页、分类、购物车、我的 4 个 TabBar 页面。
3、首页。在首页配置网络请求、定义和渲染轮播图、配置分包将非主页如商品详情页和商品列表页等放入小程序分包,实现点击轮播图跳转到商品详情页、定义和获取分类导航数据,点击实现切换分类页面、定义和渲染楼层区域,点击楼层图片跳转到商品列表页
4、商品分类。调用后端接口获取分类数据,动态渲染左侧的一级、二级、三级分类列表,切换一级分类后重置滚动条的位置,点击三级分类跳转到商品列表页面
5、商品搜索。定义搜索组件,美化组件样式,增强组件通用性,封装按钮点击事件,实现首页搜索组件的吸顶效果、实现搜索框自动获取焦点和防抖处理,根据关键词查询搜索建议列表,点击搜索建议的商品项,跳转到商品详情页面;渲染搜索历史记录的基本结构,将搜索历史记录持久化存储到本地,实现清空搜索历史记录功能;点击搜索历史跳转到商品列表页面
6、商品列表。调用后端接口获取商品列表数据,渲染商品列表;上拉实现加载更多,下拉实现商品刷新;点商品跳转商品详情
7、商品详情。调用后端接口获取商品详情数据渲染;实现轮播图预览效果;渲染商品信息、商品详情信息、底部商品导航信息;点击购物车跳转购物车页面
8、购物车。实现加入购物车功能;动态统计购物车中商品的总数量;持久化存储购物车中的商品;实现商品可勾选、全选、反选功能;实现商品数量添加和减少功能;实现商品滑动删除、全选删除;动态渲染商品总价格、已勾选商品总价格
9、登录和退出。用户点击了结算按钮之后,需要先后判断是否勾选了要结算的商品、是否选择了收货地址、是否登录;在购物车页面,当用户点击 “结算” 按钮时,如果用户没有登录,则 3 秒后自动跳转到登录页面;登录时获取微信头像、昵称等信息,渲染用户的头像和昵称;登录成功之后再返回之前的页面;实现退出登录功能
10、创建订单和支付。在请求头中添加 Token 身份认证的字段,只有在登录之后才允许调用支付相关的接口;调用请求创建订单的 API 接口实现创建订单;请求订单预支付的 API 接口实现订单预支付;请求支付接口发起微信支付
11、小程序发布。优化小程序的体积,提高小程序的运行性能,使用户可以使用小程序实现购物
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论