（毕设）云开发——图书馆座位预约小程序（一）

@不会写代码的小张

已于 2023-03-05 18:54:37 修改

阅读量2.1k

点赞数 6

文章标签：课程设计小程序

于 2022-12-24 11:39:45 首次发布

本文链接：https://blog.csdn.net/qq_45538179/article/details/128427189

版权

一、前言

需要完整版代码加V:2380454346

今天是开始准备毕设第一天，自己打算利用这自学的一点皮毛知识来开发一个图书馆座位预约小程序。本系统将采用腾讯云开发，初步打算设计7大功能。

座位预约功能
打卡签到功能
失物招领功能
监督举报功能
图书检索功能
活动预约功能
新闻公告功能
云集合将使用云开发提供的CMS（内容管理）进行统一管理，以此来方便平台信息的管理。

二、页面介绍

wxml页面开发

<!--轮播图--> 
<view class="banner">
  <swiper class="swip_main" indicator-dots autoplay interval="3000" circular="">
    <block wx:for="{{mglist}}">
      <swiper-item>
        <image style="width: 100%; height: 100%;" mode="aspectFill" src="{{item.photo}}"></image>
      </swiper-item> 
    </block>
  </swiper>
</view>
<!--公告-->
<view class="news">
  <view class="news_left">
    <image src="../../images/gz.png"></image>
    <view class="news_title">
      【 公告 】
    </view>
  </view>
  <view class="news_right"> 
    <swiper class="swiper-news-top" vertical="true" autoplay="true" circular="true" interval="3000">
      <block wx:for="{{msgList}}">
        <navigator url="" open-type="navigate">
          <swiper-item>
            <view class="swiper_item">· {{item.text}}</view>
          </swiper-item>
        </navigator>
      </block>
    </swiper>
  </view> 
</view>

首页顶部设计了一个轮播图和公告的展示位，将通过API从云集合来调取图片和公告内容，展示在页面

db.collection("banner").get({
      success:res=>{
        console.log(res)
        this.setData({
          mglist:res.data
        })
      }
    })
注：通过云平台提供的db.collection("banner").get()来获取图片展示在前端页面
    db.collection("tzgg").get({
      success:res=>{
        console.log(res)
        this.setData({
          msgList:res.data
        })
      }
    })
注：获取公告内容

接下来设计功能按钮，设计的很垃圾，别嘲笑

<!--功能按钮--> 
<view class="nav">
  <view class="mean_top">
    <view class="mean_left" bindtap="zwyy">
      <image src="../../images/zw.png"></image>
      <text>座位预约</text>
    </view>
    <view class="mean_middle" bindtap="dkqd">
      <image src="../../images/qd.png"></image>
      <text>打卡签到</text>
    </view>
    <view class="mean_right" bindtap="jdjb"> 
      <image src="../../images/jubao.png"></image> 
      <text>监督举报</text>
    </view> 
  </view>
  <view class="mean1_middle">
    <view class="mean1_middle_left" bindtap="swzl">
      <image src="../../images/swzl.png"></image>
      <text>失物招领</text>
    </view>
    <view class="mean1_middle_middle" bindtap="hdbm">
      <image src="../../images/hdyy.png"></image>
      <text>活动报名</text>
    </view>
    <view class="mean1_middle_right" bindtap="tsjs">
      <image src="../../images/ts.png"></image>
      <text>图书检索</text>
    </view>
  </view>
  <view class="mean2"> 
    <view class="mean2_left" bindtap="news">
      <image src="../../images/news.png"></image>
      <text>新闻公告</text>
    </view>
  </view>
</view>

每个功能页面绑定了一个bindtap事件。将调用官方提供的API来跳转页面

zwyy:function(e){
      wx.navigateTo({
        url: '../zwyy/zwyy',
      })
  },
注：通过微信提供的wx.navigateTo({}),来跳转到指定页面，注意此方法不同用来跳转tabber页面

css页面

  .banner{
  width: 100%;
  height: 350rpx;
}
.swip_main{
  width: 100%;
  height: 100%; 
}
.news{
  width: 95%;
  height: 85rpx;
  margin: 20rpx auto;
  border-radius: 10rpx;
  /* border: 1px solid #0000a7; */
  box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.2);
}
.news_left{
  width: 35%;
  height: 100%;
  float: left;
}
.news_left image{
  width: 60rpx;
  height: 60rpx;
  margin-top: 12rpx;
  margin-left: 15rpx;
  float: left;
}
.news_title{
  float: left;
  line-height: 85rpx;
  margin-left: 5rpx;
  font-weight: 700;
  font-size: 35rpx;
  color: #050d9e;
  }
