【实践】仿京东商城小程序（附源码）

  最近学习使用小程序开发开发了一款仿京东商城小程序效果如下：

仿京东商城

  仿京东商城小程序基本实现首页搜索、商品分类列表、购物车等功能，项目结构如下：

项目结构

  购物车功能示例，在pages下创建shoppingCart.wxml文件：

<!--miniprogram/pages/shoppingCart/shoppingCart.wxml-->
<view class="content">
  <view class="info">
    <view class="items">
      <checkbox-group bindchange="checkboxChange">
        <block wx:for="{{orders}}">
          <view class="item">
            <view class="icon">
              <checkbox value="{{item.id}}" checked="{{selected}}"></checkbox>
            </view>
            <view class="pic">
              <image src="{{item.pic}}" style="width:70px;height:70px;"></image>
            </view>
            <view class="odrer">
              <view class="title">{{item.name}}</view>
              <view class="priceInfo">
                <view>￥</view>
                <view class="price">{{item.price}}</view>
                <view class="minus" id="{{item.id}}" bindtap="minusGoods">-</view>
                <view class="count">{{item.count}}</view>
                <view class="add" id="{{item.id}}" bindtap="addGoods">+</view>
              </view>
            </view>
          </view>
          <view class="line"></view>
        </block>
      </checkbox-group>
      <checkbox-group bindchange="checkAll">
        <view class="all">
          <view>
            <checkbox checked="{{selectedAll}}" />
          </view>
          <view class="selectAll">
            全选
          </view>
          <view>
            合计：
          </view>
          <view class="total">
            {{totalPrice}}
          </view>
          <view>
            元
          </view>
          <view class="opr" bindtap="order">选好了</view>
        </view>
      </checkbox-group>
    </view>
  </view>
</view>

  样式shoppingCart.wxss:

/* miniprogram/pages/shoppingCart/shoppingCart.wxss */

.content {
  font-family: "Microsoft YaHei";
  height: 200px;
  background-color: #f9f9f9;
}

