正文 

当前位置： 首页 > 技术 > java教程

小程序项目开发--京东商城uni-app之商品列表页面（上）(代码片段)

计算机魔术师 计算机魔术师     2022-11-29     804

关键词：

👋👋欢迎来到👋👋
🎩魔术之家！！🎩

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

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

文章目录

一、前言介绍

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

  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 定义数据存贮参数
<script>
  export default 
    data() 
      return 
        title:'',
        // queryobject
        queryObj: 
          query: '',
          cid:"",
           // 页面
          pagenum: 1,
           // 数据条数
          pagesize: 10
        
      ;
    ,
    onLoad(options)
      console.log(options)
      this.title = options.name
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cat_id || ''
      ,

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

  1. data定义数据存贮
  2. onload 加载函数
  3. 定义数据调取函数
<script>
  export default 
    data() 
      return 
        goodlist: [],
        // 总的商品数
        total: 0
      ;
    ,
    onLoad(options)
      this.getGoodlist()
      ,
      methods: 
      async getGoodlist()
        const data:res = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        console.log(res)
        if (res.meta.status != 200) return uni.$showMsg("数据调取失败") 
        this.goodlist = res.message.goods
        this.total = res.message.total

五、渲染商品列表页面

  1. 由于有些图片无法显示，定义一个默认图片
    // 默认图片
        defaultimg: "your image url"
  1. wxml 结构
<template>
  <view>
    <!-- 列表页 -->
    <view class="goods-list">
      <view class="good-item">
        <block v-for="(item,i) in goodlist" v-bind:key="i">
          <!-- 左侧盒子 -->
          <view class="good-item-left">
            <!--  没有得话就用默认图片  -->
            <image :src="item.goods_big_logo || defaultimg" mode=""></image>
          </view>
          <!-- 右侧盒子 -->
          <view class="good-item-right">
            <view class="good-item-name">item.goods_name</view>
            <view class="good-item-info">
              <view class="good-price">￥ item.goods_price</view>
            </view>
          </view>
        </block>
      </view>
    </view>


  </view>
</template>
  • 效果
  1. 样式美化
<style lang="scss">
  .goods-list 
    .good-item 
      display: flex;
      border-bottom: 2px solid #f1f1f1;

      .good-item-left 
        image 
          height: 200rpx;
          width: 200rpx;
          display: block;
        

        padding: 20rpx;
      

      .good-item-right 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx;

        .good-item-name 
          font-size: 14px;

        

        .good-item-info 
          .good-price 
            font-size: 16px;
            color: #c00000;
          
        
      
    
  
</style>
  • 效果：

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

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

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

<template>
  <view>
    <view class="good-item">
      <!-- 左侧盒子 -->
      <view class="good-item-left">
        <!--  没有得话就用默认图片  -->
        <image :src="good.goods_big_logo || defaultimg" mode=""></image>
      </view>
      <!-- 右侧盒子 -->
      <view class="good-item-right">
        <view class="good-item-name">good.goods_name</view>
        <view class="good-item-info">
          <view class="good-price">￥ good.goods_price</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default 
    name: "my-goods",
    props: 
      good: 
        type: Object,
        default: 
      
    ,
    data() 
      return 
        // 默认图片
        defaultimg: "https://ts1.cn.mm.bing.net/th/id/R-C.e74289455bec048b0ba2feb90e3b74f2?rik=fYpAtit%2bc2W4ZA&riu=http%3a%2f%2fimage.woshipm.com%2fwp-files%2f2017%2f04%2ftAd0ldHk60s3GAI6TNqd.jpg&ehk=RWuC%2f9spxWPWcW3w4axPrb3YP9Nt3JXlajvJWKRXV5k%3d&risl=&pid=ImgRaw&r=0"
      ;
    
  
</script>

<style lang="scss">
  .good-item 
    display: flex;
    border-bottom: 2px solid #f1f1f1;

    .good-item-left 
      image 
        height: 200rpx;
        width: 200rpx;
        display: block;
      

      padding: 20rpx;
    

    .good-item-right 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;

      .good-item-name 
        font-size: 14px;

      

      .good-item-info 
        .good-price 
          font-size: 16px;
          color: #c00000;
        
      
    
  
</style>

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

让商品价格以小数点显示

  1. 定义 filter
 filters: 
      tofixed(num)
        // 返回两位数值
        return Number(num).toFixed(2)
      
    ,
  1. 使用过滤器
    <view class="good-price">￥ good.goods_price | tofixed </view>
  1. 效果

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

小程序项目开发--京东商城uni-app之自定义搜索组件（中）--搜索建议(代码片段)

👋👋欢迎来到👋👋🎩魔术之家！！🎩该文章收录专栏✨--2022微信小程序京东商城实战--✨专栏内容✨--uni-app项目搭建--✨✨--京东商城uni-app配置tabBar&窗口样式--✨✨--京东商城uni-app开发之分包... 查看详情

小程序项目实战—购物商城微信小程序

