【小程序项目开发-- 京东商城】uni-app之商品列表页面 （上）

???欢迎来到???
??魔术之家！！??

该文章收录专栏
? 2022微信小程序京东商城实战 ?

专栏内容
? 京东商城uni-app项目搭建 ?
? 京东商城uni-app 配置tabBar & 窗口样式 ?
? 京东商城uni-app开发之分包配置 ?
? 京东商城uni-app开发之轮播图 ?
? 京东商城uni-app之分类导航区域 ?
? 京东商城uni-app 首页楼层商品 ?
? 京东商城uni-app 商品分类页面（上） ?
? 京东商城uni-app 商品分类页面（下） ?
? 京东商城uni-app之自定义搜索组件（上） ?
? 京东商城uni-app之自定义搜索组件（中） ?
?京东商城uni-app之自定义搜索组件（下） – 搜索历史 ?

文章目录

• 一、前言介绍
• 二、创建goodlist 分支（选读*)
• 三、商品列表搜索数据请求
• 四、调取接口获取列表数据
• 五、渲染商品列表页面
• 六、将商品item组件封装为自定义组件
• 七、使用过滤器处理商品价格

一、前言介绍

主要是有三种方式进入到商品页面

1. 商品楼层点击（传参query 查询)
2. 分类页面点击（传参cid 分类）
3. 搜索页面点击（传参query查询）

添加商品页面编译模式

二、创建goodlist 分支（选读*)

 git checkout -b goodlist

三、商品列表搜索数据请求

商品列表搜索

• 请求路径：https://请求域名/api/public/v1/goods/search

• 请求方法：GET

• 请求参数

参数名

参数说明

备注

query

查询关键词

cid

分类ID

可选

pagenum

页数索引

可选默认第一页

pagesize

每页长度

可选默认20条

• 响应数据

  {
  “message”: {
  “total”: 2058,
  “pagenum”: “1”,
  “goods”: [
  {
  “goods_id”: 57332,
  “cat_id”: 998,
  “goods_name”: “400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用（10个装）”,
  “goods_price”: 14,
  “goods_number”: 100,
  “goods_weight”: 100,
  “goods_big_logo”: “http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg”,
  “goods_small_logo”: “http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg”,
  “add_time”: 1516662792,
  “upd_time”: 1516662792,
  “hot_mumber”: 0,
  “is_promote”: false,
  “cat_one_id”: 962,
  “cat_two_id”: 981,
  “cat_three_id”: 998
  },
  {
  “goods_id”: 57194,
  “cat_id”: 992,
  “goods_name”: “亿力洗车工具汽车美容用品海绵刷不伤车漆擦车海棉清洁海绵”,
  “goods_price”: 29,
  “goods_number”: 100,
  “goods_weight”: 100,
  “goods_big_logo”: “”,
  “goods_small_logo”: “”,
  “add_time”: 1516662312,
  “upd_time”: 1516662312,
  “hot_mumber”: 0,
  “is_promote”: false,
  “cat_one_id”: 962,
  “cat_two_id”: 980,
  “cat_three_id”: 992
  }
  ]
  },
  “meta”: {
  “msg”: “获取成功”,
  “status”: 200
  }
  }

• data 定义数据存贮参数

四、调取接口获取列表数据

1. data定义数据存贮

2. onload 加载函数

3. 定义数据调取函数

五、渲染商品列表页面

1. 由于有些图片无法显示，定义一个默认图片

   // 默认图片
       defaultimg: "your image url"
   

2. wxml 结构

   { {item.goods_name}} ￥ { {item.goods_price}}

• 效果
  

3. 样式美化

• 效果：
  

六、将商品item组件封装为自定义组件

1. 在component文件下创建my_goods组件
   

2. 将对应结构和样式迁移过去

   { {good.goods_name}} ￥ { {good.goods_price}}

七、使用过滤器处理商品价格

让商品价格以小数点显示

1. 定义 filter

   filters: {
   tofixed(num){
   // 返回两位数值
   return Number(num).toFixed(2)
   }
   },

2. 使用过滤器

   <view class="good-price">￥ {
        {good.goods_price | tofixed }}</view>
   

3. 效果

	  ??到这里，如果还有什么疑问??
??欢迎私信博主问题哦，博主会尽自己能力为你解答疑惑的！??
 	 ??如果对你有帮助，你的赞是对博主最大的支持！！??