【原创】适合零基础-微信小程序开发之预约小程序-图书馆预约_m0_54803288_图书馆预约小程序

未知 02-07 1122

实现这个小程序分三个步骤（不是云开发）使用语言JavaScript语言。

第一步骤：

首页

?代码：

App.json

{ "pages": [ "pages/index/index", "pages/yuyue/index", "pages/user/index", "pages/login/index", ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#0094ff", "navigationBarTitleText": "预约须知", "navigationBarTextStyle": "white" }, "tabBar": { "color": "#999", "selectedColor": "#ff2d4a", "backgroundColor": "#fafafa", "position": "bottom", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/home.png", "selectedIconPath": "icons/home-o.png" }, { "pagePath": "pages/yuyue/index", "text": "预约", "iconPath": "icons/category.png", "selectedIconPath": "icons/category-o.png" }, { "pagePath": "pages/user/index", "text": "我的", "iconPath": "icons/my.png", "selectedIconPath": "icons/my-o.png" } ] }, "sitemapLocation": "sitemap.json" }

index.wxml? ?主要实现轮播图和文字的效果（包可根据第一个代码的包建）

<view class="index">  <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for-items="{{lunboData}}"> <swiper-item> <image src="{{item.imgurl}}" class="slide-image" /> </swiper-item> </block> </swiper> <text> <text class="Go">【预约须知】</text> 1.图书馆现实行预约制,请同学提前通过图书馆微信小程序进行预约。每日19:00停止预约。 <text class="Go">2.疫情期间,开馆时间为8:00-21:00,法定节假日除外。</text> 3.疫情期间,每日同时在馆人数上限为300人。当馆内人数临近人数上限时,我馆将视情况采取限流措施。 4.一个微信号最多可预约1人。 <text class="Go">5.微信公众号预约目前仅支持校园卡，学生证及手机号实名认证,请务必填写真实有效信息。</text> 6.疫情期间,进馆时请全程正确佩戴口罩。 7.如有疑问请去图书馆一楼服务台咨询，感谢配合！ </text> <view class="shuoming"> <view class="shuoming_biaoti">预约订座使用说明</view> <view class="shuoming_xiangmu">1：需要登录，可提前预约4天</view> <view class="shuoming_xiangmu">2：先选定日期，然后选类型，选座位</view> <view class="shuoming_xiangmu">3：填写预约人的姓名和联系方式，然后按“提交座位预约”按扭即可。</view> </view> <navigator class="yuyue" url="/pages/dingzuo/index" open-type='switchTab' > 我要预约座位 </navigator> </view>

index.js-引用图片数据

//index.js Page({ data: { //轮播图配置 autoplay: true, interval: 3000, duration: 1200 }, onLoad: function () { var that = this; var data = { "datas": [ { "id": 1, "imgurl": "../../image/G1.jpg" }, { "id": 2, "imgurl": "../../image/G2.jpg" }, { "id": 3, "imgurl": "../../image/G3.jpg" }, ] }; that.setData({ lunboData: data.datas }) } })

第二步：

预约

代码：

yuyue/index.wxml

<view class="jiaoshi"> <view class="jiaoshi_list">图书馆一楼</view> <view class="jiaoshi_list jiaoshi_xuanzhong">图书馆二楼</view> <view class="jiaoshi_list">图书馆三楼</view> <view class="jiaoshi_list">图书馆四楼</view> </view> <view class="tishi"> 当前信息：图书馆二楼 | 2021-11-20 星期六 </view> <view class="yuyue"> <view class="yuyue_xiangmu biaoti"> <view class="yuyue_xiangmu1">时间</view> <view class="yuyue_xiangmu2">日期</view> <view class="yuyue_xiangmu3">操作</view> <view class="yuyue_xiangmu4">星期</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">8:00</view> <view class="yuyue_xiangmu2">11-20</view> <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">9:00</view> <view class="yuyue_xiangmu2 yuyue_guoqi">11-20</view> <view class="yuyue_xiangmu3 yuyue_yes"> <view>预约成功</view> </view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">10:00</view> <view class="yuyue_xiangmu2">11-20</view> <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">11:00</view> <view class="yuyue_xiangmu2">11-20</view> <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">12:00</view> <view class="yuyue_xiangmu2">11-20</view> <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">13:00</view> <view class="yuyue_xiangmu2">11-20</view> <view class="yuyue_xiangmu3 yuyue_guoqi">过期</view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="h10"></view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">14:00</view> <view class="yuyue_xiangmu2">11-20</view> <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">15:00</view> <view class="yuyue_xiangmu2 yuyue_yes">11-20</view> <view class="yuyue_xiangmu3 yuyue_yes"> <view>预约成功</view> </view> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">16:00</view> <view class="yuyue_xiangmu2">11-20</view> <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">17:00</view> <view class="yuyue_xiangmu2">11-20</view> <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">18:00</view> <view class="yuyue_xiangmu2">11-20</view> <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="yuyue_xiangmu"> <view class="yuyue_xiangmu1">19:00</view> <view class="yuyue_xiangmu2">11-20</view> <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">预约</navigator> <view class="yuyue_xiangmu4">星期六</view> </view> <view class="h10"></view> </view>

yuyue/index.wxss

/* pages/yuyue/index.wxss */ .jiaoshi{ display: flex; flex-wrap: wrap; border-bottom: 3px solid orangered; } .jiaoshi_list{ width: 25%; padding: 10px; box-sizing: border-box; text-align: center; background-color: gainsboro; border-radius: 5px; border:3px solid white; } .jiaoshi_xuanzhong{ background-color: orangered; color: white; } .tishi{ padding: 5px; background-color: #f3f3f3; font-size: 12px; border-bottom: 3px solid orangered; } .yuyue{ display: flex; flex-direction: column; font-size: 14px; } .yuyue_xiangmu{ display: flex; padding: 5px; border-bottom: 1px solid gainsboro; } .yuyue_xiangmu1{ padding: 5px; width: 20%; border-right: 1px solid gainsboro; } .yuyue_xiangmu2{ padding: 5px; width: 20%; border-right: 1px solid gainsboro; } .yuyue_xiangmu3{ padding: 5px; width: 40%; border-right: 1px solid gainsboro; } .yuyue_xiangmu4{ padding: 5px; width: 20%; } .yuyue_guoqi{ text-decoration: line-through; color: red; } .yuyue_yes{ color:green; font-weight: bold; }.biaoti{ font-weight: bold; } .h10{ height: 10px; background-color: #f3f3f3;}

第三步

个人中心

代码:

user.wxml-实现个人登录

<view class="user_info_wrap"> <view wx:if="{{userinfo.avatarUrl}}" class="user_img_wrap"> <image class="user_bg" src="{{userinfo.avatarUrl}}" ></image> <view class="user_info"> <image class="user_icon" src="{{userinfo.avatarUrl}}"></image> <view class="user_name">{{userinfo.nickName}}</view> </view> </view> <view wx:else class="user_btn"> <navigator url="/pages/login/index" >登录</navigator> </view> </view> <view class="user_content"> <view class="user_main">  <view class="history_wrap"> <navigator> </navigator> <navigator url="/pages/collect/index"> <view class="his_num"></view> <view class="his_name"></view> </navigator> <navigator> <view class="his_num"></view> <view class="his_name"></view> </navigator> <navigator> <view class="his_num"></view> <view class="his_name"></view> </navigator> </view>  <view class="orders_wrap"> <view class="orders_title">我的预约</view> <view class="order_content"> <navigator url="/pages/order/index?type=1"> <view class="iconfont icon-ding_dan"></view> <view class="order_name">预约信息</view> </navigator> <navigator url="/pages/order/index?type=2"> <view class="iconfont icon-fukuantongzhi"></view> <view class="order_name">预约时间</view> </navigator> <navigator url="/pages/order/index?type=3"> <view class="iconfont icon-receipt-address"></view> <view class="order_name">预约地点</view> </navigator> <navigator> <view class="iconfont icon-tuihuotuikuan_dianpu"></view> <view class="order_name">预约退订</view> </navigator> </view> </view>  <view class="address_wrap"> 住址管理 </view>  <view class="app_info_wrap"> <view class="app_info_item app_info_contact"> <text>联系客服</text> <text>400-618-4000</text> </view> <navigator url="/pages/feedback/index" class="app_info_item">意见反馈</navigator> <view class="app_info_item">关于我们</view> </view>  <view class="recommend_wrap"> 把应用推荐给其他人 </view> </view> </view>

user/index.wxss

page { background-color: #edece8; } .user_info_wrap { height: 45vh; overflow: hidden; background-color: var(--themeColor); position: relative; } .user_info_wrap .user_img_wrap { position: relative; } .user_info_wrap .user_img_wrap .user_bg { height: 50vh; filter: blur(10rpx); } .user_info_wrap .user_img_wrap .user_info { position: absolute; left: 50%; transform: translateX(-50%); top: 20%; text-align: center; } .user_info_wrap .user_img_wrap .user_info .user_icon { width: 150rpx; height: 150rpx; border-radius: 50%; } .user_info_wrap .user_img_wrap .user_info .user_name { color: #fff; margin-top: 40rpx; } .user_info_wrap .user_btn { position: absolute; left: 50%; transform: translateX(-50%); top: 40%; border: 1rpx solid greenyellow; color: greenyellow; font-size: 38rpx; padding: 30rpx; border-radius: 10rpx; } .user_content { position: relative; } .user_content .user_main { padding-bottom: 100rpx; color: #666; position: absolute; width: 90%; left: 50%; transform: translateX(-50%); top: -40rpx; } .user_content .user_main .history_wrap { background-color: #fff; display: flex; } .user_content .user_main .history_wrap navigator { flex: 1; text-align: center; padding: 10rpx 0; } .user_content .user_main .history_wrap navigator .his_num { color: var(--themeColor); } .user_content .user_main .orders_wrap { background-color: #fff; margin-top: 30rpx; } .user_content .user_main .orders_wrap .orders_title { padding: 20rpx; border-bottom: 1rpx solid #ccc; } .user_content .user_main .orders_wrap .order_content { display: flex; } .user_content .user_main .orders_wrap .order_content navigator { padding: 15rpx 0; flex: 1; text-align: center; } .user_content .user_main .orders_wrap .order_content navigator .iconfont { color: var(--themeColor); font-size: 40rpx; } .user_content .user_main .address_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx ; } .user_content .user_main .app_info_wrap { margin-top: 30rpx; background-color: #fff; } .user_content .user_main .app_info_wrap .app_info_item { padding: 20rpx ; border-bottom: 1rpx solid #ccc; } .user_content .user_main .app_info_wrap .app_info_contact { display: flex; justify-content: space-between; } .user_content .user_main .recommend_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx ; }

这篇文章关于小程序的实现就分享到这里，供大家交流学习参考！

关于部分二级菜单实现下一篇文章再分享。