【愚公系列】2022年11月 微信小程序-优购电商项目-商品列表⻚⾯
【愚公系列】2022年11月 微信小程序-优购电商项目-商品列表⻚⾯
愚公搬代码
发布于 2022-11-14 17:10:26
发布于 2022-11-14 17:10:26
文章目录
前言
商品详情页是展示商品详细信息的一个页面，承载在网站的大部分流量和订单的入口。京东商城目前有通用版、全球购、闪购、易车、惠买车、服装、拼购、今日抄底等许多套模板。各套模板的元数据是一样的，只是展示方式不一样。目前商品详情页个性化需求非常多，数据来源也是非常多的，而且许多基础服务做不了的都放我们这，因此我们需要一种架构能快速响应和优雅的解决这些需求问题。因此我们重新设计了商品详情页的架构，主要包括三部分：商品详情页系统、商品详情页统一服务系统和商品详情页动态服务系统；商品详情页系统负责静的部分，而统一服务负责动的部分，而动态服务负责给内网其他系统提供一些数据服务。
一、商品详情页
1.业务逻辑
- 加载商品列表数据
- 启⽤下拉⻚⾯功能
- ⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true
- ⻚⾯的js中，绑定事件 onPullDownRefresh
- 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件
- 加载下⼀⻚功能
2.涉及的接口数据
- 商品列表搜索
{
"message": {
"total": 57445,
"pagenum": 1,
"goods": [
{
"goods_id": 57445,
"cat_id": 9,
"goods_name": "创维（Skyworth）65V9E 65英寸25核4K HDR高清智能电视",
"goods_price": 6499,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663280,
"upd_time": 1516663280,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57444,
"cat_id": 9,
"goods_name": "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）",
"goods_price": 1899,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg",
"goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg",
"add_time": 1516663280,
"upd_time": 1516663280,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57443,
"cat_id": 9,
"goods_name": "创维(Skyworth) 65M6E 65英寸 4K超高清智能酷开网络液晶电视",
"goods_price": 4999,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663280,
"upd_time": 1516663280,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57442,
"cat_id": 9,
"goods_name": "创维彩电40G6A",
"goods_price": 2999,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg",
"goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg",
"add_time": 1516663277,
"upd_time": 1516663277,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57441,
"cat_id": 9,
"goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)",
"goods_price": 9699,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg",
"goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg",
"add_time": 1516663273,
"upd_time": 1516663273,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57440,
"cat_id": 9,
"goods_name": "创维彩电55G3",
"goods_price": 4699,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000632066713_1_800x800.jpg",
"goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000632066713_1_400x400.jpg",
"add_time": 1516663269,
"upd_time": 1516663269,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57439,
"cat_id": 9,
"goods_name": "创维电视55G720S 55英寸4色4K 23核智能彩电网络液晶平板电视",
"goods_price": 4999,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000611474169_1_800x800.jpg",
"goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000611474169_1_400x400.jpg",
"add_time": 1516663265,
"upd_time": 1516663265,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57438,
"cat_id": 9,
"goods_name": "创维（Skyworth）55H9A 55英寸超薄 全面屏 4K超高清智能电视(黑色)",
"goods_price": 3999,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000185518945_2_800x800.jpg",
"goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000185518945_2_400x400.jpg",
"add_time": 1516663261,
"upd_time": 1516663261,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57437,
"cat_id": 9,
"goods_name": "创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色",
"goods_price": 3099,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000136928577_1_800x800.jpg",
"goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000136928577_1_400x400.jpg",
"add_time": 1516663258,
"upd_time": 1516663258,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57436,
"cat_id": 9,
"goods_name": "创维(Skyworth) 43M9 43英寸 4K超高清智能网络LED液晶平板电视",
"goods_price": 2399,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000751129836_1_800x800.jpg",
"goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000751129836_1_400x400.jpg",
"add_time": 1516663255,
"upd_time": 1516663255,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57435,
"cat_id": 9,
"goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 50G7 (50英寸)",
"goods_price": 4999,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000174647582_1_800x800.jpg",
"goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000174647582_1_400x400.jpg",
"add_time": 1516663249,
"upd_time": 1516663249,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57434,
"cat_id": 9,
"goods_name": "创维（Skyworth）60V8E 60英寸 4色4K 21核金属机身超高清智能网络液晶电视（金色）",
"goods_price": 4499,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000154099975_1_800x800.jpg",
"goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000154099975_1_400x400.jpg",
"add_time": 1516663246,
"upd_time": 1516663246,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57433,
"cat_id": 9,
"goods_name": "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视",
"goods_price": 3299,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg",
"goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg",
"add_time": 1516663242,
"upd_time": 1516663242,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57432,
"cat_id": 9,
"goods_name": "创维(Skyworth) 58V6 58英寸 4K超高清智能网络LED液晶平板电视",
"goods_price": 3299,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000137137563_1_800x800.jpg",
"goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000137137563_1_400x400.jpg",
"add_time": 1516663239,
"upd_time": 1516663239,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57431,
"cat_id": 9,
"goods_name": "创维（Skyworth）55E5 55吋4K超高清智能电视",
"goods_price": 2956,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000147767325_1_800x800.jpg",
"goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000147767325_1_400x400.jpg",
"add_time": 1516663236,
"upd_time": 1516663236,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57430,
"cat_id": 9,
"goods_name": "创维（Skyworth）65M9 65英寸15核HDR 4K超高清智能电视",
"goods_price": 0,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663233,
"upd_time": 1516663233,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57429,
"cat_id": 9,
"goods_name": "创维（Skyworth）50M9 50英寸15核HDR 4K超高清智能电视",
"goods_price": 2603,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663213,
"upd_time": 1516663213,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57428,
"cat_id": 9,
"goods_name": "创维.PPTV W42S 42英寸 全高清智能网络LED液晶平板电视",
"goods_price": 1799,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_800x800.jpg",
"goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_400x400.jpg",
"add_time": 1516663210,
"upd_time": 1516663210,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57427,
"cat_id": 9,
"goods_name": "创维(Skyworth) 32X6 32英寸 高清智能网络LED液晶平板电视",
"goods_price": 1201,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000775604287_1_800x800.jpg",
"goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000775604287_1_400x400.jpg",
"add_time": 1516663203,
"upd_time": 1516663203,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
},
{
"goods_id": 57426,
"cat_id": 9,
"goods_name": "创维（Skyworth）55M9 55英寸15核HDR 4K超高清智能电视M7",
"goods_price": 2999,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663200,
"upd_time": 1516663200,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
}
]
},
"meta": {
"msg": "获取成功",
"status": 200
}
}
在这里插入图片描述
3. 关键技术
⼩程序配置⽂件中 启⽤上拉 和下拉功能 搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)
二、商品列表⻚⾯相关代码
1.tabs组件
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}} "
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.value}}
</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>// components/Tabs/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 点击事件
handleItemTap(e){
// 1 获取点击的索引
const {index}=e.currentTarget.dataset;
// 2 触发 父组件中的事件 自定义
this.triggerEvent("tabsItemChange",{index});
}
}
}).tabs{}
.tabs_title{
display: flex;
}
.title_item{
display: flex;
justify-content: center;
align-items: center;
flex: 1;
padding: 15rpx 0;
}
.active{
color:var(--themeColor);
border-bottom: 5rpx solid currentColor;
}
.tabs_content{}2.页面代码
<SearchInput></SearchInput>
<!-- 监听自定义事件 -->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" >
<block wx:if="{{tabs[0].isActive}}">
<view class="first_tab">
<navigator class="goods_item"
wx:for="{{goodsList}}"
wx:key="goods_id"
url="/pages/goods_detail/index?goods_id={{item.goods_id}}"
>
<!-- 左侧 图片容器 -->
<view class="goods_img_wrap">
<image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image>
</view>
<!-- 右侧 商品容器 -->
<view class="goods_info_wrap">
<view class="goods_name">{{item.goods_name}}</view>
<view class="goods_price">￥{{item.goods_price}}</view>
</view>
</navigator>
</view>
</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
</Tabs>/*
1 用户上滑页面 滚动条触底 开始加载下一页数据
1 找到滚动条触底事件 微信小程序官方开发文档寻找
2 判断还有没有下一页数据
1 获取到总页数 只有总条数
总页数 = Math.ceil(总条数 / 页容量 pagesize)
总页数 = Math.ceil( 23 / 10 ) = 3
2 获取到当前的页码 pagenum
3 判断一下 当前的页码是否大于等于 总页数
表示 没有下一页数据
3 假如没有下一页数据 弹出一个提示
4 假如还有下一页数据 来加载下一页数据
1 当前的页码 ++
2 重新发送请求
3 数据请求回来 要对data中的数组 进行 拼接 而不是全部替换！！！
2 下拉刷新页面
1 触发下拉刷新事件 需要在页面的json文件中开启一个配置项
找到 触发下拉刷新的事件
2 重置 数据 数组
3 重置页码 设置为1
4 重新发送请求
5 数据请求回来 需要手动的关闭 等待效果
*/
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
data: {
tabs: [
{
id: 0,
value: "综合",
isActive: true
},
{
id: 1,
value: "销量",
isActive: false
},
{
id: 2,
value: "价格",
isActive: false
}
],
goodsList:[]
},
// 接口要的参数
QueryParams:{
query:"",
cid:"",
pagenum:1,
pagesize:10
},
// 总页数
totalPages:1,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.QueryParams.cid=options.cid||"";
this.QueryParams.query=options.query||"";
this.getGoodsList();
},
// 获取商品列表数据
async getGoodsList(){
const res=await request({url:"/goods/search",data:this.QueryParams});
// 获取 总条数
const total=res.total;
// 计算总页数
this.totalPages=Math.ceil(total/this.QueryParams.pagesize);
// console.log(this.totalPages);
this.setData({
// 拼接了数组
goodsList:[...this.data.goodsList,...res.goods]
})
// 关闭下拉刷新的窗口 如果没有调用下拉刷新的窗口 直接关闭也不会报错
wx.stopPullDownRefresh();
},
// 标题点击事件 从子组件传递过来
handleTabsItemChange(e){
// 1 获取被点击的标题索引
const {index}=e.detail;
// 2 修改源数组
let {tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// 3 赋值到data中
this.setData({
tabs
})
},
// 页面上滑 滚动条触底事件
onReachBottom(){
// 1 判断还有没有下一页数据
if(this.QueryParams.pagenum>=this.totalPages){
// 没有下一页数据
// console.log('%c'+"没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
wx.showToast({ title: '没有下一页数据' });
}else{
// 还有下一页数据
// console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
this.QueryParams.pagenum++;
this.getGoodsList();
}
},
// 下拉刷新事件
onPullDownRefresh(){
// 1 重置数组
this.setData({
goodsList:[]
})
// 2 重置页码
this.QueryParams.pagenum=1;
// 3 发送请求
this.getGoodsList();
}
})/* pages/goods_list/index.wxss */
.first_tab .goods_item {
display: flex;
border-bottom: 1px solid #ccc;
}
.first_tab .goods_item .goods_img_wrap {
flex: 2;
display: flex;
justify-content: center;
align-items: center;
}
.first_tab .goods_item .goods_img_wrap image {
width: 70%;
}
.first_tab .goods_item .goods_info_wrap {
flex: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.first_tab .goods_item .goods_info_wrap .goods_name {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.first_tab .goods_item .goods_info_wrap .goods_price {
color: var(--themeColor);
font-size: 32rpx;
}3.效果
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-11-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。