微信小程序之购物车的交互场景

目录

前言

购物车交互场景

说明：

浏览效果：

 说明2：

shouye.wxml:

shouye.wxss:

shouye.js:

代码讲解：

---

 我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于微信小程序专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

 

前言

        JavaScript是小程序编程中的基础语言，JavaScript代码大约占整个小程序项目一半的代码量。全局文件app.js和所有的页面js文件都是由JavaScript来编写的，JavaScript代码主要实现业务逻辑处理和用户交互两方面的作用。

购物车交互场景

说明：

        尽管张小龙在2018微信公开课上指出，“小程序不是专门为电商准备的”，但是由于强大的社交属性和微信支付的便捷性，电商成为小程序的重要应用场景。电商小程序中经常要用到购物车是JavaScript在小程序交互场景中的经典应用。

浏览效果：

 说明2：

由于我们本次案例的重点是逻辑时间的编写，所有页面的样式略有粗糙！

shouye.wxml:

<view class="title">案例：</view>
<view class="goods-box">
  <!-- 商品展示 -->
  <view class="q1">
    <image src="../../images/qqq.jpg"></image>
  </view>
  <view class="carts-cion">
    <view class="q2">
                <!-- 购物车图标 -->
          <van-icon name="shopping-cart-o"size="30px" />
          <!-- 加入购物车导航 -->
          <view class="operation">
            <text class="operation-jian" bindtap="jianCount">-</text>
            <text class="operation-num">数量{{num}}</text>
            <text class="operation-jia" bindtap="jiaCount">+</text>
            <text bindtap="addCart">加入购物车</text>
          </view>
    </view>
    <!-- 加入购物车 -->
    <text class="carts-num" wx:if="{{hasCart}}">购物车已有：{{totalNum}}</text>
  </view>
</view>

shouye.wxss:

.q1{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
image{
  width: 500rpx;
  height: 350rpx;
  border-radius: 30rpx;
}
.q2{
  border-radius: 30rpx;
  height: 100rpx;
  background-color: tomato;
  margin: 30rpx 20% 0 20%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

shouye.js:

// pages/shouye/shouye.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:1,
    totalNum:0,
    hasCart:false,
  },
  jiaCount:function(){
    var num = this.data.num;
    num++;
    this.setData({
      num:num
    })
  },
  jianCount:function(){
    var num = this.data.num;
    num--;
    this.setData({
      num:num
    })
  },
  addCart:function(){
    const num = this.data.num;
    var total = this.data.totalNum;
    this.setData({
      hasCart:true,
      totalNum:num + total
    })
    wx.showToast({
      title:"加入购物车成功！",
      duration:3000,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

代码讲解：

shouye.wxml文件中"+"和"-"和"加入购物车"三个按钮绑定了点击事件。在shouye.js文件中为"+"按钮定义了事件函数jiaCount（），用于实现当用户点击"+"按钮时商品数量加1.为"-"按钮定义了事件函数jianCount（）用于实现当用户点击"-"按钮时商品数量减1.为"加入购物车"按钮定义了事件函数addCart（），用于实现当用户点击"加入购物车"时，一次性向购物车添加num件商品。当用户由加购物车行为，及点击了"加入购物车"按钮时，hasCart被赋值为true，则在购物车图标下方出现"购物车已有{{数量}}"