仿京东小程序之购物列表添加

前言

  在前端的学习过程中，新人往往会进行并且尝试小程序的建立和开发过程。而模仿那些知名的电商项目则成为大多数人的首选。同为新人的我也不例外，选择模仿知名的京东小程序。那么，今天这篇文章，就基于大家都熟知的京东小程序谈一谈如何进行购物列表的添加和相关功能的设定，希望这篇文章能够对你有一点帮助，读完有一点收益。

项目图预览

  在小程序的模仿过程中，我们会遇到很多类似于以下需要实现具有商品列表功能的小程序，这个京东的界面就是一个典型，我们今天需要模仿实现的就是以下的形式。

Tab的添加与切换

  要实现商品列表的形式，那么商品上方的导航栏是必不可少的功能，下面，就让我们了解一下是如何添加Tab并且完成Tab转换功能。

  首先，在相对的组件页面的js文件中，找到data数据，在data数据中添加activeTypeId属性，并且设置它的属性为0。然后，找到其相对应的HTML文件，由于要实现分类展示的功能，在里面添加以下代码

  <view class="type-container">
    <view class="type-item" wx:for="{{typeCat}}"wx:key="id">
      <view data-id="{{item.id}}" class="type-name {{activeTypeId === item.id? 'typeitem-on':''}}"bindtap="typeSwitch">
     {{item.name}}
    </view>
    </view>
  </view>

  其次，为了实现将数据放入type中，我们需要在相对应的js文件中，在Page的data里面加入以下代码，自行根据所需模仿的小程序内容添加相关的信息，使得能够真正地实现数据配置以及tab的页面呈现

    typeCat: [ /** 类型的数据配置 */
    {
      id: 0, name: "精选",
    },
    {
      id: 1, name: "超市"
    },
    {
      id: 2, name: "手机"
    },
    {
      id: 3, name: "美妆"
    },
    {
      id: 4, name: "女装"
    },
    {
      id: 5, name: "男装"
    }
  ]

  写完这些代码，只是相当于在页面添加了tab文字，还需要设置css布局让它变得更加贴合我们模仿的京东小程序，下面是css代码

.type-container{
display: flex;
padding: 5rpx 20rpx 0 20rpx;
position: relative;
top: -310px;
background-color: white;
margin-top: 15rpx;
justify-content: flex-start;
}

.type-container .type-item{
flex: 1;
height: 60rpx;
}
.type-container .type-item view{
font-size: 25rpx;
text-align: center;
line-height: 60rpx;
border-radius: 10rpx 10rpx 0 0;
margin: 0 3rpx;
}
.type-container .type-item .type-item-on{
background-color: red;
box-shadow: 3rpx grey;
font-weight:bold;
}

  完成以上操作后，只能在页面显现tab标签，还不能完全地实现Tab标签点击后地转换功能，此时，我们为了添加这个功能，就需要加入typeSwitch函数，并且在Page中加入以下代码，就可以实现了。

typeSwitch(e){
   this.setData({
     activeTypeId: e.currentTarget.dataset.id
   })
 }

数据库的引入

第一步

  在微信开发小程序的界面中找到左上角的云开发，点击，我们准备将商品列表的数据引入并且新建数据库

第二步

  点击上方的数据库准备进行新建，然后点击左边列表的 “+” 实现添加数据库，命名为"goods-board"

第三步

  添加商品的相关信息，即，添加字段，如下图所示

  添加完毕后，直接保存，如果数据引入成功，我们可以在调试器的AppData中看到引入的相关数据

云开发数据的封装

  我们需要在在app.js中封装了全局范围的云数据库，所以在相关页面的js中直接进行调用，相关页面的js中需要增加的相关的代码如下

  onShow: function () {
  // 封装所有的请求为一个方法
  // app  当前应用
  // 根据添加数据时间进行降序排序后取出数据(集合名，需要排序的字段，排序规则升序或降序，回调函数)
  app.getInfoByOrder('goods-board', 'time', 'desc', e => {
    this.setData({
      goodsInfo: e.data,
      isShow:true
    })
    wx.hideLoading(); 
  })
  },

  为了更好地实现排序方式，我们还需要在app.js中添加相关代码，也需要在页面js的头部加上 " const app = getApp(); "

