小程序云开发汇总

开通云开发

• 首先在app.js中的onLaunch声明云开发初始环境

wx.cloud.init({
    env: '云开发环境初始id'
})

云数据库

• _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: '添加成功',
    })
  }
})

查看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>

单条查询

• 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>

条件查询

• 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>

删除

不管是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>

• 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: '更新成功',
    })
  })
}

排序

• 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
    })
  })
},

分页

• 如果要展示的数据过多，这个时候就需要分页了（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
    })
  })
},

根据多个字段模糊查询

• 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. project.config.js中做出配置

"description": "项目配置文件",
"cloudfunctionRoot": "cloud/",

新建云函数

• 右键新建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);
  }

使用云函数增删改查

增

// 云函数
// 往云数据库增加数据
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);
  })
},

删

// 云函数
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);
  })
}

云存储

上传图片

• 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
      })
    })
  })
}

更新头像

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);
  })
}

上传视频

• 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: '上传中...',
    })
  })
}

上传文件

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

• 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);
    })
  })
}