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

2022-10-09 209

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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的代码如下:

<view class="zong">
        <view class="yang1" wx:for="{{wishs}}"  
id="{{item._id}}" bindtap='details'>
        {{item.title}}
        </view>
         <view class="yang1" bindtap='add' >
        增加愿望
        </view>
    </view>

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

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',
    })
  }
})

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

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;
}

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

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

<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>

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

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',
    })
  }
})

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

.in{
  border: 1px solid #ffffff;
}
.title{
  margin-top: 20rpx; margin-bottom: 20rpx; color:#ffffff;
}
page{
   background-color: #005F8C;
}

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

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

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

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

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]
        })
      }
    })
  }
})

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

.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;
}

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

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

01、实训内容

1. wishwall页面

2. add页面

3. details页面

02、项目代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景