微信小程序—云开发—数据库——增删改查

新增数据

方法一：
在页面得到JS文件中操作：

代码：

//获取集合的引用
const db =wx.cloud.database()
//指定需引用的集合的名称
const productsCollection=db.collection('products')


Page({
      console.log(event)
     productsCollection.add({
       data:{//需要添加的数据
         title:"product 1",
         image:"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
         tags:["tag1","tag2"],
         pricer:120.12,
         color:'red'
       },
       success:res=>{//success也可以用then
         console.log(res)
       }
     })
  }
})

方法二：
使用 云函数：

1. 先在cloudfunctions中创建一个Node.js云函数，名为addData
2. 输入代码：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db=cloud.database()
const productsCollection=db.collection('products')
// 云函数入口函数
exports.main = async (event, context) => {
  return await productsCollection.add({
    data:{//需要添加的数据
      title:"product 2",
      image:"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
      tags:["tag1","tag3"],
      pricer:120.3,
      color:'blue'
    }
  })
}

3. 然后上传并部署云函数
4. 最后在页面的JS文件中
   输入代码：

addData:function(event){
    wx.cloud.callFunction({
      name:'addData'//云函数的名称
    }).then(res=>{
      console.log(res)
    })
}

查询

使用生命周期函数-页面监听加载实现数据的简单查询：
在小程序的页面的JS文件中输入代码：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    productsCollection.get().then(res=>{
      console.log(res)
    })
  },

这样在进入该页面时，就可以在调试器的Console位置可以看到数据。
需要注意的是：数据库中的数据需要有_openid字段

其中的onLoad(Object query):
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
详情请参考：微信开发文档

可以将代码修改为：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    productsCollection.get().then(res=>{
      //console.log(res)
      this.setData({
        products:res.data
      })
    })
  },

这样就可以在调试器的AppData中看到数据信息
注意：直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
其中的setData:
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）
详情请参考：微信开发文档

将查询到的数据显示到页面中：

<block wx:for="{{products}}">
  <van-card
    price="{{ item.price }}"
    desc="{{ item.color }}"
    title="{{ item.title }}"
    thumb="{{ item.image }}"
  />
</block>

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    productsCollection.get().then(res=>{
      //console.log(res)
      this.setData({
        products:res.data
      })
    })
  },

其中的van-card是Vant weapp的一个组件

下拉刷新功能：
首先开启下拉刷新功能：
在页面的json文件中输入：
"enablePullDownRefresh":true
增加这条语句后，即可在相关页面进行下拉刷新动画
注：这属于页面配置功能：具体参考微信开发文档

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    productsCollection.get().then(res=>{
      this.setData({
        products:res.data
      },res=>{
        console.log("数据更新完成")
        wx.stopPullDownRefresh({
          success: (res) => {},
        })
      })
    })
    
  },

其中的onPullDownRefresh()
监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

实现触底自动加载功能：

  /**
   * 页面的初始数据
   */
  data: {
    page:0
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("已经触底了")
    let page=this.data.page+20
    productsCollection.skip(page).get().then(res=>{
      let new_data=res.data
      let old_data=this.data.products
      this.setData({
        products:old_data.concat(new_data),
        page:page
      },res=>{
        console.log(res);
      })
    })
  },

其中的Collection
Collection.get():获取集合数据，或获取根据查询条件筛选后的集合数据.查询的结果数组，数据的每个元素是一个 Object，代表一条记录

统计集合记录数或统计查询语句对应的结果记录数时，小程序端与云函数端的表现会有如下差异：

小程序端：如果没有指定 limit，则默认且最多取 20 条记录。
云函数端：如果没有指定 limit，则默认且最多取 100 条记录。
如果没有指定 skip，则默认从第 0 条记录开始取，skip 常用于分页

详情请看微信开发文档

更新

批量更新只能在云函数进行
云函数：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db=cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('products').where({
    color:"red"//筛选条件
  }).update ({
    data:{
      price:3//将price设为3
    }
  })
}

注：
where:指定查询条件，返回带新查询条件的新的集合引用
小程序端：

<van-button type="primary" bindtap='batchUpdate'>batch update</van-button>

 batchUpdate:function(event){
    wx.cloud.callFunction({
      name:"batchUpdate",
      success:res=>{
        console.log(res)
      }
    })
  },