.backgroud {
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.hr {
  height: 12px;
  background-color: #f9f9f9;
}

.address {
  height: 25px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
}

.desc {
  line-height: 42px;
  padding-left: 10px;
  font-size: 15px;
  color: #f00;
}

.detail {
  position: absolute;
  right: 10px;
  line-height: 42px;
}

.info {
  background-color: #fff;
}

.sscs {
  text-align: center;
}

.line {
  border: 1px solid #ccc;
  opacity: 0.2;
}

.receive {
  display: flex;
  flex-direction: row;
  padding: 10px;
}

.time {
  display: flex;
  flex-direction: row;
}

.left {
  width: 50%;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
}

.right {
  width: 50%;
  text-align: left;
  font-size: 15px;
  color: #5dafed;
  font-weight: bold;
  margin-right: 20px;
}

.freight {
  font-size: 13px;
  margin-right: 20px;
}

.detail2 {
  position: absolute;
  right: 10px;
  line-height: 60px;
}

.items {
  padding-bottom: 120rpx;
}

.item {
  display: flex;
  flex-direction: row;
  padding: 10px;
  align-items: center;
}

.item_name {
  margin: 10px;
  padding: 10px;
  width: 400rpx;
}

.item_img {
  margin: 10px;
  padding: 10px;
}

.order {
  height: 87px;
}

.title {
  font-size: 15px;
}

.priceInfo {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  width: 400rpx;
}

.pic {
  margin: 10px;
}

.price {
  width: 80%;
  font-size: 15px;
  color: #f00;
  text-align: left;
}

.minus, .add {
  border: 1px solid #ccc;
  width: 30px;
  color: #f00;
  text-align: center;
}

.count {
  margin-left: 10px;
  margin-right: 10px;
  width: 50%;
  text-align: center;
}

.all {
  padding-left: 10px;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  border-top: 1px solid #f5f5f5;
  background: #fff;
}

.selectAll {
  width: 20%;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

.total {
  width: 20%;
  font-size: 15px;
  color: #f00;
  font-weight: bold;
}

.opr {
  position: absolute;
  right: 0px;
  width: 92px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background-color: #ff3000;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

/*隐藏滚动条*/

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

  购物车实现的功能主要有选择商品，加减商品数量、全选、反选、结算等，实现逻辑如下：

// miniprogram/pages/shoppingCart/shoppingCart.js
Page({

  data: {
    orders: [],
    selected: true,
    selectedAll: true,
    totalPrice: 0
  },
  onLoad: function(options) {
    this.loadOrders();
  },
  loadOrders: function() {
    //加载购物车商品订单信息
    var orders = wx.getStorageSync('goods');
    this.setData({
      orders: orders
    });
    var totalPrice = 0;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      totalPrice += order.price * order.count;
    }
    this.setData({
      totalPrice: totalPrice
    });
  },
  checkboxChange: function(e) {
    console.log(e);
    var ids = e.detail.value;
    if (ids.length == 0) {
      this.setData({
        selectedAll: false
      });
    } else {
      this.setData({
        selectedAll: true
      });
    }
    var orders = wx.getStorageSync('goods');
    this.setData({
      orders: orders
    });
    var totalPrice = 0;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      totalPrice += order.price * order.count;
    }
    this.setData({
      totalPrice: totalPrice
    });
  },
  checkAll: function(e) {
    //全选复选框
    var selected = this.data.selected;
    var result = selected == true ? false : true;
    this.setData({
      selected: result
    });
    if (result == false) {
      this.setData({
        totalPrice: 0
      });
      this.setData({
        selectedAll: false
      });
    } else {
      this.loadOrders();
      this.setData({
        selectedAll: true
      })
    }
  },
  minusGoods: function(e) {
    //减少商品
    var goods = wx.getStorageSync('goods');
    var id = e.currentTarget.id;
    console.log(id)
    var good = {}
    for (var i = 0; i < goods.length; i++) {
      var oldGood = goods[i];
      if (id == oldGood.id) {
        good = oldGood;
        break;
      }
    }
    console.log(good);
    var orders = wx.getStorageSync('goods');
    var addOrders = new Array();
    var add = true;
    this.setData({
      orders: orders
    });
    var totalPrice = 0;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      if (order.id == good.id) {
        var count = order.count;
        if (count >= 2) {
          order.count = count - 1;
        }else{
          wx.showToast({
            title: '宝贝不能再减少了哦',
            icon: 'none',
            image: '',
            duration: 1500,
            mask: false,
            success: function(res) {},
            fail: function(res) {},
            complete: function(res) {},
          })
        }
      }
      addOrders[i] = order;
    }
    wx.setStorageSync('goods', addOrders);
    this.loadOrders();
  },
  addGoods: function(e) {
    //添加商品
    var goods = wx.getStorageSync('goods');
    var id = e.currentTarget.id;
    var good = {}
    for (var i = 0; i < goods.length; i++) {
      var oldGood = goods[i];
      if (id == oldGood.id) {
        good = oldGood;
        break;
      }
    }
    console.log(good);
    var orders = wx.getStorageSync('goods');
    var addOrders = new Array();
    var add = true;
    this.setData({
      orders: orders
    });
    var totalPrice = 0;
    for (var i = 0; i < orders.length; i++) {
      var order = orders[i];
      if (order.id == good.id) {
        var count = order.count;
        order.count = count + 1;
        add = false;
      }
      addOrders[i] = order;
    }
    var len = orders.length;
    if (add) {
      good.count = 1;
      addOrders[len] = good;
    }
    wx.setStorageSync('goods', addOrders);
    this.loadOrders();
  },
  order: function() {
    wx.switchTab({
      url: '../order/order',
    })
  }
})

完整代码见GitHab：仿京东商城小程序