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

实现这个小程序分三个步骤（不是云开发）使用语言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 主要实现轮播图和文字的效果（包可根据第一个代码的包建）

<!--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

<!--pages/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 ;
}

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

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

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

【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
系列文章目录 [零基础微信小程序入门开发]小程序介绍及环境搭建 [零基础微信小程序入门开发]配置小程序 [零基础微信小程序入门开发]小程序框架一 [零基础微信小程序入门开发]小程序框架二 [零基础微信 ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
小猿圈分享适合零基础学python的书籍
近几年python这门语言可谓是出尽了风头,排名越来越靠前,用的人越来越多,所以市面上培训python的机构也数不胜数,当人了有些人不方便去参加培训班的同学,就选择了自学,今天小猿圈就给大家分享. 一 ...
【Web前端开发】《零基础入门学习Web开发》（HTML5CSS3）（小甲鱼）
1 P1:凉凉好像挺厉害的奥? 听完了! 2 P2:HTML是用来描述网页的一种语言官方:超文本标记语言 Hyper Text Markup Language 使用标签来描述网页 ...
python教程视频-有没有适合零基础小白学的python教程，视频或者书籍都可以?
当你想要自学 python3 编程时,面临的第一个问题是:"我应该看哪些书/教程/视频?"我有一份亲自验证过的极简答案.我刚经过 python3 入门并已开始实战数据分析与爬虫,这 ...
零基础学习测试还是开发？
软件测试作为IT行业的刚需职位,其实是非常适合0基础的小白同学加入学习的但是具体选择测试还是开发还是要看你个人的兴趣爱好以及学习能力,对哪个感兴趣,哪个能学的会就选择哪个就可以了平时说起程序员印象中 ...
适合零基础人群学习的Python入门教程
适合零基础人群学习的Python入门教程学什么?小编为大家准备的Python学习教程,课程主要讲解:Python核心编程.Linux基础.前端开发.Web开发.爬虫开发.大数据.人工智能等内容. Py ...
python语言程序设计难不难_零基础学Python编程开发难度大吗？从哪学起？
转行零基础学Python编程开发难度大吗?从哪学起? 近期很多小伙伴问我,如果自己转行学习Python,完全0基础能否学会呢?Python的难度到底有多大? 今天,小编就来为大家详细解读一下这个问题. ...
如何学好python基础_零基础如何学好Python开发？
作为一个零基础小白想学好Python开发应该先确定明确目标.做好学习Python系统规划.选择适合的开发工具.进阶提升学习规划.多练多看加深对Python程序的理解,想入门一门编程语言就需要不断的进行 ...

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

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

最新文章

热门文章