CSDN トピック チャレンジ フェーズ 2
参加トピック:調査ノート
このトレーニング プロジェクトは、クラウドによって開発されたクラウド データベースに基づいて、単純な願いの壁を作成します。
01.研修内容
このトレーニングプロジェクトは、クラウドが開発したクラウドデータベースを元に、シンプルな願いの壁を作成します.「クラウドデータベース」は、名前が示すように、このプロジェクトのすべての願いデータをクラウドに保存することです.
まず、クラウド開発コンソールで新しいコレクション "wishwall" を作成し、いくつかのレコードを追加します. 各レコードには、タイトル (文字列)、日付 (文字列)、住所 (文字列) の 3 つのフィールドがあり、ウィッシュの名前を表します。日付と場所。クラウド データベースの設計を図 1 に示します。 
▍図1 クラウドデータベースの設計
このプロジェクトには、ウィッシュウォール ページ、ウィッシュ追加ページ、ウィッシュ詳細ページが含まれます。
1. ウィッシュウォールページ
すべてのウィッシュをクラウド データベースに自動的にロードして表示します。特定のウィッシュをクリックすると、詳細ページに入ります。このとき、ウィッシュ ID の値を詳細ページに渡す必要があります。「ウィッシュを追加」エリアで、追加ページに入ります。 . 実行効果を図 2 に示します。
▍図 10.42 ウィッシュウォール ページ
2. ページを追加
ページのタイトル、日付、アドレスをクラウド データベース「wishwall」に新しいレコードとして出し入れすると、挿入が成功し、wishwall ページに戻ります。実行効果を図 3 に示します。
▍図3 追加ページ
3. 詳細ページ
ウィッシュウォール ページから渡された ID に従って、レコードのタイトル、日付、住所の値がクエリされ、表示されます。実行効果を図 4 に示します。
▍図4 詳細ページ
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 に表示されます。