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

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:{currentYear:{type:Number,value:new Date().getFullYear()},currentMonth:{type:Number,value:new Date().getMonth() + 1}},/*** 组件的初始数据*/data:{currentMonthDateLen:0,  //当月天数preMonthDateLen:0,  //当月中，上月多余天数allArr:[],  //当月所有数据rDate:0,rYear:0,rMonth:0},ready(){this.getAllArr()},/*** 数组的方法列表*/methods:{//获取某年某月总共多少天getDateLen(year, month){let actualMonth = month - 1;let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);return timeDistance / (1000 * 60 * 60 * 24);},//获取某月1号是周几getFirstDateWeek(year, month){return new Date(year, month - 1, 1).getDay()},//上月 年、月preMonth(year, month){if(month == 1){return {year: --year,month: 12}}else{return{year:year,month:--month}}},//下月 年、月nextMonth(year, month){if(month == 12){return{year:++year,month:1}}else{return{year:year,month:++month}}},//获取当月数据，返回数组getCurrentArr(){this.isNow()let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth)  //获取当月天数let currentMonthDateArr = []if(currentMonthDateLen > 0){for(let i = 1; i <= currentMonthDateLen; ++i){currentMonthDateArr.push({month:'current',date:i,// 判断今天为几号isCurrentDate: i == this.data.rDate ?  true : false,})}}this.setData({currentMonthDateLen})return currentMonthDateArr},//获取当月中，上月多余数据，返回数组getPreArr(){let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth)  //当月1号是周几 == 上月残余天数let preMonthDateArr = []  //定义空数组if(preMonthDateLen > 0){let{year, month} = this.preMonth(this.data.currentYear, this.data.currentMonth) //获取上月年、月let date = this.getDateLen(year, month)for(let i = 0; i < preMonthDateLen; ++i){preMonthDateArr.unshift({ //尾部追加month:'pre',date:date})--date}}this.setData({preMonthDateLen})return preMonthDateArr},//获取当月中，下月多余数据，返回数组getNextArr(){let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen //下月多余天数let nextMonthDateArr = [] //定义空数组if(nextMonthDateLen > 0){for(let i = 1; i <= nextMonthDateLen; ++i){nextMonthDateArr.push({month: 'next',  //只是为了增加标识，区分当前月、上月date: i,})}}return nextMonthDateArr},//整合当前所有数据getAllArr(){let preArr = this.getPreArr()let currentArr = this.getCurrentArr()let nextArr = this.getNextArr()let allArr = [...preArr, ...currentArr, ...nextArr]this.setData({allArr})let sendObj = {currentYear: this.data.currentYear,currentMonth: this.data.currentMonth,allArr: allArr}this.triggerEvent('sendObj', sendObj)},//点击上月gotoPreMonth(){let{year, month} = this.preMonth(this.data.currentYear, this.data.currentMonth)this.setData({currentYear: year,currentMonth: month})this.getAllArr()},//点击下月gotoNextMonth(){let{year, month} = this.nextMonth(this.data.currentYear, this.data.currentMonth)this.setData({currentYear: year,currentMonth: month})this.getAllArr()},isNow(){let timestamp = Date.parse(new Date())let date = new Date(timestamp)this.setData({rYear : date.getFullYear(),rMonth : (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),rDate : date.getDate() < 10 ? '0' + date.getDate() : date.getDate()})},gotoNewView:function({currentTarget}){let iYear = currentTarget.dataset.yearlet iMonth = currentTarget.dataset.monthlet iDate = currentTarget.dataset.datelet dateStr = iYear+"-"+iMonth+"-"+iDate// 点击的日期为星期几let dayOfWeek = new Date(dateStr).getDay()// 调用全局变量app来判断是否登录var app = getApp()if(app.globalData.isLogin == true){   //已登录if(dayOfWeek == 0){// bindtap点击事件，传送到对应的星期行程表wx.navigateTo({url: '/view/Schedule/sunday/sunday',})} else if (dayOfWeek == 1) {  wx.navigateTo({url: '/view/Schedule/monday/monday',})} else if (dayOfWeek == 2) {  wx.navigateTo({url: '/view/Schedule/tuesday/tuesday',})} else if (dayOfWeek == 3) {  wx.navigateTo({url: '/view/Schedule/wednesday/wednesday',})} else if (dayOfWeek == 4) {  wx.navigateTo({url: '/view/Schedule/thursday/thursday',})} else if (dayOfWeek == 5) {  wx.navigateTo({url: '/view/Schedule/friday/friday',})} else if (dayOfWeek == 6) {  wx.navigateTo({url: '/view/Schedule/saturday/saturday',})}}else{wx.switchTab({url: '/view/login/login',})}}}
})

