微信小程序云开发笔记

连接到云数据库

const db = wx.cloud.database()

查询数据

  //拿数据库的表 doc是指定id来查询 get查询 add添加

db.collection('demolist').doc("cbddf0af6097ed7d076b18b9342679b6").get().then(res => {
console.log(res);
//把数据库中的数据存到data中
this.setData({
dataObj: res.data
 })
})
//指定一些参数来查询  用where来查询
db.collection('demolist').where({author:'秦兢泽'}).get().then(res => {
      console.log(res);
    })

插入数据

//js代码
//可以为加载数据的时候添加加载中函数
    wx.showLoading({
      title: '数据加载中...',
      //mask为true时在没有完成操作之前无法再次进行点击操作
      mask:true
    })

db.collection('demolist').add({
      //必须写data
      data:{
        title:'外交部辟谣美方所谓解放军SARS内部文件',
        content:"华春莹还表示,很多国家对美国在其国内外建立的生物实验室存在着严重关切。。"
      } 
    }).then(res => {
      console.log(res);
      console.log('添加成功');
      //需要把加载中关闭,不然一直转圈
      wx.hideLoading()
    })
  },

  //提交表单添加进数据库
btnSub(res) {
    console.log(res)
    // var title = res.detail.value.title
    // var author = res.detail.value.author
    // var content = res.detail.value.content
    //上面的是最古老的写法,可以用ES6的写法,解构赋值
   // var {title,author,content} = res.detail.value
   //本身返回的是一个对象,我们可以直接保存对象,在数据库中直接写对象进去也可以添加,最简洁的一种
   var resVlu = res.detail.value 
   db.collection('demolist').add({
     data:resVlu
      // data: {
      //   title:title,
      //   author:author,
      //   content:content
      // }
    }).then(res => {
      console.log(res);
    })
  },

//xml代码

-----------------

-----------------

-------------

在wxml中 利用表单添加数据


-------------

更新数据

//更新数据,必须要指定修改什么,可以写doc,或者where来找要改谁,update是局部修改,set是全部更新,直接覆盖
  updateData() {
    db.collection('demolist').doc('b00064a7609938871656c74406b07168').update({
      data:{
        author:'哥'
      }
    }).then(res => {
      console.log(res);
    })
  },

删除数据

delData() {
    db.collection('demolist').doc('b00064a7609a8e20169ec8115e59c20e').remove().then(res => {
      console.log(res);
    })
  },

在wxml中可以通过bindinput来获取输入框的内容

 

js代码
  //可以记录输入框中的内容,比如保存输入的id,然后进行删除操作等等
 myIpt(res) {
 var vlu =res.detail.value
 },

count

//获取记录格式 用count,可以直接获取数据表中一共有多少条数据
  btnNum() {
    db.collection('demolist').count().then(res => {
      console.log(res);
    })
  },

watch

onLoad: function (options) {
    //watch监听事件,可以监听修改后的数据并回调函数,必须要写onChange,onError
    //可以及时更新数据,比如别人点赞啊收藏啊这些用watch去监听就可以及时反馈到页面上

    db.collection('demolist').watch({
      onChange:res => {
        this.setData({
          dataArry:res.docs
        })
        console.log(res);
      },
      onError:err => {
        console.log(err);
      }
    })
  },

command函数的使用

