npm 安装 vant-weapp
添加编译模式
在这里插入图片描述
1 添加数据
addToDo.wxml
<form bindsubmit="onSubmit">
<input name="title"></input>
<button form-type="submit">提交</button>
</form>
addToDo.js
//初始化数据库
const db = wx.cloud.database();
//创建实例
const todos = db.collection('todos');
Page({
onSubmit:function(event){
console.log(event.detail.value.title)
//新增数据
todos.add({
data:{
title:event.detail.value.title
}
}).then(res=>{
console.log(res)
//展示toast
wx.showToast({
title: 'Success',
icon: 'success'
})
})
}
})
2 查看所有数据
index.wxml
<van-cell-group>
<!-- 列表项 -->
<block wx:for="{{tasks}}">
<van-cell title="{{item.title}}"/>
</block>
</van-cell-group>
index.js
const db = wx.cloud.database();
const todos = db.collection('todos');
Page({
/**
* 页面的初始数据
*/
data: {
//若task为null则无concat方法，报错：Cannot read property 'concat' of null
tasks:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData();
},
onReady: function () {
},
onShow: function () {
},
//触底事件
onReachBottom:function(){
this.getData();
},
//下拉刷新事件对应"enablePullDownRefresh":true
onPullDownRefresh:function(){
this.getData(res=>{
//保证数据更新完时 停止刷新
wx.stopPullDownRefresh();
//下拉刷新后回到第一条数据
this.pageData.skip = 0;
});
},
//获取数据
getData:function(callback){
//callback不存在，自动赋值
if(!callback){
callback=res=>{}
}
wx.showLoading({
title: '数据加载中',
})
todos.skip(this.pageData.skip).get().then(res => {
let oldData = this.data.tasks;
this.setData({
//前面数据与跳转后获得的数据进行拼接
tasks: oldData.concat(res.data)
},res=>{
//跳转到第20条数据后
this.pageData.skip=this.pageData.skip+20
wx.hideLoading()
//执行匿名函数
callback();
})
})
},
//跳页
pageData:{
skip:0
}
})
index.json
{
"enablePullDownRefresh":true
}
3 查看对应数据详情
wxml
<van-cell-group>
<!-- border=false去除下划线 -->
<van-cell title="{{task.title}}" border="{{false}}" value="{{task.status==='in-progress'?'进行中':'已完成'}}"/>
</van-cell-group>
js
const db = wx.cloud.database()
const todos = db.collection('todos')
Page({
data: {
task:{}
},
//存放数据
pageData:{},
onLoad: function (options) {
this.pageData.id = options.id
//获取数据
todos.doc(options.id).get().then(res=>{
this.setData({
//将结果赋值给data
task:res.data
})
})
},
onReady: function () {
}
})
4 添加图片及改动页面
addToDo.wxml
<form bindsubmit="onSubmit">
<input name="title"></input>
<block wx:if="{{image}}">
<image src="{{image}}"></image>
</block>
<button bindtap="selectImage">选择图片</button>
<button form-type="submit">提交</button>
</form>
addToDo.js
//初始化数据库
const db = wx.cloud.database();
//创建实例
const todos = db.collection('todos');
Page({
data:{
image:null
},
//上传图片
selectImage:function(e){
wx.chooseImage({
//不使用function(res..)，避免this被覆盖
success: res=> {
console.log(res.tempFilePaths[0])
wx.cloud.uploadFile({
//云端路径 保证每次名字不同 `为反引号
cloudPath:`${Math.floor(Math.random()*10000000)}.png`,
//上传文件路径
filePath: res.tempFilePaths[0]
}).then(res=>{
console.log(res.fileID)
//数据保存到image
this.setData({
image:res.fileID
})
}).catch(err=>{
console.error(err)
})
},
})
},
onSubmit:function(event){
console.log(event.detail.value.title)
//新增数据
todos.add({
data:{
title:event.detail.value.title,
image:this.data.image
}
}).then(res=>{
console.log(res._id)
//展示toast
wx.showToast({
title: '添加成功',
icon: 'success',
//成功后跳转到详情页
success:res2=>{
wx.redirectTo({
//反引号
url:`../todoInfo/todoInfo?id=${res._id}`,
})
}
})
})
}
})
todoInfo.wxml
<van-cell-group>
<!-- border=false去除下划线 -->
<van-cell title="{{task.title}}" border="{{false}}" value="{{task.status==='in-progress'?'进行中':'已完成'}}"/>
</van-cell-group>
<image wx:if="{{task.image}}" src="{{task.image}}"></image>
index.wxml
<!-- 跳转到添加页面 -->
<view class='plusBtn'>
<navigator url="../addToDo/addToDo">
<van-icon class=".plusIcon" name="plus" />
</navigator>
</view>
<van-cell-group>
<!-- 列表项 -->
<block wx:for="{{tasks}}">
<!-- 点击跳转到todoInfo -->
<navigator url='../todoInfo/todoInfo?id={{item._id}}'>
<van-cell title="{{item.title}}" />
</navigator>
</block>
</van-cell-group>
index.wxss
.plusBtn{
position: fixed;
z-index: 100;
bottom:150rpx;
right:375rpx;
background-color:#ff0;
border-radius: 100rpx;
width:80rpx;
height:80rpx;
line-height:100rpx;
}
.plusIcon{
font-size:80rpx;
}
app.json
{
"pages": [
"pages/index/index",
"pages/addToDo/addToDo",
"pages/todoInfo/todoInfo"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云待办",
"navigationBarTextStyle": "black"
},
"usingComponents": {
"van-button": "vant-weapp/button",
"van-cell": "vant-weapp/cell/index",
"van-cell-group": "vant-weapp/cell-group/index",
"van-icon": "vant-weapp/icon/index"
}
}
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
领取限量云产品优惠
网友评论