微信小程序云开发基础知识认知

目录认知

页面编写：view就是div  、text就是span
嵌套输出 == .box>.inner>.row

基础知识

连接数据库

const db = wx.cloud.database()，

指定数据库的名字

db.collection("数据库名称")

查询数据库所有的数据

 db.collection("数据库名称").get({
      success:res=>{
        console.log(res)
      }
    })

在页面中循环显示出数据

<view wx:for="{{dataobj}}">{{item.title}} - {{item.author}}</view>

查询条件

doc只能输入id

where：指定查询条件，返回带新查询条件的集合
 limit:指定查询结果数量上限  （limit(2)）
  orderby:排序（两个值其一是根据什么字段其二是根据正序(asc)还是倒序(desc）（orderBy("time","desc")）
skip:做分页 （skip(2)）

field:查询只需要的字段，显示查询的字段

 db.collection("demolist").doc("数据的id").get({
      success:res=>{
        console.log(res)
        this.setData({
          dataobj:res.data
        })
      }
    })

db.collection("demolist").where({
      //根据什么值进行查询
      author:"孙勇"
    }).get().then(res=>{
        this.setData({
          dataobj:res.data
        })
    })

db.collection("demolist").limit(2).skip(2).field({
      title:true,
      author:true
    }).orderBy("time","desc").get().then(res=>{
      console.log(res);
    })

事件

bindtap点击事件，相当于@click

bindsubmit="btnsub"  --form表单的提交事件 、

 form-type="submit"   --submit或reset   提交或重置

bindinput文本输入框时间

加载

wx.showLoading({
      title: '数据加载中...',
      mask:true
    })

wx.hideLoading()  //停止加载

更新数据

updatadata(){
    db.collection("demolist").doc("数据id").update({
      data:{
        //修改值
        author:"王五"
      }
    }).then(res=>{
      console.log(res);
    })
  },

删除数据

//获取输入的内容
   myinput(res){
    //db.collection("数据库名称")
    //获取文本框的值
    var vlaue = res.detail.value;
    //将值放下全局变量中、myva是全局变量
    myva=vlaue;
  },

//删除数据
//在数据库中添加的数据是不能删除的
  deldata(){
    db.collection("数据库名称").doc(myva).remove().then(res=>{
      console.log(res)
    })
  },

统计数据

db.collection("demolist").count().then(res=>{
      console.log(res)
    })

使用watch

//所有数据显示
  getdata(){
    db.collection("数据库名称").get().then(res=>{
      this.setData({
        dataarr:res.data
      })
    })
  },

//生命周期函数--监听页面加载
onLoad(options) {
    //使用watch的话需要两个固定参数是onChange和onError
    //res.docs获取符合查询条件的文档列表
    this.getdata();
    db.collection("数据库名称").watch({
      onChange:res=>{
        //重新做一次覆盖
        console.log(res.docs)
        this.getdata({
          dataarr:res.data
        })
      },
      onError:err => {
        console.log(err)
      }
    })
  },

command使用介绍

查询之比较操作符

eq是'='、neq是'!='、lt是'<'、lte是'<='、gt是'>'、gte是'>='、in是'判断一个元素是否存在于一个集合或列表中'

 db.collection("demolist").where({
      hits:_.neq(66)
    }).get().then(res=>{
      console.log(res);
      this.setData({
        dataList:res.data
      })
    })

查询之逻辑操作符

and是'与'、or是'或'、ont是'!|不满足条件'

db.collection("demolist").where({
  // hits:_.and(_.gt(0),_.lt(60))
   hits:_.or(_.eq(33),_.eq(70))
}).get().then(res=>{
   this.setData({
   dataList:res.data
   })
 })

查询之字段操作符

exists判断字符是否存在

查询之数组操作符

    inc:自增

    remove:删除某个字段

    style这样只修改值，不会修改color这个值

    push：向数组最后一个追加   //其中还有each、position这两个参数，选择位置进行追加

    pop:删除数组的最后一个

    unshift：向数组第一个进行添加

    shift：数组第一个进行删除

    pull：删除数组任意一个值

db.collection("数据库名称").doc("数据id").update({
      data:{
       //hits:_.inc(-6)
       //time:_.remove()
      //  style:{
      //    color:"green",
      //    size:"12"
      //  }
      //  style:_.set({
      //   color:"red",
      // })
      //tabs:_.push(["财经"])
      //tabs:_.pop()
      //tabs:_.unshift(['智能','新闻'])
      //tabs:_.shift()
      //tabs:_.pull('数码')
      tabs:_.push({
        each:['新视觉'],
        position:2
      })
      }
    }).then(res=>{
      console.log(res)
    })

云函数

const db = cloud.database();  //云函数连接数据库

// 云函数入口函数
exports.main = async (event, context) => {
  //event是可以接收前台传过来的数据
  var num = event.num;
  return await db.collection("demolist").limit(num).get() //等待异步返回请求
}

使用云函数进行单张/多张上传

页面展示

<button type="primary" bindtap="clickBtn">上传文件</button>
  <image wx:for="{{urlArr}}" src="{{item}}"></image>

//全局变量
var urlArr= [];  //图片路径（多）
var filePath = [];


//方法
//上传
  clickBtn(){
    wx.chooseImage({
        success:res=>{
         //var filepath = res.tempFilePaths[0]  //上传的地址(单张)
         //this.cloudFile(filepath)
         filePath = res.tempFilePaths  //上传地址（多张）
         filePath.forEach((item,idx)=>{  //item代表每一项，idx代表索引值
          var filrName =  Date.now()+"_"+idx;  //图片名称
          this.cloudFile(item,filrName)
         })
        }
    })
  },
  //发送到云端
  cloudFile(path,filename){
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.cloud.uploadFile({   //wx.cloud就是云开发
      cloudPath:filename+".jpg",  //文件名称
      filePath:path   //文件路径
    }).then(res=>{
      urlArr.push(res.fileID)
      if(filePath.length ==urlArr.length ){
        this.setData({
          urlArr
        })
      }
      //单个图片
    //  this.setData({
    //    picurl:res.fileID
    //  })
     wx.hideLoading()
    })
  },