微信小程序购物车（云数据库）详细-解决了更新数据库延迟显示

首先完成的大图

这里不对新建云数据库进行讲解，直接插入，查询。

首页

想要获取云数据库的内容，我们要修改app.js

//app.js
App({
  onLaunch: function () {
    // shop-6yqya
    wx.cloud.init({
      env: 'shop-6yqya',
      traceUser: true,

    })
  },
  globalData: {
    userInfo: null
  }
})

现在数据库是空的，我们要往里插值，注意不要直接在数据库中添加记录，在那里添加的记录，我们修改不了。他只有一个_id；而我们js中加入的记录可以修改，会多一个_openid。

我们开始插入

  onLoad: function (options) {
     this.testadd();//不调用的话插不进去
  },
  testadd: function() {
    const db = wx.cloud.database();
    db.collection("goods").add({
      data: {
          num: 1,
          price: 79,
          monthSell: 208,
          name: "Java编程思想（第4版）",
          picture: "https://img.alicdn.com/imgextra/i1/1049653664/TB1PU42OVXXXXcYXXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg"  
      }
    })
  }

之后在给一个对象添加字段可以在云数据库中直接加入

我们在那个页面调用就在哪个页面插入

// pages/car/car.js
Page({
  data: {
    goods: {}
  },
  //获取数据库中的值
  getInfo: function() {
    var that = this;
    const db = wx.cloud.database();
    db.collection("goods").get({
      success: function(res) {
      //这里使用that
        that.setData({
          goods: res.data
        })
      }
    })
  }
})

很多小朋友会问为啥用 that.setData,因为this代表所在大括号之外的内容，而我们需要给data中的数据赋值，data在page下，所以要选取同一级的。

现在{{goods}}中就是我们需要的内容了，你可以随意布局

<view wx:for="{{goods}}" wx:for-item="i" >
    <view class="reno1" bindtap="detail" id="{{i.picture}}" >
    <view class="reno1-pic"><image src="{{i.picture}}" style="width:325rpx;height: 325rpx"/></view>
        <view >{{i.name}}</view>
        <view >月销量{{i.monthSell}} 售价: {{i.price}}</view>
    </view>
</view>

商品页

买东西少不了加加减减，还要看看总价（买得起吗）

加函数

//wxml
<view  class="reduce" bindtap="add" id="{{index}}" data-num="{{i.num}}" data-id="{{i._id}}">
    +  
</view>

//js
  add: function(res) {
    const db = wx.cloud.database();
    var needId = res.currentTarget.dataset.id;//更新数据库就是根据这个id改的，每个记录都有一个唯一的_id
    console.log("Hello")
    var Num = res.currentTarget.dataset.num+1;
    var id = parseInt(res.currentTarget.id);
    var up = "goods["+id+"].num"
    this.setData({
      [up]: parseInt(Num)
    })  
    db.collection("goods").doc(needId).update({
      data: {
        num: Num
      }
    }),
    this.getTotalprice();
  }

这里不得不说的一个黑科技

var up = “goods[”+id+"].num"

在setData({})中

    this.setData({
      goods[id]: Num
    }) 

这样写是错的，good[**(必须是0-9之间的数)]，非常不方便。

我之所说解决了更新数据库延迟显示的问题是因为，我没有在更新以后在去获取数据库的内容，而是先给data赋值，这样显示不会延迟，再更新数据库，让它慢慢更新吧。

减函数

  reduce: function(res) {
    const db = wx.cloud.database();
    var needId = res.currentTarget.dataset.id;
    console.log("Hello")
    var Num = res.currentTarget.dataset.num-1;
    if(Num < 0) Num = 0;
    var id = parseInt(res.currentTarget.id);
    var up = "goods["+id+"].num"
    this.setData({
      [up]: parseInt(Num)
    })  
    db.collection("goods").doc(needId).update({
      data: {
        num: Num
      }
    })
    this.getTotalprice();
  }

减函数和加函数区别不大，就是加一个特判（商品数不能小于0）

看看买得起吗（求总金额）

  getTotalprice: function() {
    var info = this.data.goods;
    var totalPrice = 0;
    for(let i = 0; i < info.length; i++)
    {
    // info[i].vis是，是否选了这个商品；选了加进去
      if(info[i].vis){
        totalPrice += info[i].num*info[i].price;
      }
    }
    this.setData({
      totalPrice: totalPrice.toFixed(2),
      goods: info
    })
  },

全选

  selectALL: function() {
    var selectAll = this.data.selectAll;
    selectAll = !selectAll; //是现在状态的相反值，已经全选=》都不选 or 全选
    var info = this.data.goods;
    for(let i = 0; i < info.length; i++)
    {
      info[i].vis = selectAll;
    }
    this.setData({
      goods: info,
      selectAll: selectAll
    })
    this.getTotalprice();
  }

详情页

学到了一个布局方式，实现图中选中变红

<view class="reno4-1 {{click === 0 ? 'on':''}}" bindtap="isClick" data-index="0">商品详情</view>
<view class="reno4-1 {{click === 1 ? 'on':''}}" bindtap="isClick" data-index="1">基本信息</view>

.reno4-1 {
    display: inline-block;
    width: 50%;
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1rpx solid #ededed;
    box-sizing: border-box;
    text-align: center;
    color: #f5ca0a;
}
.reno4-1.on {
    color: red;
    border-bottom: 1rpx solid #e75d5d;
}

  isClick: function(res) {
    console.log(res);
    var id = parseInt(res.currentTarget.dataset.index);
    this.setData({
      click: id
    })
  }

reno4-1 和 {{click === 0 ? ‘on’:’’}}中间加上一个空格

ADDRESS页

获取输入，和弹窗提示

<form bindsubmit="formSubmit">
    <input value="{{address.name}}" name="name" placeholder="姓名" class="Reno1"/>
    <input value="{{address.phone}}" name="phone" placeholder="电话号码" class="Reno1"/>
    <input value="{{address.detail}}" name="detail" placeholder="详细地址" class="Reno1"/>
    <button form-type="submit" class="Reno2">保存</button>
</form>

  formSubmit: function(e) {
    var value = e.detail.value;
    if(value.name && value.phone && value.detail) {
      wx.setStorage({
        key: 'address',
        data: value,
        success() {
          wx.navigateBack();
        }
      });
    }
    else {
    //弹窗提示
      wx.showModal({
        title: '提示',
        content: '请将信息填写完整',
        showCancel: false
      });
    }
  }

核心逻辑就这么多，谢谢大家。