微信云开发
对云数据库的增删改查-填坑之旅
本次实操针对页面函数与数据库的对接，暂时与云函数无关
- 初始化云数据库
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('用户点击取消')
}
}
})
},