一、前言

需要完整版代码加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() {}
})

效果图

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

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

基于微信教室图书馆座位预约小程序毕业设计毕设作品（2）小程序功能
个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的MINA框架:后台 ...
基于微信教室图书馆座位预约小程序毕业设计毕设作品（7）中期检查报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的MINA框架:后 ...
springboot教室图书馆座位预约小程序毕业设计毕设作品开题报告开题答辩PPT
springboot教室图书馆座位预约小程序毕业设计毕设作品开题报告开题答辩PPT
基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的教室图书馆座位预约小程序系统设计与实现
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序预约订座小程序,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加座位类型 ...
自习室图书馆座位预约小程序开题报告（基于微信小程序毕业设计题目选题课题）
开题报告效果图
计算机毕业设计(51)java小程序毕设作品之教室图书馆座位预约小程序系统
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序预约订座小程序,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加座位类型 ...
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序
云开发表白墙微信小程序源码
这是一款云开发的表白墙微信小程序特点是云开发, 安装特别的简单首先呢小程序账号开通云开发权限然后把源码上传到微信开发者工具里面然后点击开发者工具软件上面的云开发,然后点击数据库在数据库里面创 ...
修复采集接口版云开发表情包微信小程序源码下载增加制作等功能
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...

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

一、前言

二、页面介绍

wxml页面开发

css页面

js页面

效果图

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

最新文章

热门文章