.news_right{
  width: 65%;
  float: left;
  height: 100%;
}
.swiper-news-top{
  width: 100%;
  height: 100%;
}
.swiper_item {
  font-size: 27rpx;
  font-weight: 600;
  line-height: 80rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
  text-align: center;
  color: #88888b;
}
.nav{
  margin: auto;
  margin-top: 10rpx;
  width: 90%;
  height: 800rpx;
}
.mean_top{
  margin-top: 60rpx;
  position: relative; 
  display: flex;
  width: 100%;
  height: 200rpx;
}
.mean_left{
  margin-left: 40rpx;
  margin-top: 15rpx;
  width: 120rpx;
  height: 160rpx;
  position: relative;
}
.mean_left image{
  position: relative;
  width: 100%;
  height: 130rpx;
}
.mean_left text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
.mean_middle{
  margin-left: 110rpx;
  margin-top: 15rpx;
  height: 160rpx;
  width: 120rpx;
}
.mean_middle image{
  position: relative;
  width: 100%;
  height: 130rpx;
}
.mean_middle text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
.mean_right{
  margin-top: 15rpx;
  margin-left: 110rpx;
  height: 160rpx;
  width: 120rpx;
}
.mean_right image{
  margin-top: 10rpx;
  position: relative;
  width: 100%;
  height: 120rpx;
}
.mean_right text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
.mean1_middle{
  margin-top: 60rpx;
  position: relative;
  display: flex;
  width: 100%;
  height: 200rpx;
}
.mean1_middle_left{
  margin-left: 40rpx;
  margin-top: 15rpx;
  width: 120rpx;
  height: 160rpx;
  position: relative;
}
.mean1_middle_left image{
  position: relative;
  width: 100%;
  height: 130rpx;
}
.mean1_middle_left text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
.mean1_middle_middle{
  margin-left: 110rpx;
  margin-top: 15rpx;
  height: 160rpx;
  width: 120rpx;
}
.mean1_middle_right{
  margin-top: 15rpx;
  margin-left: 110rpx;
  height: 160rpx;
  width: 120rpx;
}
.mean1_middle_middle image{
  position: relative;
  width: 100%;
  height: 130rpx;
}
.mean1_middle_middle text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
.mean1_middle_right image{
  position: relative;
  width: 100%;
  height: 130rpx;
}
.mean1_middle_right text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}
.mean2{
  margin-top: 15rpx;
  height: 160rpx;
  width: 120rpx;
}
.mean2_left{
  margin-left: 40rpx;
  margin-top: 60rpx;
  width: 120rpx;
  height: 160rpx;
  position: relative;
}
.mean2 image{
  position: relative;
  width: 100%;
  height: 130rpx;
}
.mean2 text{
  font-size: 30rpx;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

js页面

const db=wx.cloud.database()
var times=require('../../utils/times.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mglist:'',
    msgList:''
  },
  onLoad(options) {
    db.collection("banner").get({
      success:res=>{
        console.log(res)
        this.setData({
          mglist:res.data
        })
      }
    })
    db.collection("tzgg").get({
      success:res=>{
        console.log(res)
        this.setData({
          msgList:res.data
        })
      }
    })
  },
  zwyy:function(e){
      wx.navigateTo({
        url: '../zwyy/zwyy',
      })
  },
  dkqd:function(e){
      wx.navigateTo({
        url: '../dkqd/dkqd',
      })
  },
  jdjb:function(e){
      wx.navigateTo({
        url: '../jdjb/jdjb',
      })
  },
  swzl:function(e){
      wx.navigateTo({
        url: '../swzl/swzl',
      })
  },
  hdbm:function(e){
      wx.navigateTo({
        url: '../hdbm/hdbm',
      })
  },
  tsjs:function(e){
      wx.navigateTo({
        url: '../tsjs/tsjs',
      })
  },
  news:function(e){
    wx.navigateTo({
      url: '../news/news',
    })
  },
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

效果图

哈哈，是不是很丑。关注我，下期继续

@不会写代码的小张

关注

6
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
1
评论
（毕设）云开发——图书馆座位预约小程序（一）

今天是开始准备毕设第一天，自己打算利用这自学的一点皮毛知识来开发一个图书馆座位预约小程序。本系统将采用腾讯云开发，初步打算设计7大功能。1. 座位预约功能2. 打卡签到功能3. 失物招领功能4. 监督举报功能5. 图书检索功能6. 活动预约功能7. 新闻公告功能云集合将使用云开发提供的CMS（内容管理）进行统一管理，以此来方便平台信息的管理。
复制链接

扫一扫