正文

微信小程序|基于云数据库的许愿墙(代码片段)

TiAmozhang  TiAmozhang  2022-10-23  138

关键词：

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

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中进行渲染显示。

基于云开发的微信小程序实战教程(代码片段)

基于云开发的微信小程序实战教程（二）上篇文章中，简单介绍了下小程序云开发的概念，还有开发工具的安装和配置，云开发环境已经搭建完毕。本章主要内容：微信开发者工具如何使用，小程序云... 查看详情

基于云开发的微信小程序实战教程(代码片段)

上篇文章中，简单介绍了下微信开发者工具是怎么去用的，还介绍了项目的基础目录结构，以及每个文件的作用，还配带了一些例子说明。最后还剩下cloudfunctions目录，也就是云开发的文件夹介绍。本章主要内... 查看详情

基于云开发的微信小程序实战教程(代码片段)

微信小程序notes｜常用开发事例基于云平台导出excel(代码片段)

历史文章回顾：微信小程序｜开发常用事例（一）微信小程序｜开发常用事例（二）微信小程序Notes｜开发常用事例（三）微信小程序Notes｜开发常用事例（四）一、前言最近一直... 查看详情

微信小程序-基于云开发cms+vantweapp电商demo来了！(代码片段)

...已经实现的本地页面效果图：由于每个用户只能拥有5个微信小程序，我个人原因只能在之前已经上线的一个小程序《黎族文化传承》中进行修改，也是由于这个小程序是个人类型小程序，我后来加的这些属于电商功能，个人小... 查看详情

基于云开发的微信小程序实战教程(代码片段)

微信小程序云开发（11）—“如何使用云函数”(代码片段)

如何使用云函数？我们通过使用云函数来连接数据库作为演示1.编写云函数1.在入口函数中编写数据库连接代码cloud.database().collection('goods').get()注意：我们之前直接在页面的js文件中请求数据库时的代码为前面有wx.&#x... 查看详情

微信小程序云开发—“实现云数据库数据的查询”(代码片段)

云数据库的查询一、在Page文件夹下创建一个新页面二、查询数据库（写onLoad函数）三、条件查询where()四、查询单条数据doc()一、在Page文件夹下创建一个新页面1.创建的新页面叫“database”2.编辑“database.js”，如下图&#... 查看详情

微信小程序云开发—“云数据库的增删改”(代码片段)

“云数据库的增删改”一、增加数据add()二、更新数据update()三、删除数据remove()注意：更新、删除数据必须使用doc('id')来确定操作哪一条数据一、增加数据add()1.先修改云数据库权限，这样才可通过代码增加数据到... 查看详情

微信小程序踩坑集录：云数据库与云函数(代码片段)

...这些坑记录下来，写成文章发送。今天讲讲微信的云数据库查看详情

微信小程序踩坑集录：云数据库与云函数(代码片段)

...这些坑记录下来，写成文章发送。今天讲讲微信的云数据库查看详情

微信小程序云开发———云数据库(代码片段)

...aunch()wx.cloud.init(env:'xxx'//xxx填写云开发环境id)) 3.云数据库在云开发中的数据库创建一个集合向云数据库中添加数据这里以st 查看详情

期末大作业——许愿墙(代码片段)

...代码项目展示首页访问地址http://localhost/WISH/index.php添加许愿编辑许愿密码默认是：szm删除许愿数据准备代码│index.php│php_wish.sql│save.php│├─common│function.php│init.php│├─css│style.css│├─js│common.js│jquery-1.12.4.min.js│... 查看详情

微信小程序云开发（13）—“云函数修改(update)/删除(remove)数据”(代码片段)

知识引入：云函数与云数据库进行对比↓因此，本地小程序直接调用数据库修改会有问题即只能修改自己创建的数据，别人创建的数据，就没有办法修改了。使用云函数即可解决这个问题。一、云函数修改数据1.... 查看详情

微信小程序云开发1-数据库(代码片段)

微信小程序云开发最重要的有两点：1、云数据库；2、云函数；学会这两点基本就能够进行微信小程序的云开发；首先，我们先看微信小程序云数据库的基本操作：1）打开微信开发者工具，创建一... 查看详情

正文

微信小程序|基于云数据库的许愿墙(代码片段)

01、实训内容

1. wishwall页面

2. add页面

3. details页面

02、项目代码

基于云开发的微信小程序实战教程(代码片段)

基于云开发的微信小程序实战教程(代码片段)

基于云开发的微信小程序实战教程(代码片段)

基于云开发的微信小程序实战教程(代码片段)

微信小程序notes｜常用开发事例基于云平台导出excel(代码片段)

微信小程序-基于云开发cms+vantweapp电商demo来了！(代码片段)

基于云开发的微信小程序实战教程(代码片段)

基于云开发的微信小程序实战教程(代码片段)

最新最全的云开发入门教程，微信小程序云开发，云函数，云数据库学习，微信小程序云开发扩展功能学习(代码片段)

微信小程序云开发（11）—“如何使用云函数”(代码片段)

微信小程序云开发—“实现云数据库数据的查询”(代码片段)

微信小程序云开发—“云数据库的增删改”(代码片段)

微信小程序踩坑集录：云数据库与云函数(代码片段)

微信小程序踩坑集录：云数据库与云函数(代码片段)

微信小程序云开发———云数据库(代码片段)

期末大作业——许愿墙(代码片段)

微信小程序云开发（13）—“云函数修改(update)/删除(remove)数据”(代码片段)

微信小程序云开发1-数据库(代码片段)