微信小程序日历加课表项目

最近花了不少时间做了个微信小程序，期间遇到了挺多技术问题的，写个博客记录一下，我先上小程序使用图片！

1.进入小程序首先要登录才能添加行程和查看行程

2.登录成功后

 3.首页日历日期是可点击，点击后是查看行程表红色是当前日期灰色是上月与下月日期(灰色不可点击)

4.对行程表的周一到周日进行添加与修改

5.添加行程

6.查看行程表

 

 技术实现：日历日期的算法；服务器连接；数据库设计。

首先日历日期的算法我是看网上大佬的分享，我本人水平很菜！

简单的微信小程序日历组件的实现（附完整代码）-小程序开发-PHP中文网

其他的功能都是在这个日历功能上实现的，所以日历日期算法才是核心，非常感谢前辈的分享！

在这个日历的基础上在wxml里用三目运算符来判断当前日期和上月与这个月的日期

wxml的代码：

<view class="calendar">
  <view class="tit">
    <view class='pre' bindtap='gotoPreMonth'>{
  {'<'}}</view>
    <view class='current'>{
  {currentYear}}年{
  {currentMonth}}月</view>
    <view class='next' bindtap='gotoNextMonth'>{
  {'>'}}</view>
  </view>
  <view class='content'>
    <view>日</view>
    <view>一</view>
    <view>二</view>
    <view>三</view>
    <view>四</view>
    <view>五</view>
    <view>六</view>
    <!-- 打印数组中所有数字，用wxss来判断是灰还是黑，然后用bindtap加三目运算符实现黑的可以点击灰的不能点击，从js里调当前时间来实现当前时间为红色 -->
    <view wx:for="{
  {allArr}}" class="{
  {item.month == 'current' ? '' : 'gray'}}" bindtap="{
  {item.month == 'current' ? 'gotoNewView' : ''}}" data-year="{
  {currentYear}}" data-month="{
  {currentMonth}}" data-date="{
  {item.date}}">
    <text wx:if="{
  {item.isCurrentDate == true && rMonth == currentMonth && rYear == currentYear}}" style="color: red;">{
  {item.date}}</text>
     <text wx:else>{
  {item.date}}</text>
     </view>
  </view>
</view>

 wxss代码：

.calendar{
	width: 100%;
}
.calendar .tit{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	color: #2A2A2A;
	padding: 40rpx 0;
}
.calendar .tit .current{
	margin: 0 40rpx;
}
.calendar .content{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding-left: 25rpx;
}
.calendar .content view{
	width: 100rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	flex-shrink: 0;
	font-size: 34rpx;
	color: #2A2A2A;
	/* background: rgb(224, 199, 199); */
	margin: 14rpx 0;
}
.calendar .content .gray{
	color: #999;
}

js代码：

Component({
  /**
   * 组件的属性列表
   */
  properties:{