getInfoByOrder(setName, ruleItem, orderFunc, callback) {
  const db = wx.cloud.database();
  db
  .collection(setName) // 边接数据表 mongodb 没有严格的字段 tmpPictures  json文档document mysql 关系型 mongodb 文档型
  .orderBy(ruleItem, orderFunc)
  .get() // promise 
  .then(callback) // 回到页面去  
  .catch(console.error) // 容错处理
}

样式的修改

  同时，在页面的HTML文件中加入以下代码，添加相关功能，如加入购物车，并修改相关样式

 <view class="type-container">
  <view class="type-item" wx:for="{{typeCat}}"wx:key="id">
    <view data-id="{{item.id}}" class="type-name {{activeTypeId === item.id? 'type-item-on':''}}"bindtap="typeSwitch">
   {{item.name}}
  </view>
  </view>
</view>

<view class="goods-container">
  <block wx:for="{{goodsInfo}}" wx:key="goodsId">
    <view class="goods-item"bindtap="tapToDetail"data-gID="{{item._id}}"wx:if="{{item.onShow}}">
       <view class="goods-image">
         <image src="{{item.imgUrl}}" mode="aspectFill"></image>
       </view>
         <view class="goods-info">

           <view class="line1">
             <text class="name">{{item.name}}</text>
           </view>
           
           <view class="line2">
             <text class="price">￥{{item.price}}</text>
             <image src="/jd_images/4.png" mode="aspectFit"catchtap="addCarByHome"data-_fid="{{item._id}}"></image>
             <text class="unit">{{item.unit}}</text>           
           </view>

       </view>
    </view>
  </block>
</view>
</view>

  在页面的js文件中添加以下代码，目的是触发事件，传递参数

tapToDetail(e) {
   const _id = e.currentTarget.dataset.gID
},

  在页面的css中增加以下样式，使得商品列表变得更加美观，可以根据实际情况调节相关值的大小，以下代码可供参考

.goods-container{
 flex-wrap: wrap;
 display: flex;
 padding: 5rpx 20rpx 0 20rpx;
 justify-content: space-between;
 width: 710rpx;
 margin: 10rpx;
 border-radius: 10rpx 10rpx 0 0;
 position: relative;
 top: -730rpx;
}

.goods-item{
 width: 345rpx;
 overflow: visible;
 border-radius: 15rpx;
 margin-bottom: 20rpx;
 background-color: #fff;
 box-shadow: 3.5rpx 3.5rpx 1rpx #d3d1d1;
}
.goods-item .goods-image{
 height: 320rpx;
 width: 345rpx;
 border: 1rpx;
}

.goods-item .goods-image image{
 width: 100%;
 height: 100%;
}

.goods-item .goods-info{
 margin: 15rpx 0 10rpx 10rpx;
}
.goods-item .goods-info .name{
 display: block;
 font-size: 35rpx;
}
.goods-item .goods-info .line2{
  display: flex;
  margin-top: 10rpx;
  justify-content: space-between;
  padding-right: 20rpx;
  align-items: center;
}
.goods-item .goods-info .line2 image{
 width: 80rpx;
 font-size: 35rpx;
 color: red;
} 
.goods-item .goods-info .price {
  font-size: 35rpx;
  width: 200rpx;
  color: orangered;
}
.goods-item .goods-info .price .unit{
 font-size: 20rpx;
}
.goods-item .goods-info image{
 width: 50rpx;
 height: 50rpx;
}

成品

总结

  刚开始准备仿京东小程序的时候，完全一头雾水，写着写着就卡bug，非常痛苦，但是每当靠自己解决了bug的时候是非常欣喜的，或许我现在卡bug了，但是我只要坚持写下去，过几天可能这个bug就解决了。这个成品并不是完美复刻，还有很多瑕疵，以后可能还会不断修改。非常感谢在我前端学习过程中指点我的老师，无偿帮助过我的大佬同学，很荣幸与你们为伍，虽然我现在的项目还不够完善，学习进度也不快，但我相信我会慢慢变好的。