开通云开发
- 首先在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
})
})
},
云函数
- 用于实现比较复杂的一些功能
初始化云函数
- 单独创建个文件夹
- 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);
})
})
}
原文链接：https://blog.csdn.net/qq_52845451/article/details/126934212
此处评论已关闭