微信小程序点歌台功能（云开发）

最新推荐文章于 2025-01-19 22:18:32 发布

Brother_Jian

最新推荐文章于 2025-01-19 22:18:32 发布

阅读量4.5k

点赞数 6

分类专栏：小程序 H5 数据库文章标签：小程序前端数据库

本文链接：https://blog.csdn.net/No1Brother_Jian/article/details/106517772

版权

数据库同时被 3 个专栏收录

7 篇文章

订阅专栏

4 篇文章

订阅专栏

小程序

1 篇文章

订阅专栏

本文介绍了一款小程序点歌系统的实现过程，包括前端界面设计、点歌功能开发、数据库操作及数据展示。系统允许用户输入点歌信息，数据被保存至云端数据库，后台可进行刷新和删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放几张效果图~~

在这里插入图片描述

我做的这个功能只限于点歌，然后后台的广播员收到点歌信息后播放歌曲，而不是那一种点了歌就会播放的小程序，其实主要的功能还是数据库的增删查改而已，没有太多深入的技术，下面我们来看看代码

先把主页面设计好

主页里面最重要的是点歌按钮、刷新和删除按钮以及srcoll-view

点歌按钮：

<button class="btn1" style="width:80%" bindtap="btn1">开始点歌</button>

//直接跳转到点歌页面
btn1:function(){
  wx.navigateTo({
    url: '../music/music',
  })
}

点歌页面

<!--pages/music/music.wxml-->
<view class="view1">
<image src="/images/yinyue.png" style="width:150rpx;height:150rpx"></image>
<text class="text1">点歌系统</text>
</view>
<view class="view1-1">
<view class="view2">
<text>歌曲名称：</text>
<input placeholder="请输入您要点的歌曲" class="input1" bindinput="musicName"></input>
</view>
<view class="view2">
<text>您的部门：</text>
<input placeholder="请输入您的部门" class="input1" bindinput="yourBm"></input>
</view>
<view class="view2">
<text>您的名字：</text>
<input placeholder="请输入您的名字" class="input1" bindinput="yourName"></input>
</view>
<view class="view2">
<text>为谁而点：</text>
<input placeholder="请输入他/她/它的名字" class="input1" bindinput="forWho"></input>
</view>
<view class="view2-1">
<text>备注留言：</text>
<textarea class="textarea1" bindinput="message"></textarea>
</view>
<text class="text1-1">温馨提示：请确保内容健康积极，否则不予通过噢</text>
<button class="btn1" style="width:80%" bindtap="btn1">提交点歌</button>
</view>

然后就用到数据库增加功能，把点歌数据增加到数据库里面

const db = wx.cloud.database();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    musicName:'',
    yourBm:'',
    yourName:'',
    forWho:'',
    message:'',
    time:'',
    done:'true'
  },
  musicName:function(e){
    console.log('歌曲名字',e.detail.value)
    this.setData({
      musicName:e.detail.value
    })
  },
  yourBm:function(e){
    console.log('点歌人部门',e.detail.value)
    this.setData({
      yourBm:e.detail.value
    })
  },
  yourName:function(e){
    console.log('点歌人姓名',e.detail.value)
    this.setData({
      yourName:e.detail.value
    })
  },
  forWho:function(e){
    console.log('为谁点歌',e.detail.value)
    this.setData({
      forWho:e.detail.value
    })
  },
  message:function(e){
    console.log('留言',e.detail.value)
    this.setData({
      message:e.detail.value
    })
  },
btn1:function(e){
  if(this.data.musicName == "" || this.data.yourBm == "" || this.data.yourName == "" || this.data.forWho == "" || this.data.message == ""){
    wx.showToast({
      title: '请把信息填写完整',
      icon: 'none',
      duration: 2000
    })
  }else{
    db.collection('music').add({
      data:{
        musicName:this.data.musicName,
        Bm:this.data.yourBm,
        Name:this.data.yourName,
        forWho:this.data.forWho,
        message:this.data.message,
        time:this.data.time,
        done:this.data.done
      }
     
    }).then(res => {
      console.log(res)
    })
    var url = '../work/work'
      wx.switchTab({
        url: url
      })
      wx.showToast({
        title: '提交成功',
        icon: 'none',
        duration: 2000
      })
  }
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取当前时间
    var timestamp = Date.parse(new Date());
    var date = new Date(timestamp);
    //获取年份  
    var Y = date.getFullYear();
    //获取月份  
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    //获取当日日期 
    var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
   // console.log("当前时间：" + Y + '年' + M + '月' + D + '日');
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    var time =  M + '-' + D + '-' + hour + ':' + minute + ':' + second
    this.setData({
      time:this.data.time.concat(time)
    })
  }

在这里插入图片描述
现在该把数据放到scroll-view里面去了

<scroll-view scroll-y style='height:{{scroll_height}}rpx;background-color: #ffffff;border: 1px solid #000;'>
 <block wx:for="{{alldata}}" wx:key="{{index}}">
      <view class="view3" index="{{index}}" catchtap="redictDetail" data-index="{{item._id}}">
          <view>
          点歌人：{{item.Name}}({{item.Bm}})
          </view>
          <view>
          歌曲名：{{item.musicName}}
          </view>
          <view>
          时间：{{item.time}}
          </view>
      </view>
      <view class="view"></view>
    </block>
