• 小程序云开发汇总

    开通云开发

    • 首先在app.js中的onLaunch声明云开发初始环境
    wx.cloud.init({
    env: '云开发环境初始id'
})

    • 1
    • 2
    • 3

    云数据库

    • _openid 表示每个小程序中唯一的id
    增add
    • wx.cloud.database().collection(‘数据库表名’).add({…})
    // 添加一条数据库记录
wx.cloud.database().collection('yun-users').add({
  data: {
    name: '辉辉',
    age: 24,
    sex: '男',
    num: '100'
  },
  success(res) {
    console.log(res);
    // 提示信息
    wx.showToast({
      title: '添加成功',
    })
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    查看get
    查看全部
    • wx.cloud.database().collection(‘数据库表名’).get().then(…)
    js
// 写法1
getAllData() {
  wx.cloud.database().collection('yun-users').get({
    success:(res)=> {
      console.log(res);
      this.setData({
        dataList: res.data
      })
    }
  })
}
// 写法2  ES6写法  推荐这种
getAllData() {
  wx.cloud.database().collection('yun-users').get()
  .then(res=>{
    console.log(res);
    this.setData({
      dataList: res.data
    })
  })
}


wxml
<block wx:for="{{dataList}}" wx:key="id">
  <view>{{item.name}}---{{item.sex}}</view>
</block>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    单条查询
    • wx.cloud.database().collection(‘数据库表名’).doc(‘条件’).get().then(…)
    • 必须在单个上面添加 data-id=“{{item._id}}” 属性 携带参数
    • e.target.dataset.id 获取唯一的id
    • onLoad 生命周期的options获取到的是传递过来的参数的大对象
    数据发送方
wxml
<block wx:for="{{dataList}}" wx:key="id">
  <view bindtap="toDetail" data-id="{{item._id}}">{{item.name}}---{{item.sex}}</view>
</block>
js
toDetail(e) {
  // console.log(e);
  // console.log(e.target.dataset.id);
  // 跳转详情页面并携带参数
  wx.navigateTo({
    url: '/pages/detail/detail?id=' + e.target.dataset.id,
  })
}


数据接收方  onLoad   options接收过来的参数
js
wx.cloud.database().collection('yun-users').doc(options.id).get()
.then(res=>{
  console.log(res);
  this.setData({
    user: res.data
  })
})
wxml
<view>{{user.name}} --- {{user.age}}</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    条件查询
    • wx.cloud.database().collection(‘yun-users’).where(…).get(…).then(…)
    js
// 获取input中的value
getIptVal(e) {
  // console.log(e);
  // console.log(e.detail.value);
  this.setData({
    iptVal: e.detail.value
  })
},

showUser() {
  wx.cloud.database().collection('yun-users').where({
    name: this.data.iptVal,
    age: 24
  }).get()
  .then(res=>{
    // console.log(res);
    console.log(res.data);
    this.setData({
      personList: res.data
    })
  })
}

wxml
<input type="text" bindinput="getIptVal" placeholder="请输入关键字"/>
<button type="primary" bindtap="showUser">搜索</button>

<block wx:for="{{personList}}" wx:key="id">
  <view>{{item.name}} --- {{item.age}}</view>
</block>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    删除

    不管是doc还是where删除，都是删除一条

    • wx.cloud.database().collection(‘数据库名’).doc(‘条件判断’).remove().then(…)
    • 这里是根据 id 删除
    js
delete(e) {
  // console.log(e);
  // console.log(e.currentTarget.dataset.id);
  // console.log(e.target.dataset.id);
  let id = e.currentTarget.dataset.id
  wx.cloud.database().collection('yun-users').doc(id).remove()
  .then(res=>{
    // console.log(res);
    wx.showToast({
      title: '删除成功',
    })
  })
}

wxml
<block wx:for="{{userList}}" wx:key="id">
  <view bindtap="toDetail" data-id="{{item._id}}">{{item.name}} --- {{item.age}}--<text catchtap="delete" data-id="{{item._id}}">删除</text></view>
</block>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • wx.cloud.database().collection(‘数据库名’).where(‘条件判断’).remove().then(…)
    • 这里是根据条件删除
    更新
    • wx.cloud.database().collection(‘数据库名’).update()
    wxml
<view>{{usersList.name}} --- {{usersList.age}}</view>
<input bindinput="getIptVal" class="ipt" type="text" placeholder="请输入名字"/>
<button bindtap="updateName" type="primary">更新名字数据</button>

js
// 获取输入框内容
getIptVal(e) {
  // console.log(e);
  // console.log(e.detail.value);
  
  this.setData({
    iptValue: e.detail.value
  })
},
// 更新数据
updateName() {
  // 根据 _id 指定需要修改的那条数据
  wx.cloud.database().collection('demo_01').doc(this.data.usersList._id)
  .update({
    // 把输入框中最新的值绑定到name上
    name: this.data.iptValue
  })
  .then(res=>{
    console.log(res);
    // 再把最新的数据渲染到显示上
    wx.cloud.database().collection('demo_01').doc(options.id).get()
    .then(res=>{
      // console.log(res);
      // console.log(res.data);
      this.setData({
        usersList: res.data
      })
    })
    wx.showToast({
      title: '更新成功',
    })
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    排序
    • wx.cloud.database().collection(‘数据库名’).orderBy(‘根据那个字段排序’,‘升序/降序’).get().then(…)
    • 降序是 desc 升序是 asc
    • 如果有多个排序规则，则再加一个orderBy
    wxml
<button bindtap="show" type="primary">显示数据</button>

<block wx:for="{{users}}" wx:key="id">
  <view catchtap="toDetial" data-id="{{item._id}}">{{item.name}}---{{item.sex}}---{{item.age}}</view>
</block>

js
// 显示并按照年龄排序
show() {
  wx.cloud.database().collection('demo_01').orderBy('age','asc').orderBy('num','asc').get()
  .then(res=>{
    // console.log(res);
    this.setData({
      users: res.data
    })
  })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    分页

    • 如果要展示的数据过多，这个时候就需要分页了（skip，limit）

    • 官方限制最多可查看20条记录

    模糊查询
    根据单个字段模糊查询
    • wx.cloud.database().collection(‘数据库名’).where({ 条件：wx.cloud.database().RegExp({条件判断}) }).get().then(…)
    • RegExp有两个参数：regexp指定模糊匹配的值，options：’i‘ 意思为不大小写
    wxml
<input class="ipt" bindinput="getVal" type="text" placeholder="请搜索"/>
<button bindtap="search" type="primary">点击搜索</button>
<block wx:for="{{usersList}}" wx:key="id">
  <view>{{item.name}}--{{item.age}}</view>
</block>

js
// 得到输入框的值
getVal(e) {
  // console.log(e.detail.value);
  this.setData({
    iptVal: e.detail.value
  })
},
// 根据单条记录模糊查询
search() {
  // name: this.data.iptVal,
  wx.cloud.database().collection('demo_01').where({
    name: wx.cloud.database().RegExp({
      regexp: this.data.iptVal,
      options: 'i' // 不区分大小写
    })
  }).get()
  .then(res=>{
    // console.log(res.data);
    this.setData({
      usersList: res.data
    })
  })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    根据多个字段模糊查询

    • wx.cloud.database().collection(‘数据库名’).where({ 条件：wx.cloud.database().command.or/and([{条件},{条件}]) }).get().then(…)

    • and 和 or

    wxml
<input class="ipt" bindinput="getVal" type="text" placeholder="请搜索"/>
<button bindtap="search" type="primary">点击搜索</button>
<block wx:for="{{usersList}}" wx:key="id">
  <view>{{item.name}}--{{item.age}}</view>
</block>

js
// 得到输入框的值
getVal(e) {
  // console.log(e.detail.value);
  this.setData({
    iptVal: e.detail.value
  })
},
// 根据多条记录模糊查询
search() {
  wx.cloud.database().collection('demo_01').where(wx.cloud.database().command.or([
    {
      name: wx.cloud.database().RegExp({
        regexp: this.data.iptVal,
        options: 'i' // 不区分大小写
      })
    },
    {
      desc: wx.cloud.database().RegExp({
        regexp: this.data.iptVal,
        options: 'i' // 不区分大小写
      })
    }
  ])).get()
  .then(res=>{
    // console.log(res.data);
    this.setData({
      usersList: res.data
    })
  })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    云函数

    • 用于实现比较复杂的一些功能
    初始化云函数
    1. 单独创建个文件夹
    2. project.config.js中做出配置
    "description": "项目配置文件",
"cloudfunctionRoot": "cloud/",

    • 1
    • 2
    新建云函数
    • 右键新建node.js云函数
    使用云函数
    • 如果没有部署，右键第三个选择上传并部署云端安装依赖
    • wx.cloud.callFunction({name:‘云函数名’}).then(…)
    app.js   书写一个获取openid的方法
wx.cloud.init({
  env: 'cloud1-6g265vz620ba87df'
})
// 获取用户的openid
wx.cloud.callFunction({
  name: 'getUserOpenid'
}).then(res=>{
  // console.log(res);
  // console.log(res.result.openid);
  this.globalData.openid = res.result.openid
})
globalData: {
  userInfo: null,
  openid: null
}

// 页面使用
<button bindtap="getUserOpenid" type="primary">获取用户openid</button>

  // 获得用户openid
  getUserOpenid() {
    console.log(app.globalData.openid);
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    使用云函数增删改查
    增
    // 云函数
// 往云数据库增加数据
return cloud.database().collection('demo_01').add({
  data: {
    name: event.name
  }
})

wxml
<input class="ipt" bindinput="getIptVal" type="text" placeholder="请输入您想添加的名字"/>
<button bindtap="add" type="primary">添加数据</button>
js
// 获取输入框中的内容
getIptVal(e) {
  // console.log(e.detail.value);
  this.setData({
    iptVal: e.detail.value
  })
},

add() {
  wx.cloud.callFunction({
    name: 'addData',
    data: {
      name: this.data.iptVal
    }
  }).then(res=>{
    console.log(res);
  })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    删
    // 云函数
return cloud.database().collection('demo_01').doc(event.id).remove()

wxml
<button type="primary" bindtap="delect">删除用户</button>
js
delect() {
  wx.cloud.callFunction({
    data: {
      name: 'removeData',
      data: {
        id: '54ad1eea6225c88014c3989b67af1afe'
      }
    }
  }).then(res=>{
    console.log(res);
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    云存储

    上传图片

    • wx.chooseImage({count: 限制几张…}).then(…)

      • count: 限制几张
      • sizeType: [‘original’,‘compressed’], // 所选的图片的尺寸，原图/压缩图
      • sourceType: [‘album’,‘camera’], // 选择图片的来源，从相册选图/使用相机

    • wx.cloud.uploadFile

      • cloudPath: 文件名, // 上传至云端的路径
      • filePath: 路径 // 小程临时文件路径
    wxml
<button type="primary" bindtap="upload">上传图片</button>
<image src="{{imgUrl}}"></image>
<image src="{{yunImgId}}"></image>

js
upload() {
  // 首先选择图片
  wx.chooseImage({
    count: 1,
    sizeType: ['compressed'], // 所选的图片的尺寸，原图/压缩图
    sourceType: ['album'], // 选择图片的来源，从相册选图/使用相机
  }).then(res=>{
    // console.log(res);
    // console.log(res.tempFilePaths[0]);
    this.setData({
      imgUrl: res.tempFilePaths[0]
    })
    // 然后上传文件
    let random = Math.random()
    // console.log(random);
    let time = Date.now()
    // console.log(time);
    wx.cloud.uploadFile({
      cloudPath: `users/${random}-${time}-user.png`, // 上传至云端的路径
      filePath: res.tempFilePaths[0]   // 小程临时文件路径
    }).then(result=>{
      console.log(result);
      this.setData({
        yunImgId: result.fileID
      })
    })
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    更新头像
    wxml
<button bindtap="uploadUserHeader" type="primary">更新头像</button>
<view class="img">
  <image src="{{imgUrl}}"></image>
</view>

js
// 更新用户头像
uploadUserHeader() {
  // 让用户选择图片
  wx.chooseImage({
    count: 1,
  }).then(res=>{
    // console.log(res.tempFilePaths[0]);
    // this.setData({
    //   imgUrl: res.tempFilePaths[0]
    // })
    // 然后上传头像
    let random = Math.random()
    let time = Date.now()
    wx.cloud.uploadFile({
      cloudPath: `users/${random}-${time}-user.png`,
      filePath: res.tempFilePaths[0]
    }).then(res=>{
      // console.log(res);
      // console.log(res.fileID);
      this.setData({
        imgUrl: res.fileID
      })
    })

    // 把头像穿插到对应的数据库中
    // console.log(this.data.usersList._id);
    wx.cloud.database().collection('demo_02').doc(this.data.usersList._id).update({
      data: {
        userHeader: this.data.imgUrl
      }
    })

    wx.showToast({
      title: '上传成功',
    })
    // console.log(this.data.usersList);
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    上传视频

    • wx.chooseVideo({…}) 选择上传的视频

      • camera: camera, // 默认拉起的是前置或者后置摄像头 back：后置 front：前置
      • sourceType: [‘album’,‘camera’], // 是否压缩所选择的视频文件
      • maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒

    • wx.cloud.uploadFile

      • cloudPath: 文件名, // 上传至云端的路径
      • filePath: 路径 // 小程临时文件路径
    wxml
<button bindtap="uploadVideo" type="primary">上传视频</button>
<video wx:if="{{VideoPath ? true:false}}" src="{{VideoPath}}"></video>

js
// 上传视频
uploadVideo() {
  // 选择视频
  wx.chooseVideo({
    camera: 'back', // 默认拉起的是前置或者后置摄像头 back：后置  front：前置
    sourceType: ['album','camera'], // 是否压缩所选择的视频文件
    maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒
  }).then(res=>{
    // 获取到了上传成功后本地的地址
    // console.log(res.tempFilePath);
    // this.setData({
    //   VideoPath: res.tempFilePath
    // })
    // 上传视频
    let random = Math.random()
    let time = Date.now()
    wx.cloud.uploadFile({
      cloudPath: `video/${random}-${time}-file.mp4`,  // 上传至云端的路径
      filePath: res.tempFilePath   // 小程临时文件路径
    }).then(res=>{
      // 获取云端的视频路径fileID
      // console.log(res.fileID);
      this.setData({
        VideoPath: res.fileID
      })
      // 提示上传成功
      wx.showToast({
        title: '上传成功',
      })
    })
    wx.showLoading({
      title: '上传中...',
    })
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    上传文件

    • 选择文件：从客户端会话（微信好友，群，文件助手）选择文件

    • wx.chooseMessageFile({…})

      • count：文件最多选择多少个
      • type：文件类型
        • all 从所有文件选择
        • video 只能选择视频文件
        • image 只能选择图片文件
        • file 可以选择除了图片和视频之外的其他的文件 如word，excel，pdf…

    • wx.cloud.uploadFile

      • cloudPath: 文件名, // 上传至云端的路径
      • filePath: 路径 // 小程临时文件路径
    下载文件
    • wx.cloud.downloadFile({})
    wxml
<button type="primary" bindtap="uploadFile">上传文件</button>
<block wx:for="{{fileList}}" wx:key="id">
  <view class="down">
    <view>{{item.fileName}}</view>
    <view bindtap="downFile" data-url="{{item.fileId}}">下载</view>
  </view>
</block>

js
onLoad: function (options) {
  this.getFileList()
},

getFileList() {
  // 查找到id
  wx.cloud.database().collection('yun-file').get()
  .then(res=>{
    // console.log(res.data);
    this.setData({
      fileList: res.data
    })
  })
},

uploadFile() {
  // 选择文件
  wx.chooseMessageFile({
    count: 10,  // 选择文件的个数
    type: 'all', // 选择文件的类型
  }).then(res=>{
    // console.log(res.tempFiles[0].path);
    // 上传文件到云存储
    wx.cloud.uploadFile({
      cloudPath: res.tempFiles[0].name,
      filePath: res.tempFiles[0].path
    }).then(result=>{
      // console.log(result.fileID);
      // 保存fileId到数据库
      wx.cloud.database().collection('yun-file').add({
        data: {
          fileName: res.tempFiles[0].name,
          fileId: result.fileID
        }
      }).then(aaa=>{
        // console.log(aaa);
        wx.showToast({
          title: '上传成功',
        })
        // 重新渲染页面
        this.getFileList()
      })
    })
  })
},
// 下载文件
downFile(e) {
  // console.log(e.currentTarget.dataset.url);
  wx.cloud.downloadFile({
    fileID: e.currentTarget.dataset.url
  }).then(res=>{
    // 下载到本地的路径
    // console.log(res.tempFilePath);
    // 直接打开本地文件
    wx.openDocument({
      filePath: res.tempFilePath,
    }).then(result=>{
      console.log(result);
    })
  })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
  • 相关阅读:
    Windows11微软edge下载文件时无法下载-没有权限
    ceph块存储在线扩容
    视频制作不求人：批量添加滚动字幕的详细教程
    c语言实现数据结构中的单向链表
    自然语言处理NLP：LTP、SnowNLP、HanLP 常用NLP工具和库对比
    CW023A-H035 CW023A-R230铜合金硬度材质书
    数据治理项目成功的要点，企业培养数据要把握好关键环节
    java计算机毕业设计医院出入院管理系统源码+系统+mysql数据库+lw文档
    【leetcode】【2022/9/6】828. 统计子串中的唯一字符
    MQTT协议
  • 原文地址：https://blog.csdn.net/qq_52845451/article/details/126934212