CSDN話題挑戰(zhàn)賽第2期
參賽話題：學習筆記

?本實訓項目以云開發(fā)的云數(shù)據(jù)庫為基礎(chǔ)，制作一個簡易的許愿墻。

01、實訓內(nèi)容

本實訓項目以云開發(fā)的云數(shù)據(jù)庫為基礎(chǔ)，制作一個簡易的許愿墻，顧名思義“云數(shù)據(jù)庫”就是把本項目中的愿望的數(shù)據(jù)全部存儲在云端。

首先在云開發(fā)控制臺新建一個集合“wishwall”，然后添加幾條記錄，每一條記錄三個字段分別是：title(string)、date(string)和address(string)，分別表示一個愿望的名稱、日期和地點。云數(shù)據(jù)庫設(shè)計如圖1所示。?

▍圖1?云數(shù)據(jù)庫設(shè)計

本項目包括一個愿望墻wishwall頁面、增加愿望add頁面和愿望詳情details頁面。

1.?wishwall頁面

自動加載云數(shù)據(jù)庫中所有的愿望并顯示出來，當點擊某一條具體的愿望時，則進入details頁面，此時需要傳遞愿望id值給details頁面；當點擊“增加愿望”區(qū)域時，則進入add頁面。執(zhí)行效果如圖2所示。

▍圖10.42?wishwall頁面

2.?add頁面

把頁面title、date和address出入云數(shù)據(jù)庫“wishwall”作為一條新的記錄，插入成功跳回wishwall頁面。執(zhí)行效果如圖3所示。

?

▍圖3??add頁面

3.?details頁面

根據(jù)wishwall頁面?zhèn)鬟f過來的id查詢該條記錄的title、date和address值并顯示出來。執(zhí)行效果如圖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()函數(shù)自動執(zhí)行對云數(shù)據(jù)庫的查詢操作，獲取到云數(shù)據(jù)庫中所有的愿望數(shù)據(jù)，并賦值給“wishs”，然后通過數(shù)據(jù)綁定的方式在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: ['廣東省', '廣州市', '海珠區(qū)'],
date: "2019-08-08",address:"廣東省廣州市海珠區(qū)"
  },
  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由用戶填入表單的數(shù)據(jù)，然后執(zhí)行對云數(shù)據(jù)庫的插入操作，插入成功之后再跳轉(zhuǎn)回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: "廣東省廣州市白云區(qū)"}
  },
  onLoad: function (options) {
    console.log("傳過來的數(shù)據(jù)是")
    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()函數(shù)根據(jù)wishwall.js傳遞過來的“id”值查詢云數(shù)據(jù)庫中被用戶點擊的那條愿望信息，獲取到的記錄值賦值給“item”，然后通過數(shù)據(jù)綁定的方式在detail.wxml中進行渲染顯示。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-782202.html

?

到了這里，關(guān)于微信小程序 | 基于云數(shù)據(jù)庫的許愿墻的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！