微信小程序 | 云数据库的许愿墙

 本实训项目以云开发的云数据库为基础，制作一个简易的许愿墙。

01、实训内容

本实训项目以云开发的云数据库为基础，制作一个简易的许愿墙，顾名思义“云数据库”就是把本项目中的愿望的数据全部存储在云端。

首先在云开发控制台新建一个集合“wishwall”，然后添加几条记录，每一条记录三个字段分别是：title(string)、date(string)和address(string)，分别表示一个愿望的名称、日期和地点。云数据库设计如图1所示。 

▍图1 云数据库设计

本项目包括一个愿望墙wishwall页面、增加愿望add页面和愿望详情details页面。

1. wishwall页面

自动加载云数据库中所有的愿望并显示出来，当点击某一条具体的愿望时，则进入details页面，此时需要传递愿望id值给details页面；当点击“增加愿望”区域时，则进入add页面。执行效果如图2所示。

▍图10.42 wishwall页面

2. add页面

把页面title、date和address出入云数据库“wishwall”作为一条新的记录，插入成功跳回wishwall页面。执行效果如图3所示。

 

▍图3  add页面

3. details页面

根据wishwall页面传递过来的id查询该条记录的title、date和address值并显示出来。执行效果如图4所示。

▍图4 details页面

02、项目代码

pages/ wishwall/ wishwall.wxml的代码如下:

1.  
   <view class="zong">
2.  
   <view class="yang1" wx:for="{{wishs}}"
3.  
   id="{{item._id}}" bindtap='details'>
4.  
   {{item.title}}
5.  
   </view>
6.  
   <view class="yang1" bindtap='add' >
7.  
   增加愿望
8.  
   </view>
9.  
   </view>

 pages/ wishwall/ wishwall.js的代码如下:

1.  
   const app = getApp()
2.  
   Page({
3.  
   data: {
4.  
   wishs: []
5.  
   },
6.  
   onLoad: function (e) {
7.  
   var that = this
8.  
   const db = wx.cloud.database()
9.  
   db.collection('wishwall').get({
10.  
    success: function (res) {
11.  
    console.log(res.data)
12.  
    that.setData({
13.  
    wishs: res.data
14.  
    })
15.  
    }
16.  
    })
17.  
    },
18.  
    details:function(e){
19.  
    console.log(e.target.id) //点击了那条愿望
20.  
    wx.navigateTo({
21.  
    url: "../details/details?id=" e.target.id
22.  
    })
23.  
    },
24.  
    add:function(e){
25.  
    wx.navigateTo({
26.  
    url: '../add/add',
27.  
    })
28.  
    }
29.  
    })

pages/ wishwall/ wishwall.wxss的代码如下:

1.  
   page {
2.  
   display: flex; flex-direction: column;
3.  
   justify-content: flex-start; background-color: #005F8C;
4.  
   }
5.  
   .zong{
6.  
   display: flex; flex-direction:row;
7.  
   flex-wrap: wrap; padding: 20rpx;
8.  
   align-items: center; justify-content: space-around;
9.  
   }
10.  
    .yang1{
11.  
    padding: 30rpx; background-color:#ffffff;
12.  
    margin-top: 20rpx; border-radius:10rpx;
13.  
    }
14.  
    .yang2{
15.  
    padding: 30rpx; background-color: #f1b0e6;
16.  
    margin-top: 20rpx; border-radius:10rpx; width: 100rpx;
17.  
    }

 【代码讲解】wishwall.js的onLoad()函数自动执行对云数据库的查询操作，获取到云数据库中所有的愿望数据，并赋值给“wishs”，然后通过数据绑定的方式在wishwall.wxml中进行渲染显示。

pages/ add/ add.wxml的代码如下:

1.  
   <view>请输入您的愿望</view>
2.  
   <view><input class='in' auto-focus bindinput="title"></input></view>
3.  
   </view>
4.  
   <view class='title'>
5.  
   <view>时间</view>
6.  
   <picker mode="date" value='{{date}}' start="2019-08-01"
7.  
   end="2020-08-08" bindchange='date'>
8.  
   <view class='in'>{{date}}</view>
9.  
   </picker></view>
10.  
    <view class='title'>
11.  
    <view>地点</view>
