B2|猫头鹰魔法社优购

11.首页分类导航

接口数据：

封装好的request文件夹下的index.js

export const request=(params)=>{return new Promise((resolve,reject)=>{wx.request({...params,success:(result)=>{resolve(result)},fail:(err)=>{reject(err)}})})
}

//index.js
//获取应用实例
const app = getApp()
//引入用来发送请求的方法
import {request} from "../../request/index.js"
Page({data: {//轮播图数据swiperList:[],//导航数据catesList:[]},onLoad: function (options) {//1.发送异步请求获取轮播图/*wx.request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',success:(result)=>{console.log(result);this.setData({swiperList:result.data.message})}})*/this.getSwiperList();//获取轮播图this.getCateList();//获取导航信息},getSwiperList(){//发送异步请求请求获取轮播图数据 优化的手段可以通过es6的promise来解决request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'}).then(result=>{this.setData({swiperList:result.data.message})})},getCateList(){//发送异步请求请求获取导航数据 优化的手段可以通过es6的promise来解决request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'}).then(result=>{console.log(result);this.setData({catesList:result.data.message})})},getUserInfo: function(e) {}
})

没加样式前：

加了样式：

<!--index.wxml-->
<!-- <view>首页
<text class="iconfont icon-dingdan"></text>
</view> -->
<view class="pyg_index">
<!--搜索框 开始-->
<SearchInput></SearchInput>
<!--搜索框 结束-->
<!--轮播图开始-->
<view class="index_swiper">
<!--1.swiper标签存在默认的宽度和高度100%*150px2.image标签也存在默认的宽度和高度320px*240px3.设计图片和轮播图1.先看一下原图的宽高 750*3402.让图片的高度自适应 宽度等于100%4.图片标签mode 属性 渲染模式widthFix 让图片的标签宽高 和图片标签的内容的宽高都等比例的发生变化
--><swiper autoplay indicator-dots circular><swiper-item wx:for="{{swiperList}}" wx:key="goods_id"><navigator><image mode="widthFix" src="{{item.image_src}}"></image></navigator></swiper-item></swiper>
</view>
<!--轮播图结束--><!--导航开始-->
<view class="index_cate"><navigator wx:for="{{catesList}}" wx:key="name"><image mode="widthFix" src="{{item.image_src}}"></image></navigator>
</view>
<!--导航结束-->
</view>

/**index.wxss**/
/* @import "../../styles/font/iconfont.wxss"; */.index_swiper swiper{width:750rpx;height:340rpx;
}
.index_swiper swiper image{width: 100%;
}
.index_cate{display: flex;
}
.index_cate navigator{padding: 20rpx;flex: 1;
}
.index_cate navigator image{width: 100%;}

12.首页楼层

微信小程序点击事件获取到的 event.currentTarget.dataset.id

14.分类接口数据和页面效果的关系

15.分类获取接口数据

为了方便能看效果，因为在做category页面，所以每次编译直接看category页面

16.分类页面布局1

<!--pages/category/category.wxml-->
<view class="cates"><SearchInput></SearchInput><view class="cates_container"><!--左侧菜单--><scroll-view scroll-y="{{true}}"  class="left_menu"><view>1</view><view>2</view><view>3</view><view>4</view><view>5</view><view>6</view><view>7</view><view>8</view><view>9</view><view>10</view><view>11</view><view>12</view><view>13</view><view>14</view><view>15</view><view>16</view><view>17</view><view>18</view><view>19</view><view>18</view><view>19</view><view>19</view><view>19</view><view>19</view><view>19</view><view>19</view><view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view><view>19</view><view>19</view>  <view>19</view><view>19</view>  <view>19</view>  <view>19</view></scroll-view><scroll-view  scroll-y="{{true}}"  class="right_content"><view>1</view><view>2</view><view>3</view><view>4</view><view>5</view><view>6</view><view>7</view><view>8</view><view>9</view><view>10</view><view>11</view><view>12</view><view>13</view><view>14</view><view>15</view><view>16</view><view>17</view><view>18</view><view>19</view><view>19</view><view>19</view><view>19</view><view>19</view><view>19</view><view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view>  <view>19</view><view>19</view><view>19</view>  <view>19</view><view>19</view>  <view>19</view>  <view>19</view></scroll-view><!--右侧数据--></view>
</view>

page{height: 100%;
}
.cates{height: 100%;
}
.cates_container{height:calc(100vh-90rpx);display: flex;
}.left_menu{/*子项 高度 100% flex*/flex:2;background-color: cyan;height: 100vh;
}
.right_content{/*子项 高度 100% flex*/flex:5;background-color: lawngreen;height: 100vh;
}

{"usingComponents": {"SearchInput":"../../components/SearchInput/SearchInput"},"navigationBarTitleText": "分类"
}

①先改分类那页的导航标题+添加搜索框自定义组件

②再弄分类的做菜单和右边的数据显示

17.分类页面布局2

18.分类点击菜单切换点击事件

分类使用缓存技术

// pages/category/category.js
import {request} from "../../request/index.js"
Page({/*** 页面的初始数据*/data: {//左侧的菜单数据leftMenuList:[],//右侧的商品数据rightContent:[],//被点击的左边的菜单currentIndex:0,scrollTop:0},Cates:[],//获取分类数据getCates(){request({url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"}).then(res=>{console.log(res);this.Cates=res.data.message;//把接口数据存入到本地存储中wx.setStorageSync('cates', {time:Date.now(),data:this.Cates});//构造左侧的大菜单数据let leftMenuList=this.Cates.map(v=>v.cat_name);//构造右侧的商品数据let rightContent=this.Cates[0].children;this.setData({leftMenuList,rightContent})})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {/*0 web的本地存储和小程序中的本地存储的区别1.写代码的方式不一样了web:localStorage.setItem("key","value")localStorage.getItem("key")小程序端：wx.setStorageSync('key', data)wx.getStorageSync('key')2.存的时候 有没有做类型转换web:不管存入的是什么类型 ，最终都会先调用以下toString(),把数据变成了字符窜，再存进去小程序：不存在 类型转换的这个操作 ，存什么类型的数据进去，获取的时候就是什么类型1.先判断一下本地存储中有没有旧的数据{time:Date.now(),data:[...]}2.没有旧数据 直接发送新请求3.有旧的数据 同时 旧的数据也没有过期就使用本地存储中的旧数据即可*///1.获取本地存储中的数据(小程序也是存在本地存储 技术)const Cates=wx.getStorageSync('cates');//2.判断if(!Cates){//不存在，发送新的请求this.getCates();}else{//有旧的数据 定义过期时间 10s改成5分钟if(Date.now()-Cates.time>1000*10){//重新发送请求this.getCates();}else{//可以使用旧的数据console.log("old");this.Cates=Cates.data;//构造左侧的大菜单数据let leftMenuList=this.Cates.map(v=>v.cat_name);//构造右侧的商品数据let rightContent=this.Cates[0].children;this.setData({leftMenuList,rightContent})}}},//左侧点击事件handleItemTap(e){/*1.获取被点击的标题身上的索引2.给data中的currentIndex赋值就可以了3.根据不同索引来渲染右侧的商品内容*/console.log(e);const {index}=e.currentTarget.dataset;let rightContent=this.Cates[index].children;this.setData({currentIndex:index,rightContent,//重新设置右侧内容的scroll-view标签距离顶部的距离scrollTop:0})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

<!--pages/category/category.wxml-->
<view class="cates"><SearchInput></SearchInput><view class="cates_container"><!--左侧菜单--><scroll-view scroll-y="{{true}}"  class="left_menu"><viewclass="menu_item {{index===currentIndex?'active':''}}"wx:for="{{leftMenuList}}"wx:key="*this" bindtap="handleItemTap"data-index="{{index}}">{{item}}</view></scroll-view><!--右侧菜单--><scroll-view scroll-top="{{scrollTop}}" scroll-y="{{true}}"  class="right_content"><view class="goods_group"wx:for="{{rightContent}}"wx:for-index="index1"wx:for-item="item1"><!--右边的商品的标题-->
<view class="goods_title">
<text class="delimiter">/</text><!--分割线/-->
<text class="title">{{item1.cat_name}}</text>
<text class="delimiter">/</text><!--分割线/-->
</view><!--右边的商品列表-->
<view class="goods_list">
<navigator
wx:for="{{item1.children}}"
wx:for-index="index2"
wx:for-item="item2"
wx:key="cat_id"
>
<image mode="widthFix" src="{{item2.cat_icon}}"></image>
<view class="goods_name">{{item2.cat_name}}</view>
</navigator></view></view></scroll-view><!--右侧数据--></view>
</view>

category.wxss:


page{height: 100%;
}
.cates{height: 100%;
}
.cates_container{height:calc(100vh-90rpx);display: flex;
}.left_menu{/*子项 高度 100% flex*/flex:2;/* background-color: cyan; */height: 100vh;
}
.menu_item{height: 80rpx;display: flex;align-items: center;justify-content: center;font-size:30rpx;
}
.active{color: #eb4450;border-left: 5rpx solid currentColor;
}
.right_content{/*子项 高度 100% flex*/flex:5;/* background-color: lawngreen; */height: 100vh;
}
.goods_title{height: 80rpx;display: flex;justify-content: center;align-items: center;}
.delimiter{color: #ccc;padding:0 10rpx;
}
.goods_list{display: flex;flex-wrap: wrap;
}.goods_list navigator{width: 33.33%;text-align: center;
}
.goods_list image{width: 50%;
}

category.json:

{"usingComponents": {"SearchInput":"../../components/SearchInput/SearchInput"},"navigationBarTitleText": "分类"
}

20.分类点击菜单右侧列表置顶

21.优化接口代码提取公共接口路径

22.优化接口–简化返回值和使用es7的async

B2|猫头鹰魔法社优购相关推荐

B1|猫头鹰魔法社优购
## 填入appId 3.2搭建目录结构 3.3搭建项目的页面 3.4引入字体图标 https://www.iconfont.cn/ 下载后放在styles文件夹里,把iconfont.css搞成ic ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
17天代码品优购_品优购(IDEA版)-第一天
品优购(IDEA版)-第一天品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 3:能够 ...
商品规格js_品优购电商系统开发第3章规格及模板管理
课程目标目标1:理解和运用angularJS的service 目标2:理解和运用控制器继承目标3:掌握代码生成器的使用目标4:实现规格管理目标5:实现模板管理 1.前端分层开发 1.1 需求分 ...
Java之品优购课程讲义_day19（6）
品优购-秒杀下单 4.1 需求分析商品详细页点击立即抢购实现秒杀下单,下单时扣减库存.当库存为 0 或不在活动期范围内时无法秒杀. 4.2 后端代码 4.2.1 服务接口层修改 pinyougo ...
超详细前端开发案例：品优购商场项目(三)
目录续前一篇内容 10. 品优购首页布局 10.12 楼层区 floor 10.13 家用电器模块 10.14 box-hd 模块 10.15 box-bd 模块 10.16 侧边栏 fixedto ...
超详细前端开发案例：品优购商场项目(二)
目录续前一篇内容 10. 品优购首页布局 10.4 nav 导航栏制作 10.5 footer 底部制作 10.6 mod_service 服务模块制作 10.7 main 主体模块制作 10.8 ...
超详细前端开发案例：品优购商场项目(一)
目录 1. 品优购项目介绍 2. 项目背景 3. 设计目标 4. 几点思考 5. 代码规范 6. 前期准备工作目录文件夹样式文件的分类 7. 网站ico图标 7.1 使用ico图标 7.2 制作i ...