微信云开发
对云数据库的增删改查-填坑之旅
本次实操针对页面函数与数据库的对接,暂时与云函数无关
- 初始化云数据库
app.js中:
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
//当前云环境ID
env: "kurtery-00904xu",
//追踪用户行为
traceUser: true,
})
}
})
页面.js中:
//页面初始化云数据库,此页面可调用的凭证
wx.cloud.init();
const db = wx.cloud.database();
Page({
})
- 获取用户openID
//这里用到云函数"login"来获取openid
getOpenid() {
let that = this;
//调用云函数API
wx.cloud.callFunction({
//云函数名
name: 'login',
complete: res => {
console.log('云函数获取到的openid: ', res.result.openid)
//声明一个变量,将获取到的openid赋值给此变量
var openid = res.result.openid;
that.setData({
openid: openid
})
}
})
},
//可直接将获取openid函数在页面加载完成时调用
onLoad(){
this.getOpenid();
},
- 获取数据库数据:.get({})
const db = wx.cloud.database();
db.collection('classlist').get({
success: res => {
// res.data 是一个包含数据库中的所有数据的数组
this.setData({
//dates1是定义在页面data:{}中的一个空数组,目的就是存获取的所有数据
dates1: res.data,
})
// console.log(res.data)
},
fail: err => {
console.error(error);
}
})
- 增操作:.add({})
//给页面中的按钮一个insert事件
insert() {
db.collection('classlist').add({
// data 字段表示需新增的 JSON 数据,分别插入如下字段的数据
data: {
cnum: this.data.cnum1,
cname: this.data.cname1,
tname: this.data.tname1,
peroid: this.data.peroid1,
name: this.data.cnum1,
},
//如果成功则调用success: function(res){},这里采用箭头函数success: res =>{},这是的意思是用this.setData({}),将页面的所有数据全部重置
success: res => {
this.setData({
array: ['第一大节', '第二大节', '第三大节', '第四大节', '第五大节', '第六大节', '第七大节', '第八大节'],
index: 0,
btn_txt: "__",
cnum1: " ",
cname1: " ",
tname1: " ",
peroid1: " ",
name: 0,
})
//弹窗-成功提示
wx.showToast({
title: '插入成功',
})
},
//弹窗-失败提示
fail: err => {
wx.showModal({
title: '失败',
content: '网络不给力!',
})
},
})
},
- 跳转页面函数
//给页面中的按钮一个cancel事件
cancel(){
//调用API:wx.reLaunch(Object object),关闭所有页面,打开到应用内的某个页面
wx.reLaunch({
//url后面跟着的是所要跳转的页面路径
url: '../Mon/Mon',
fail: function () {
console.info("跳转失败")
}
})
//成功实现跳转动作后,将页面的所有数据全部重置
this.setData({
array: ['第一大节', '第二大节', '第三大节', '第四大节', '第五大节', '第六大节', '第七大节', '第八大节'],
index: 0,
btn_txt: "__",
cnum1: " ",
cname1: " ",
tname1: " ",
peroid1: " ",
name: 0,
})
},
- 给标签增加:data-id="{{item._id}}",item._id是由.get({})获取的数据中的_id,标明此标签的id
<view class='vi2' wx:for="{{dates1}}" wx:key="dates1" data-id='{{item._id}}'>
- 在页面.js中获取到该标签的id
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓此节中的代码与下一节代码为一体↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
getId(e){
//① 如果.wxml中用的是data-id,则在.js中用的是e.currentTarget.dataset.id来获取id
//② 如果.wxml中用的是id,则在.js中用e.currentTarget.id来获取id
let id = e.currentTarget.dataset.id;
- 删操作:.remove({})
const db = wx.cloud.database();
//因为将_id设置为集合的主键,所以根据doc("这条记录的_id")来删除这条记录
db.collection("classlist").doc(id).remove({
//成功则执行sucess:res =>{}函数
success: res => {
wx.showToast({
title: '删除成功',
})
this.onLoad()//删除成功重新加载
}, fail: err => {
wx.showToast({
title: '删除失败',
})
}
})
//console.log(id)
},
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑此节中的代码与上一节代码为一体↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
- 长按事件的实现
给组件添加3个事件:
①点击开始事件,记录用户点击该组件的开始时刻:
bindtouchstart = "touchstart"
②点击结束事件,记录用户点击结束,手指离开该组件的结束时刻:
bindtouchend = "touchend"
③长按触发事件,由(事件②-事件①)>某值,触发:
bindlongpress = "longpress"
<view bindtouchstart='touchstart' bindtouchend='touchend' bindlongpress='longpress'></view>
//事件① bindtouchstart = "touchstart"
//由于这里是bindtouchstart事件,这是原生点击开始事件,会记录点击时刻的timeStamp值,timeStamp是一个事件的属性,表示点击这一刻的时刻
touchstart(e){
this.startTime = e.timeStamp;
//console.log(e.timeStamp);
},
//事件② bindtouchend = "touchend"
//由于这里是bindtouchend事件,这是原生点击结束事件,会记录手指离开时刻的timeStamp值,timeStamp是一个事件的属性,表示离开这一刻的时刻
touchend(e){
this.endTime = e.timeStamp;
//console.log(e.timeStamp);
},
//事件③ bindlongpress = "longpress"
//由事件①-事件②,若值大于350ms,则触发“长按事件”
longpress(event) {
if (this.endTime - this.startTime > 350);
// console.log("长按");
let id = event.currentTarget.dataset.id;
//弹出提示窗口
wx.showModal({
title: '提示',
content: '确定要删除吗?',
success: function(e) {
if (e.confirm) {
// 用户点击了确定,可以调用删除方法了
const db = wx.cloud.database();
db.collection("classlist").doc(id).remove({
success: res => {
wx.showToast({
title: '删除成功',
})
this.onLoad() //删除成功重新加载
},
fail: err => {
wx.showToast({
title: '删除失败',
})
}
})
} else if (e.cancel) {
//用户点击了取消
console.log('用户点击取消')
}
}
})
},