连接服务器根据wx.request函数来获取http连接服务器的url，我在服务器放的是php脚本，作用是操作mysql实现查看和增添修改以及获取用户的openid。

小程序连接服务器上脚本的代码：

首先需要在app.js设置全局变量接收openid和判断用户状态为登录还是登出

App({globalData:{isLogin:false,openid:'',},onLaunch: function () {}
});

连接用户登录的php脚本：

Page({data:{nickName:'',icon:'',userCode:'',hasLogin:'',getOpenid:''},login(){var app = getApp()console.log('点击事件执行了')wx.getUserProfile({desc: '需要授权登录',success:res=>{app.globalData.isLogin=truevar user = res.userInfoconsole.log(user)console.log('登录成功')this.setData({nickName:user.nickName,icon:user.avatarUrl,hasLogin:app.globalData.isLogin})       wx.login({success:res=>{var code = res.codethis.setData({userCode:code})//连接服务器wx.request({url: 'http://www.mcflyuuuuu.top/wx_program/userLogin.php服务器上php脚本的路径',data:{code:this.data.userCode,nickName:this.data.nickName,},success:res=>{console.log(res)// console.log(res.data.openid)app.globalData.openid = res.data.openidconsole.log(app.globalData.openid)}})}})}})},outLogin(){var app = getApp()app.globalData.isLogin = falseconsole.log('登录已退出')this.setData({hasLogin:app.globalData.isLogin})}
})

连接添加与修改的php脚本：

B站上有大佬分享的教程：【分享】如何使用小程序在服务器数据库中插入信息_哔哩哔哩_bilibili

Page({//数据库表中属性mfAttribute:function(e){this.setData({mFir:e.detail.value})},msAttribute:function(e){this.setData({mSec:e.detail.value})},afAttribute:function(e){this.setData({aFir:e.detail.value})},asAttribute:function(e){this.setData({aSec:e.detail.value})},//连接数据库的基本信息dbLink:function(){var app = getApp()console.log(app.globalData.openid)wx.request({url: 'http://www.mcflyuuuuu.top/wx_program/insertRecord.php', //服务器地址(php文件)// 传到服务器的数据data:{openid:app.globalData.openid,dayOfWeek:"星期一",mFir:this.data.mFir,  mSec:this.data.mSec,aFir:this.data.aFir,aSec:this.data.aSec},success:function(res){console.log(res)}})wx.showLoading({title: 'inserting',})setTimeout(function (){wx.hideLoading()wx.showToast({title: 'success',})},1500)}
})

这样的还有六个，然后dayOfWeek对应不同的星期，其他的都不变

连接查看行程表的php脚本：

Page({data: {},/*** 生命周期函数--监听页面加载*///小程序Page中自带的onLoad函数onLoad: function (options) {var app = getApp()wx.request({url: '你的服务器上的php脚本路径',data:{openid:app.globalData.openid,dayOfWeek:"星期一",},success: result=>{console.log(result)this.setData({scheduleData:result.data.daySchedule,})}})}
})

对应的wxml代码

<text style="display: flex;flex-direction: column;align-items: center;">星期一</text>
<view wx:for="{{scheduleData}}"><view class='mFir'>{{item.mFir}}</view><view class="mSec">{{item.mSec}}</view><view class="aFir">{{item.aFir}}</view><view class="aSec">{{item.aSec}}</view>
</view>

php脚本：

用户登录：

<?php$code = $_GET['code'];$nickName = $_GET['nickName'];//调用jscode2session接口获取用户的openid$url = 'https://api.weixin.qq.com/sns/jscode2session?appid=‘小程序appid要去官网去查’&js_code=' . $code . '&grant_type=authorization_code';//取出网页上的信息，信息为json格式$info = file_get_contents($url);//解析json$json = json_decode($info);$arr = get_object_vars($json);$openid = $arr['openid'];$session_key = $arr['session_key'];//连接数据库的sql语句$conn = new mysqli('localhost:3306', '你的数据库账号', '你的数据库密码', 'wx_link');//连接失败时if($conn->connect_error){die("连接失败：" . $conn->connect_error);}//正常连接// 执行数据库连接和查看表中是否存在相同的openid$result = mysqli_query($conn, "select * from users where openid = '$openid'");$result = mysqli_fetch_assoc($result);if($result != null){$result = json_encode($result);echo $result;}else{$sql = "insert into users(openid, nickName, session_key) values('".$openid."', '".$nickName."', '".$session_key."');";if($conn->query($sql)){echo "succeed";}else{die('fail');}}?>

添加与修改行程表：

<?php//根据两个主键openid和dayOfWeek将数据插入指定位置$openid = $_GET['openid'];$dayOfWeek = $_GET['dayOfWeek'];//要插入的数据$mFir = $_GET['mFir'];$mSec = $_GET['mSec'];$aFir = $_GET['aFir'];$aSec = $_GET['aSec'];//建立mysql连接，输入mysql的账号和密码以及数据库名称$conn = new mysqli('localhost:3306', '你的数据库名称', '你的数据库密码', 'wx_link');//检测连接if($conn->connect_error){die("连接失败：" . $conn->connect_error);}$sql = "";$isNull = $conn->query("select * from schedule where user_id = '".$openid."' and dayOfWeek = '".$dayOfWeek."' ");//表为空if(mysqli_num_rows($isNull) == 0){$sql = "insert into schedule(user_id, dayOfWeek, mFir, mSec, aFir, aSec) values('".$openid."', '".$dayOfWeek."', '".$mFir."', '".$mSec."', '".$aFir."', '".$aSec."');";echo "表为空";}else{$sql = "update schedule set mFir = '".$mFir."', mSec = '".$mSec."', aFir = '".$aFir."', aSec = '".$aSec."' where user_id = '".$openid."' and dayOfWeek = '".$dayOfWeek."';";echo "表不为空";}if($conn->query($sql) === TRUE){echo "succeed";}else{echo "Error:" . $conn->error;}$conn->close();
?>

查看行程表：

<?php//从小程序传过来的参数$openid = $_GET['openid'];$dayOfWeek = $_GET['dayOfWeek'];//创建连接$conn = new mysqli('localhost:3306', 'root', 'aa5153222', 'wx_link');//连接失败if($conn->connect_error){die("连接失败:" . $conn->connect_error);}//返回的数组$res = array('error' => false);//设置返回数据的格式为utf8$conn->query("set names utf8");//sql语句查询表中所有数据$sql = $conn->query("select mFir, mSec, aFir, aSec from schedule where user_id = '".$openid."' and dayOfWeek = '".$dayOfWeek."' ");//新建一个数组 接收数据$daySchedule = array();//遍历查询的结果while($row = $sql->fetch_assoc()){array_push($daySchedule, $row);}$res['daySchedule'] = $daySchedule;// 关闭连接$conn->close();header("Content-type:application/json");// 以json的格式返回查询到的数据echo json_encode($res);die();
?>

在添加修改和查看行程中需要连接服务器并操作服务器的mysql数据库实现种种操作

只用两个表就可以实现不同的用户自增加和修改行程这个功能

users表设置主键openid用来存储用户的小程序的openid(微信用户唯一标识)

schedule表用来记录每天四个行程可以理解为课表用dayOfWeek来区分星期一到星期日不同的行程，然后添加从键user_id对应users表的openid

微信小程序日历加课表项目相关推荐

微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
python日历小程序_微信小程序日历效果
本文实例为大家分享了微信小程序日历效果的具体代码,供大家参考,具体内容如下源码下载地址项目需要一个日历功能,花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
微信小程序日历（公历）
微信小程序日历(公历) 周六加班的时候,突然想看看日历是怎么实现的,就试着写了一下. --------------------------分割线-------------------------- J ...
微信小程序日历(酒店入住日期选择)
微信小程序日历(酒店入住日期选择) wxml代码.   <wxs src="../.. ...

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