购物商城微信小程序代码仓库https://github.com/ChangYanwei/shopMiniProgram学习资料：https://www.bilibili.com/video/BV1RK4y1v7zvAPI接口文档API接口技术点自定义组件组件之间的通信购物车页面的逻辑将发送网络请求的API封装为Promise形式的等等... 查看详情

商城微信小程序（二）——完成分类页面及商品列表页

参考技术Avscode的easyless插件会自动生成index.wxss主要是布局文件index.less的编写，注意less语法。商品列表页功能：支持上拉加载更多，下拉刷新等1，父组件（商品列表页）和子组件(Tabs组件)相互传递数据问题2,上拉加载更多、下拉... 查看详情

微信小程序商城如何开发制作商城需要哪些流程

微信小程序商城如何开发，制作商城需要哪些流程，现在很多商家都想将自己的门店搬到线上来，想借助商城小程序来开拓线上市场，下面就和大家分享一下微信小程序商城开发及制作流程：第一步：注册商城小程序在做商城小... 查看详情

京东商城大规模爬虫的开发

...后终于可以一次提取完整的网页商品了，最后提示一下，京东网页第一页的商品里面页数page是显示1和2的，第二页是3和4，这个有点特殊，最 查看详情

自己微信小程序怎么把京东货源

参考技术A可以用得有店搭建小程序微商城，能一键采集淘宝，京东的商品，拖拽式搭建，操作简单，而且是免费的，拼团，秒杀，砍价，分销都有，你可以试试 查看详情

分销商城系统开发

小程序分销商城是一种新型的电商模式，将传统的商城和多级营销相结合，以佣金、奖励等方式鼓励用户分享商品，获得收益。相比于传统电商模式，小程序分销商城具有以下优势：1.低开店门槛相比于传统电... 查看详情

基于ios的网上商城可以用uni-app嘛

...架到AppStore苹果应用商店的。不过苹果官方审核十分严格uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘... 查看详情

scrapy实战---scrapy对接selenium爬取京东商城商品数据(代码片段)

 本篇目标：我们以爬取京东商城商品数据为例，展示Scrapy框架对接selenium爬取京东商城商品数据。 背景：　　京东商城页面为js动态加载页面，直接使用request请求，无法得到我们想要的商品数据，故需要借助于selenium模... 查看详情

微信平台上面怎么导入其它电商的产品，比如京东、天猫？

...需要搭建一个微商城（基于微信公众号）或商城型微信小程序；其次，使用商城中的导入功能，将其他电商平台的产品导入进去，或者手动添加以我们之前开发过的商城为例，都是支持一键导入的，如果需要的话，可以给你看看... 查看详情

yii2.0开发一个仿京东商城平台

第1章课程简介  介绍了课程内容、背景和案例展示。第2章项目的准备工作介绍了如何使用PHP依赖管理工具Composer安装Yii2框架，模拟配置真实企业开发项目运行环境和编辑器。第3章项目前台页面的搭建介绍了如何使用Yii2... 查看详情

yii2.0开发一个仿京东商城平台

第1章课程简介  介绍了课程内容、背景和案例展示。第2章项目的准备工作介绍了如何使用PHP依赖管理工具Composer安装Yii2框架，模拟配置真实企业开发项目运行环境和编辑器。第3章项目前台页面的搭建介绍了如何使用Yii2... 查看详情

yii2.0开发一个仿京东商城平台

课程目录及下载地址：第1章课程简介介绍了课程内容、背景和案例展示。第2章项目的准备工作介绍了如何使用PHP依赖管理工具Composer安装Yii2框架，模拟配置真实企业开发项目运行环境和编辑器。第3章项目前台页面的搭建介绍了... 查看详情

008商城项目：商品列表查询-查出商品并且分页

实现的效果：   点击“查询商品”之后-》 我们的前台用的是EasyUI框架。页面的数据显示规则是：请求的参数：http://localhost:8080/item/list?page=1&rows=30   分页信息。（需要看官方的手册）返回值。Json数... 查看详情

一只初学者级别的京东商城商品爬虫（爬取索尼微单的参数信息）(代码片段)

近期对摄影产生一些兴趣，所以就自己爬了一下京东商城上Canon微单的数据。爬虫爬取了商品价格以及详细参数信息。作为一个初学者，幸运或者不幸的是，由于爬虫性能较差，在以下的代码中我并没有用到反爬虫的问题，只熟... 查看详情

uni-app之招聘求职小程序

一、效果图          查看详情

电商微信小程序的开发，项目及功能描述

开发类型：电商类小程序项目名称：e家装猫商城项目目标：本项目旨在开发一套基于微信小程序的线上电商平台，它将实现用户通过微信移动端选购自己需要的商品，商家后台获取用户订单信息来完成商品配... 查看详情

007商城项目：商品列表查询-需求分析

  我们之前已经整合了ssm框架并且调试已经好了，接下来我们实现商品列表的查询。 我们先进入到首页：方法如下：我们看到我们把所有的jsp页面都是放在：这些页面都是放在WEB-IN下面的，也就是说这些页面都是需要... 查看详情