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

一、前言

需要完整版代码加V:2380454346

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

1. 座位预约功能
2. 打卡签到功能
3. 失物招领功能
4. 监督举报功能
5. 图书检索功能
6. 活动预约功能
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> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

首页顶部设计了一个轮播图和公告的展示位，将通过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
        })
      }
    })
注：获取公告内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

<!--功能按钮--> 
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

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

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

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() {

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

效果图

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