微信小程序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，則可以嘗試加入后端，實現雲端存儲數據。這樣會比使用小程序自帶的雲數據庫，在程序運行速度上會更加方便快捷。