小程序云开发实现数据操作功能

本文将讲述小程序云开发对数据的增删改查等操作。

 

新增数据

查看官方文档

例子：

<button bindtap="add">添加数据</button>

add(){
    // 获取云开发数据库调用
    const db = wx.cloud.database()  
    db.collection('goods').add({
      data:{
        name:'测试数据',
        count:1
      },
      success:res => {
	// 返回结果是包含新创建记录的_id
	console.log(res)
        wx.showToast({
          title:'添加成功'
        })
	console.log('res_id',res_id)
      },
      fail:err => {
		wx.showToast({
		icon: 'none',
          title:'添加失败'
        })
        console.log('err',err);
      }
    })
  }

上传文件

使用云开发的存储能力

wx.chooseImage选择图片

wx.cloud.uploadFile 上传图片

  <button bindtap="upload">上传封面</button>
  <image src="{{uploadUrl}}"></image>

upload(){
    wx.chooseImage({
      count:1,
      sizeType: ['compress'],
      sourceType:['album','camera'],
      success :res => {
        wx.showLoading({
          title: '上传中'
        })
        const filePath = res.tempFilePaths[0];
        console.log('filePath:',filePath);
        
        // 上传图片
        const cloudPath = 'my-image123'+filePath.match(/\.[^.]+?$/)[0]
        console.log('cloudPath',cloudPath);
        wx.cloud.uploadFile({   //云函数
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件]成功',res);
            this.setData({
              uploadUrl: res.fileID    //回传地址
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })
      }
    })
  },

 

读取数据

在记录和集合上都有提供get方法用于获取单个记录或集合中多个记录的数据。

const db = wx.cloud.database();
db.collection('goods').get({
  success: res=> {
	console.log('res',res);
	this.setData({goods:res.data});
  }
})

更新数据

使用update更新数据，更新方式多样化，可以直接修改新的值，也支持递增这些函数操作。

  const _ = db.command
  db.collection('goods').doc('goodid').update({
    data: {
      //新的值
      name: 'xx',
      // 表示指示数据库将字段自增 10
      count: _.inc(1)
    },
    success(res){
      console.log(res.data)
    }
  })

下拉刷新

需要配置enablePullDownRefresh配合onPullDownRwfresh生命周期

onPullDownRefresh: function () {
	console.log('onPullDownRefresh...');
},

触底加载

需要配置onReachBottomDistance配置onReachBottom

  onReachBottom: function () {
    console.log('onReachBottom...');
  }

这两个配置项在对应的json文件内进行添加：

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "onReachBottomDistance":50
}

 

总结

这篇主要介绍了小程序云开发对云函数的使用，使用云函数新增数据、上传文件、读取数据、更新数据、页面的下拉刷新和触底加载事件等。