const db =wx.cloud.database()
//command函数,里面有更细致的查询修改删除等操作的方法
const c=db.command
Page({
  data: {
    dataArry:[]
  },
  //1.通过limit可以限制查询多少个
  //2.orderBy排序,asc是默认顺序排列,desc就是倒序排列
  //3.skip跳过,写几个就可以跳过前面的多少个,可以用来翻页,相当于跳过这一页
  //4.field可以过滤数据,想要显示什么数据都可以写true,不想要的就不用写
  getData() {
    db.collection('demolist').limit(3).skip(3).field({
      title:true,
      time:true
    }).orderBy('time','asc').get().then(res => {
      console.log(res);
      this.setData({
        dataArry: res.data
      })
    })
  },

/*
command函数 查询比较运算符
eq等于,neq不等于
lt小于,lte小于等于/gt大于,gte大于等于
这些一般就用在分数段啊年龄数啊这些,主要是对numberl类型操作
in 要求在这个数组内的值 in([60,700]),展示60或者700的
nin 不包含这些的 黑白名单

 查询逻辑操作符
and and(c.gt(0),c.lt(1200))表示大于0小于1200
or or(c.eq(39),c.eq(234)) 表示包含39或者234的数据,跟上面的in一样
*/

  showData() {
    db.collection('demolist')
    .where({
      hits:c.eq(773)
    })
    .orderBy('hits','desc').get()
    .then(res => {
      console.log(res);
      this.setData({
        dataArry: res.data
      })

   // and 的多个数据段查询
    db.collection('demolist')
    .where(
      c.and([
        {
          author:c.eq('哥')
        },
        {
          hits:c.lt(900)
        },
      ])
    )
    .get()
    .then(res => {
      console.log(res);
          this.setData({
        dataArry: res.data
      })
    })


   //查询字段操作符
    //exists判断字段是否存在
    //查询数组的操作符
    //size 数组字段有几个,意思是这个数组的有几个值,数组的长度
    //all 数组字段包含这个指定元素
    db.collection('demolist')
    .where({
      time:c.exists(true)
      tabs:c.size(2)
      tabs:c.all(['母爱'])
    })
    .get()
    .then(res => {
      console.log(res);
          this.setData({
        dataArry: res.data
      })
    })

 //command函数 更新操作
  //可以用来更新比如点赞操作啊这些
  //inc自增 可以写自增多少,数据类型要数字,inc(-5) 表示每次点击减5
  //remove 删除一个字段

  //push 往数组里添加字段
  updateData() {
    db.collection('demolist').doc('28ee4e3e609a8e1f17da05a70033d9d1')
    .update({
      data:{
        title:'哈哈',
        hits: c.inc(1) ,
        title:c.remove(),
        list: c.push(['df','dfia'])
      }
    })
    .then(res => {
      //在调用一次展示的数据就会实时变化了
      this.showData()
      console.log(res);
    })


}

wxml代码:

-----------

{{index +1}}.{{item.title}} 点击数:{{item.hits}}

云函数的使用

  • 这个云函数是获取数据的,通过skip来实现分页功能,通过limit来限制每次可以获取多少条数据
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
//调用云函数数据库,必须写
const db=cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  var num = event.num
  var page=event.page
//必须要有返回值

  return await db.collection('demolist').skip(page).limit(num).get()
}
//js的代码
Page({
  data: {
    dataArry:[],
  },
  getData(num=5,page=0) {
    wx.cloud.callFunction({
      name:"getData",
      //传递数据到云函数
      data:{
        num,
        page
      }
    })
    .then(res => {
      var oldData = this.data.dataArry
      //新数组拼接老数组
      var newData = oldData.concat(res.result.data)
      this.setData({
        dataArry:newData
      })
      console.log(res.result.data);
    })
  },

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
//页面渲染出来马上获取数据
    this.getData()
  },

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
//每次下拉就多获取五条数据
    var page=this.data.dataArry.length
    this.getData(5,page)
  },


})
  • 这个云函数是用来获取增加点赞数的
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db=cloud.database()
const c=db.command

// 云函数入口函数
exports.main = async (event, context) => {
  var id=event.id
//通过更新数据来实现点赞的增加
 return db.collection('demolist').doc(id).update({
    data:{
      hits:c.inc(7)
    }
  })
}
//js代码
Page({
 //点击将阅读数+7
  clickRow(res) {
    wx.showLoading({
      title: '数据加载中...',
    })
    //1.获取点击的id和索引值
    var {id,idx} = res.currentTarget.dataset;
    //2.云函数进行更新操作

    //3.前端连后端,将数据传输给后端,后端返回数据
    wx.cloud.callFunction({
      name:"updateHits",
      //传递数据到云函数
      data:{
        id:id
      }
    })
    .then(res => {
      console.log(res);
      //4.重新渲染列表数据 
      var newData = this.data.dataArry
      newData[idx].hits+=7
      this.setData({
        dataArry:newData
      })
      wx.hideLoading()
    }) 
  },
})
//xml代码


  {{index +1}}.标题:{{item.title}}
  作者:{{item.author}} 
  阅读量:{{item.hits}}
  发布日期:{{item.time}}

  • 上传图片功能的实现
//js代码
var urlArr = []
var filePath=[]
Page({
  data: {
  
  },
  clickBtn() {
    wx.chooseImage({
      success: res => {
        filePath = res.tempFilePaths
        
        //同时上传多张图片
        filePath.forEach((item,idx) =>{
           this.cloudFile(idx,item)
        })
       
      }
    })

  },
  cloudFile(filename,path) {
    wx.showLoading({
      title: '上传中',
    })
    wx.cloud.uploadFile({
      cloudPath: 'userImage/'+filename+Date.now()+'.jpg',
      filePath: path
    }).then(res => {
      console.log(res);
      urlArr.push(res.fileID)
      if(filePath.length==urlArr.length) {
          this.setData({
        urlArr
      })
      }
    
      
      wx.hideLoading()
    })
  },
})
//xml代码


你可能感兴趣的:(微信小程序云开发笔记)