小程序优购商城项目讲解

1.新建⼩程序项⽬
填入自己的appid
搭建⽬录结构
styles 存放公共样式 components 存放组件 lib 存放第三⽅库 utils ⾃⼰的帮助库 request ⾃⼰的接⼝帮助库
2.在app.json中实现路由导航，跳转详情

3.引⼊字体图标 1. 打开阿⾥巴巴字体图标⽹站 2. 选择的图标 3. 添加⾄项⽬ 4. 下载到本地 5. 将样式⽂件由 css 修改为 wxss 6. 在app.app.wxss中引⼊

@import "./styles/iconfont.wxss";

4.首先要完成首页的基本布局
1.首页有搜索框当点击的时候跳转到搜索也，我们可以把搜索框拆分出去方便后期使用，还有轮播图也拆分出去也能用到，不用在第二次布局节省了很多时间。
2.分类导航当点击分类，秒杀拍的时候会跳转到分类页，下面还有楼层获取接口渲染楼层，
3.使用tabbar实现底部导航当点击底部tabbar的时候会跳转到对应的页面，

2.当点击分类导航跳转至分类页，分类页也一样把拆分的组件拿过来引入到分类页，下面的布局分为左边选项卡，右边商品信息。当点击左边选项卡片的时候，右边会出现对应的商品，左边选项卡片和右边的商品信息都有一个scroll–view 组件，会实现上下滚动的效果，当鼠标移动到左边选项卡片会滑动滚轮的时候会上下滚动，右边的也一样。

3.当点击右边的商品信息的时候会跳转至商品的列表页面，头部布局seach引入的组件，头部的选项卡片当点击的时候选项卡片下面会出现对应的内容，2.渲染出商品图片、商品信息、商品的价格，3.用户上滑页面滚动条触底开始加载下一页数据，找到滚动条触底事件小程序官方开发文档寻找
4.判断还有没有下一页数据，获取到总页数只有总条数总页数 = Math.ceil(总条数 / 页容量 pagesize总页数 = Math.ceil( 23 / 10 ) = 3
5 获取到当前的页码 pagenum
6判断一下当前的页码是否大于等于总页数表示没有下一页数据
7假如没有下一页数据弹出一个提示
8假如还有下一页数据来加载下一页数据9. 当前的页码 ++ 10.重新发送请求
11. 数据请求回来要对data中的数组进行拼接而不是全部替换！！！
2 .下拉刷新页面
1 触发下拉刷新事件需要在页面的json文件中开启一个配置项
找到触发下拉刷新的事件
2 重置数据数组
3 重置页码设置为1
4 重新发送请求
5 数据请求回来需要手动的关闭等待效果

4.当点击商品卡片的时候会跳转至商品详情页
1.实现头部的swiper 轮播图的布局，和对应的商品价格，以及对应的商品信息，点击轮播图预览大图给轮播图绑定点击事件调用小程序的api previewImage
先构造要预览的图片数组，接收传递过来的url
2.商品收藏
1 页面onShow的时候加载缓存中的商品收藏的数据
2 判断当前商品是不是被收藏
1 是改变页面的图标
3 点击商品收藏按钮
1 判断该商品是否存在于缓存数组中
2 已经存在把该商品删除
3 没有存在把商品添加到收藏数组中存入到缓存中即可
3.渲染图文详情，接口会出现对应内容，
4.当点击客服和分享的时候会出现模拟进入客服会话，和分享当前页的商品信息，可以在小程序的文档，组件中的button中找到对应内容插入进去就可以。
4.点击加入购物车
1 先绑定点击事件
2 获取缓存中的购物车数据数组格式
3 先判断当前的商品是否已经存在于购物车
4 已经存在修改商品数据执行购物车数量++ 重新把购物车数组填充回缓存中
5 不存在于购物车的数组中直接给购物车数组添加一个新元素新元素带上购买数量属性 num 重新把购物车数组填充回缓存中
6 弹出提示，商品加入成功
5.当点击购物车图标的时候会跳转至购物车页面

小程序优购商城项目讲解相关推荐

微信小程序优购商城项目
这篇文章主要就是把我写的优购商城进行简单的说明,希望可以对大家有所帮助 1.先配置页面在app.json中设置所需要的页面路径 2.然后再封装我们需要的组件和wx.request wx.reques ...
微信小程序--优购商城项目（1）
文章目录前言一.配置uni-app开发环境 1.开发工具--HBuilderX 2.新建uni-app项目 3.把项目运行到微信开发者工具 4.使用Git管理二.tarBar 1.创建 tabB ...
微信小程序--优购商城项目（6）
文章目录前言七.商品详情 1.创建 goodsdetail 分支并添加编译模式 2.获取商品详情数据 3.渲染商品详情页的 UI 结构 (1)渲染轮播图区域 (2)实现轮播图预览效果 (3) 渲染 ...
微信小程序--优购商城项目（8）
文章目录前言九.购物车页面 1.商品列表区域 (1)渲染购物车商品列表的标题区域 (2)渲染商品列表区域的基本结构 (3) 为 my-goods 组件封装 radio 勾选状态 (4)为 my-g ...
微信小程序--优购商城项目（4）
文章目录前言五.搜索 1.创建 search 分支 2.自定义搜索组件 (1)自定义 my-search 组件 (2) 通过自定义属性增强组件的通用性 (3)为自定义组件封装 click 事件 ( ...
小程序黑马优购商城项目讲解
小程序优购商城项目讲解在我们开始之前我们需要配好该项目所需要的接口文档以及配好相应的页面,以免在开发过程中会出现遗漏的问题出现. 首先我们要知道优购是分为4部分的分别为首页/列表/购物车/我的 ...
微信小程序优购商城项目分析
商城项目分析首页页面布局,最上面是搜索框,搜索框下边是个轮播图,轮播图下面这个分类这一栏,再往下就是介绍,轮播图.分类.和下边的图片都是通过接口实现的.点击分类.秒杀拍.超市购.母婴品可以进入分类页 ...
优购商城项目详细步骤流程
优购商城项目详细步骤流程一.准备的工作 1.文档写项目之前必须要有接口文档准备工作接口文档是必不可少的参考文档我们还可以参考小程序的开发文档.阿里巴巴字体 iconfont .mdn- 2 ...
java项目第17期-小程序团购+商城源码【毕业设计】
java项目第17期-小程序团购+代理商城源码 1.产品介绍 java小程序+大后台web商城源码基于ssm的一款电子商城,系统采用maven的父子结构, 1.后台web商城包含的模块有: 会员管理 ...

小程序优购商城项目讲解

小程序优购商城项目讲解相关推荐

最新文章

热门文章