</scroll-view>

data: {
    hiddenmodalput1: true,
    musicName:'',
    yourBm:'',
    yourName:'',
    forWho:'',
    message:'',
    time:'',
    alldata:[],
    hiddenName: true,
    scroll_height:0
  },
 onLoad: function (options) {
    let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
    this.setData({
      scroll_height: windowHeight * 600 / windowWidth - 70 - 30
    })

    if (app.globalData.userName1 == "管理员"){
      this.setData({
        hiddenName: !this.data.hiddenName
      })
    }
    const db = wx.cloud.database();
    db.collection('music').get({

      success: res => {
        for (var i = 0; i < res.data.length; ++i) {
          console.log(res.data[i])
          this.setData({
            musicName: this.data.musicName.concat(res.data[i].musicName),
            yourBm:this.data.yourBm.concat(res.data[i].Bm),
            yourName:this.data.yourName.concat(res.data[i].Name),
            forWho:this.data.forWho.concat(res.data[i].forWho),
            time:this.data.time.concat(res.data[i].time),
            alldata:this.data.alldata.concat(res.data[i])
          })
        }
        console.log(this.data.alldata)
      }
    })
  },

点歌数据就出现啦
在这里插入图片描述
现在就可以做刷新功能，页面是静态的，别人点歌后页面不会出现新的点歌数据，所以需要刷新页面
直接在刷新按钮上整个下图的点击事件就可以了

sx:function(){
   //清空订单列表数据
   this.setData({ currentPage: 1,musicName: [],yourBm:[],yourName:[],forWho:[],time:[],alldata:[]});
   //再次获取数据库数据展示在scroll-view上
   db.collection('music').get({
    success: res => {
      for (var i = 0; i < res.data.length; ++i) {
        console.log(res.data[i])
        this.setData({
          musicName: this.data.musicName.concat(res.data[i].musicName),
          yourBm:this.data.yourBm.concat(res.data[i].Bm),
          yourName:this.data.yourName.concat(res.data[i].Name),
          forWho:this.data.forWho.concat(res.data[i].forWho),
          time:this.data.time.concat(res.data[i].time),
          alldata:this.data.alldata.concat(res.data[i])
        })
      }
      console.log(this.data.alldata)
    }
  })
  },

删除功能，一个一个删除我嫌麻烦，我直接全部删除了哈哈
全部删除需要用上云函数，我们新建一个云函数，敲入代码

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  try {
    return await db.collection('music').where({
      done: event.a
    }).remove()
  } catch(e) {
    console.error(e)
  }
}

云函数记得部署上传，不然不会生效
然后调用云函数（在删除按钮整上下面的点击事件就好了）

del: function () {
    wx.cloud.callFunction({
      name:'Ysql',
      data:{
        a:"true"
      }
    })
    this.setData({
      currentPage: 1,musicName: [],yourBm:[],yourName:[],forWho:[],time:[],alldata:[]
    })

这里全部删除的逻辑是这样的，我在点歌的每条数据里默认添加了一个字段“done:true”
在这里插入图片描述
云函数里就写删除所有done:true的数据，也就是全部删除了

最后一步，点击歌曲信息查看详细
在scroll-view上，点击一个view就进去对应的详细页面，我们要给这个view添加点击事件redictDetail

<scroll-view scroll-y style='height:{{scroll_height}}rpx;background-color: #ffffff;border: 1px solid #000;'>
 <block wx:for="{{alldata}}" wx:key="{{index}}">
      <view class="view3" index="{{index}}" catchtap="redictDetail" data-index="{{item._id}}">
          <view>
          点歌人：{{item.Name}}({{item.Bm}})
          </view>
          <view>
          歌曲名：{{item.musicName}}
          </view>
          <view>
          时间：{{item.time}}
          </view>
      </view>
      <view class="view"></view>
    </block>
</scroll-view>

redictDetail: function (e) {
      console.log('我要看详情', e.currentTarget);
      var id = e.currentTarget.dataset.index
      var url = '../dm/dm?id=' + id;
      wx.navigateTo({
        url: url
      })
  },

然后就可以进去详细页了，详细页里我们要获取对应数据的id才能获取到该数据的其他数据信息
所以我们在详细页面里获取刚刚url所携带过来的id’…/dm/dm?id=’ + id;

onLoad: function (options) {
    db.collection('music').doc(options.id).get({
      success: res => {
        // res.data 包含该记录的数据
        // console.log(res.data)
        this.setData({
          rdb: res.data,
        })
      }
    })
  },

然后在详细页面直接显示

<!--pages/dm/dm.wxml-->
<view class="container">
<view class="view1"></view>
歌曲名：{{rdb.musicName}}
<view class="view1"></view>
点歌人：{{rdb.Name}}({{rdb.Bm}})
<view class="view1"></view>
这首歌是为“{{rdb.forWho}}”而点
<view class="view1"></view>
他/她的留言：
<view class="view1"></view>
{{rdb.message}}
<view class="view1"></view>
{{rdb.time}}
</view>