CSDN Topic Challenge Phase 2
Participation Topic: Study Notes
This training project is based on the cloud database developed by the cloud to create a simple wishing wall.
01. Training content
This training project is based on the cloud database developed by the cloud to create a simple wishing wall. As the name suggests, the "cloud database" is to store all the wish data in this project in the cloud.
First, create a new collection "wishwall" in the cloud development console, and then add several records. Each record has three fields: title(string), date(string) and address(string), which represent the name of a wish, date and location. The cloud database design is shown in Figure 1. 
▍Figure 1 Cloud database design
This project includes a wishwall page, a wish add page and a wish details page.
1. wishwall page
Automatically load all the wishes in the cloud database and display them. When you click on a specific wish, you will enter the details page. At this time, you need to pass the wish id value to the details page; when you click the "Add Wish" area, you will enter the add page. . The execution effect is shown in Figure 2.
▍Figure 10.42 wishwall page
2. add page
Take the page title, date and address into and out of the cloud database "wishwall" as a new record, and the insertion successfully jumps back to the wishwall page. The execution effect is shown in Figure 3.
▍Figure 3 add page
3. details page
According to the id passed from the wishwall page, the title, date and address values of the record are queried and displayed. The execution effect is shown in Figure 4.
▍Figure 4 details page
02. Project code
The code of pages/ wishwall/ wishwall.wxml is as follows:
<view class="zong">
<view class="yang1" wx:for="{
{wishs}}"
id="{
{item._id}}" bindtap='details'>
{
{item.title}}
</view>
<view class="yang1" bindtap='add' >
增加愿望
</view>
</view>The code of pages/ wishwall/ wishwall.js is as follows:
const app = getApp()
Page({
data: {
wishs: []
},
onLoad: function (e) {
var that = this
const db = wx.cloud.database()
db.collection('wishwall').get({
success: function (res) {
console.log(res.data)
that.setData({
wishs: res.data
})
}
})
},
details:function(e){
console.log(e.target.id) //点击了那条愿望
wx.navigateTo({
url: "../details/details?id="+e.target.id
})
},
add:function(e){
wx.navigateTo({
url: '../add/add',
})
}
})The code for pages/ wishwall/ wishwall.wxss is as follows:
page {
display: flex; flex-direction: column;
justify-content: flex-start; background-color: #005F8C;
}
.zong{
display: flex; flex-direction:row;
flex-wrap: wrap; padding: 20rpx;
align-items: center; justify-content: space-around;
}
.yang1{
padding: 30rpx; background-color:#ffffff;
margin-top: 20rpx; border-radius:10rpx;
}
.yang2{
padding: 30rpx; background-color: #f1b0e6;
margin-top: 20rpx; border-radius:10rpx; width: 100rpx;
}[Code explanation] The onLoad() function of wishwall.js automatically executes the query operation on the cloud database, obtains all the wish data in the cloud database, and assigns it to "wishs", and then uses data binding in wishwall.wxml. Rendered display.
The code of pages/ add/ add.wxml is as follows:
<view>请输入您的愿望</view>
<view><input class='in' auto-focus bindinput="title"></input></view>
</view>
<view class='title'>
<view>时间</view>
<picker mode="date" value='{
{date}}' start="2019-08-01"
end="2020-08-08" bindchange='date'>
<view class='in'>{
{date}}</view>
</picker></view>
<view class='title'>
<view>地点</view>
<picker mode="region" bindchange="bindRegionChange"
value="{
{region}}" custom-item="{
{customItem}}">
<view class="in">
{
{region[0]}}，{
{region[1]}}，{
{region[2]}}
</view>
</picker></view>
<view class="title"></view>
<button type="primary" bindtap="add" > 插入愿望</button>The code of pages/ add/ add.js is as follows:
Page({
data: {
title:'',
region: ['广东省', '广州市', '海珠区'],
date: "2019-08-08",address:"广东省广州市海珠区"
},
title:function(e){
this.setData({
title: e.detail.value
})
},
date: function (e) {
console.log(e)
this.setData({
date:e.detail.value
})
},
bindRegionChange: function (e) {
console.log('携带值为', e.detail.value[0] +
e.detail.value[1] + e.detail.value[2])
this.setData({
region: e.detail.value,
address: e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
})
},
add:function(e){
var that=this;
const db = wx.cloud.database()
db.collection('wishwall').add({
data: {
title:that.data.title,
date: that.data.date,
address: that.data.address
},
success: function (res) {
console.log(res)
}
})
wx.navigateTo({
url: '../wishwall/wishwall',
})
}
})The code of pages/ add/ add.wxss is as follows:
.in{
border: 1px solid #ffffff;
}
.title{
margin-top: 20rpx; margin-bottom: 20rpx; color:#ffffff;
}
page{
background-color: #005F8C;
}[Code explanation] add.js obtains the data in add.wxml that the user fills in the form, and then performs the insertion operation to the cloud database. After the insertion is successful, it jumps back to the wishwall.wxml page.
The code of pages/details/details.wxml is as follows:
<view class="title">{
{item.title}}</view>
<view class='date'>{
{item.date}}</view>
<view class="address">{
{item.address}}</view>The code of pages/details/details.js is as follows:
Page({
data: {
item: {
title: "白云山看山",date: "2019-08-08",address: "广东省广州市白云区"}
},
onLoad: function (options) {
console.log("传过来的数据是")
console.log(options.id)
var id = options.id
var that=this;
const db = wx.cloud.database()
db.collection('wishwall').where({
_id:id
}).get({
success: function (res) {
console.log(res.data)
that.setData({
item: res.data[0]
})
}
})
}
})The code of pages/details/details.wxss is as follows:
.title{
margin-top: 100rpx;font-size: 2.5em; color: #ffffff; text-align:center;
}
page{
background-color: #005F8C;
}
.date{
margin-top: 50rpx; font-size: 1.5em; color: #ffffff; text-align:center;
}
.address{
margin-top: 30rpx; font-size: 1em; color: #ffffff; text-align:center;
}[Code explanation] The onLoad() function of detail.js queries the wish information clicked by the user in the cloud database according to the "id" value passed by wishwall.js, and assigns the obtained record value to "item", and then passes the data The binding method is rendered and displayed in detail.wxml.