微信小程序Demo-购物商城

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文
作业源代码	https://github.com/zyhJohn/Test
学号	31701089
院系	浙大城市学院计算机专业

前言

　　这算是我第二个写的微信小程序。相比起第一个运用了微信云开发的小程序，这一个小程序更加基础，我也在编写过程中对小程序有了一个更深的认识。

界面展示

我的demo中大致分为以下几个文件。images中存放用到的图片，pages存放页面代码等，以app等命名的文件则存放的整个小程序的一些全局变量以及环境变量。

 

部分代码展示

 category.wxml

<view class="cartList">
  <view wx:if="{{cart==false}}" class="cart-empty">
    <image src="../../images/cart-empty.png" class="cart-empty-image"></image>
    <view class="cart-empty-title">购物车暂无商品</view>
    <button class="cart-empty-button">去逛逛</button>
  </view>
  <view wx:elif="{{cart}}" class="cart-empty">
    <view wx:for="{{cart}}" wx:key="id">
      <navigator class="cartItem" url="../goodsDetail/goodsDetail?id={{item.item.id}}" open-type="navigate"
        hover-class="navigate-hover" bindtap="navigateToDetails">
        <image class="itemImage" src="{{item.item.images[0]}}" mode="aspectFit" />
        <view class="meta">
          <view class="itemName">{{item.item.name}}</view>
          <view class="itemPrice">价格：{{item.item.price}}</view>
        </view>
      </navigator>
      <text class="itemPrice">数量：</text>
      <image class="addRemove" src="../../images/remove.png" bindtap="removeItem" data-item="{{item}}"></image>
      <text class="itemPrice">{{item.count}}</text>
      <image class="addRemove" src="../../images/add.png" bindtap="addItem" data-item="{{item}}"></image>
    </view>
    <view class="buyView">
      <view>总价：{{totalPrice}}</view>
      <button class="buyButton" size="mini" bindtap="pay">结算</button>
      <button class="clearButton" size="mini" bindtap="clear">清空</button>
    </view>
  </view>
</view>

　　在wxml中，我进行了对于当前购物车内是否有物品进行了条件判断。若购物车为空，则显示购物车为空的图片，若购物车内已有货物，则显示货物并可以调整货物数量以及清空购物车。清空购物车后，页面显示则还原为购物车为空的图片。

mycart.js

Page({

  data: {
    cart: [],
    totalPrice: 0,
  },

  onLoad: function (options) {
    this.getCartData();
  },

  onShow: function () {
    this.getCartData();
  },

  getCartData: function () {
    this.setData({
      cart: getApp().globalData.cart
    })
    var total = 0;
    var cart = this.data.cart;
    cart.forEach(item => {
      var price = item.item.price;
      var count = item.count;
      total = total + price * count;
    });
    this.setData({
      totalPrice: total
    })
  },

  removeItem: function (e) {
    this.caculateCount(e, false);
  },

  addItem: function (e) {
    this.caculateCount(e, true);
  },

  caculateCount: function (e, isAdd) {
    var selectedItem = e.currentTarget.dataset.item;
    var cart = getApp().globalData.cart;
    cart.forEach(item => {
      if (item.item.id == selectedItem.item.id) {
        if (isAdd) {
          item.count++;
        } else {
          item.count--;
          if (item.count == 0) {
            var index = cart.indexOf(item);
            cart.splice(index);
          }
        }
      }
    })
    this.getCartData();
  },

  navigateToDetails: function () {
    wx.navigateTo({
      url: '../goodsDetail/goodsDetail',
      success: function (res) {

      },
      fail: function () {

      },
      complete: function () {

      }
    })
  },
  pay: function () {
    wx.requestPayment({})
  },
  clear:function(){
    var list = getApp().globalData.cart;
    this.setData({
      cart: [],
      totalPrice: 0,
    })
    list.forEach(element => {
      element.count = 0;
      console.log(list);
      return;
    });
  },
})

总结及不足

　　这一个小程序只是大致的demo。唯一值得一看的可能只有页面之间通过全局变量所进行的数据传递，以及购物车页面进行的逻辑判断。但这些恰恰是一个小程序编写最基本的技术。如果我能加入网络api的调用，可以使这一个demo再增色很多。并且若能调用网络api，则可以尝试加入后端，实现云端存储数据。这样会比使用小程序自带的云数据库，在程序运行速度上会更加方便快捷。