微信小程序底部菜单、购物车实现

首先看看目标效果：
先用view容器搭建页面的结构,由于最开始我引入了阿里云的图标库，所以一打开就能看得到图标的出现:
现在的效果是：用position:fixed + flex实现快速的布局

.btm_tool {
  border-top: 1rpx solid #ccc;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
}
.btm_tool .tool_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  position: relative;
}
.btm_tool .btn_cart {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffa500;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}
.btm_tool .btn_buy {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eb4450;
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}

实现效果;
实现客服交流还有分享功能。小程序本身实现了开放功能：
加上css代码，button设置成绝对定位不占位，为了不去button的默认样式，加上css:

.btm_tool .tool_item button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

前端购物车业务逻辑实现：

  <view class="tool_item btn_cart" bindtap="handleCartAdd">
  加入购物车
  </view>

 // 点击 加入购物车
  handleCartAdd() {
    //  获取缓存中的购物车 数组
    let cart = wx.getStorageSync("cart") || [];
    // 判断 商品对象是否存在于购物车数组中
    let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);
    if (index === -1) {
      //  不存在
      this.GoodsInfo.num = 1;
      this.GoodsInfo.checked = true;
      cart.push(this.GoodsInfo);
    } else {
      //  已经存
      cart[index].num++;
    }
    //  把购物车重新添加回缓存中
    wx.setStorageSync("cart", cart);
    //  弹窗提示
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      mask: true
    });
  }