12.  
    <picker mode="region" bindchange="bindRegionChange"
13.  
    value="{{region}}" custom-item="{{customItem}}">
14.  
    <view class="in">
15.  
    {{region[0]}}，{{region[1]}}，{{region[2]}}
16.  
    </view>
17.  
    </picker></view>
18.  
    <view class="title"></view>
19.  
    <button type="primary" bindtap="add" > 插入愿望</button>

pages/ add/ add.js的代码如下:

1.  
   Page({
2.  
   data: {
3.  
   title:'',
4.  
   region: ['广东省', '广州市', '海珠区'],
5.  
   date: "2019-08-08",address:"广东省广州市海珠区"
6.  
   },
7.  
   title:function(e){
8.  
   this.setData({
9.  
   title: e.detail.value
10.  
    })
11.  
    },
12.  
    date: function (e) {
13.  
    console.log(e)
14.  
    this.setData({
15.  
    date:e.detail.value
16.  
    })
17.  
    },
18.  
    bindRegionChange: function (e) {
19.  
    console.log('携带值为', e.detail.value[0]
20.  
    e.detail.value[1] e.detail.value[2])
21.  
    this.setData({
22.  
    region: e.detail.value,
23.  
    address: e.detail.value[0] e.detail.value[1] e.detail.value[2]
24.  
    })
25.  
    },
26.  
    add:function(e){
27.  
    var that=this;
28.  
    const db = wx.cloud.database()
29.  
     
30.  
    db.collection('wishwall').add({
31.  
    data: {
32.  
    title:that.data.title,
33.  
    date: that.data.date,
34.  
    address: that.data.address
35.  
    },
36.  
    success: function (res) {
37.  
    console.log(res)
38.  
    }
39.  
    })
40.  
    wx.navigateTo({
41.  
    url: '../wishwall/wishwall',
42.  
    })
43.  
    }
44.  
    })

pages/ add/ add.wxss的代码如下:

1.  
   .in{
2.  
   border: 1px solid #ffffff;
3.  
   }
4.  
   .title{
5.  
   margin-top: 20rpx; margin-bottom: 20rpx; color:#ffffff;
6.  
   }
7.  
   page{
8.  
   background-color: #005F8C;
9.  
   }

 【代码讲解】add.js获取到add.wxml由用户填入表单的数据，然后执行对云数据库的插入操作，插入成功之后再跳转回wishwall.wxml页面。

pages/ details/ details.wxml的代码如下:

1.  
   <view class="title">{{item.title}}</view>
2.  
   <view class='date'>{{item.date}}</view>
3.  
   <view class="address">{{item.address}}</view>

 pages/ details/ details.js的代码如下:

1.  
   Page({
2.  
   data: {
3.  
   item: {
4.  
   title: "白云山看山",date: "2019-08-08",address: "广东省广州市白云区"}
5.  
   },
6.  
   onLoad: function (options) {
7.  
   console.log("传过来的数据是")
8.  
   console.log(options.id)
9.  
   var id = options.id
10.  
    var that=this;
11.  
    const db = wx.cloud.database()
12.  
    db.collection('wishwall').where({
13.  
    _id:id
14.  
    }).get({
15.  
    success: function (res) {
16.  
    console.log(res.data)
17.  
    that.setData({
18.  
    item: res.data[0]
19.  
    })
20.  
    }
21.  
    })
22.  
    }
23.  
    })

 pages/ details/ details.wxss的代码如下:

1.  
   .title{
2.  
   margin-top: 100rpx;font-size: 2.5em; color: #ffffff; text-align:center;
3.  
   }
4.  
   page{
5.  
   background-color: #005F8C;
6.  
   }
7.  
   .date{
8.  
   margin-top: 50rpx; font-size: 1.5em; color: #ffffff; text-align:center;
9.  
   }
10.  
    .address{
11.  
    margin-top: 30rpx; font-size: 1em; color: #ffffff; text-align:center;
12.  
    }

【代码讲解】detail.js的onLoad()函数根据wishwall.js传递过来的“id”值查询云数据库中被用户点击的那条愿望信息，获取到的记录值赋值给“item”，然后通过数据绑定的方式在detail.wxml中进行渲染显示。

这篇好文章是转载于：学新通技术网