天极下载今天小编给大家讲如何使用微信小程序制作课程日历?有需要或者有兴趣的朋友们可以看一看下文，相信对大家会有所帮助的。
模仿“优优老师APP”的课程日历实现的Demo，只显示<当月> 和<下个月>两个月的日期，会根据不同类型的日期类型显示不一样的样式，在wx-swiper组件中动态添加了datePad，会根据要显示月份的日期动态确定日期表格是4，5，还是6行，并动态改变swiper的高度,本月的第一天默认选中状态，下个月的第一天默认是选中状态。
[效果展示]
[目录结构]
img：本地icon文件文件夹
course：课程日历代码的目录
utils：工具类文件夹
app.*：微信小程序全局配置文件
［贴代码］
course.wxml
<view class="container" style="background:#fff">
<view class="container-hang" style="margin-top:23rpx;width:auto">
<text wx:for="{{dateTitles}}" wx:for-item="dateItem" class="cellDate"style="width:{{titleCellWidth}}px;padding:6rpx 0 6rpx 0">{{dateItem}}</text>
</view>
<swiper bindchange="swiperChange" class="swipter-box" duration="300" style="height:{{swiperHeight}}rpx">
<swiper-item wx:for="{{monthDatas}}" wx:for-item="monthData">
<view class="cell-box" wx:for="{{monthData.dataHarr}}" wx:for-index="i">
<view wx:for="{{[0, 1, 2, 3, 4, 5, 6]}}" wx:for-index="j">
<view class="contentDate" style="width:{{dateCellWidth}}px;height:{{dateCellHeight}}rpx">
<view class="type_no_1_pad" wx:if="{{monthData.data[i*7 + j].type == -1}}">
<text class="type_no_1">{{monthData.data[i*7 + j].dateShow}}</text>
</view>
<view class="type_1_pad" wx:if="{{monthData.data[i*7 + j].type == 1}}">
<text class="type_1">{{monthData.data[i*7 + j].dateShow}}</text>
</view>
<view class="type_2_pad" wx:if="{{monthData.data[i*7 + j].type == 2}}">
<text class="type_2">{{monthData.data[i*7 + j].dateShow}}</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<text style="width:{{windowWidth}}px;height:2rpx;background-color:#bdbdbd" />
<view style="display:flex;flex-direction:column;background:#fff;margin-top:53rpx;align-items:center">
<image src="{{noclass_icon}}" style="width:105rpx;height:105rpx" />
<text style="color:#d9d9d9;font-size:33rpx;margin-top:21rpx">今天没有课程哦~</text>
</view>
</view>
course.js:
var app = getApp()
var dateUtils = require("../../utils/dateUtils.js")Page({
data : {
dateTitles : [
"一", "二", "三", "四", "五", "六", "日"
],
windowWidth : 0,
windowHeight : 0,
titleCellWidth : 0,
titleCellHeight : 60, // rpx
dateCellWidth : 0,
dateCellHeight : 120, // rpx
monthDatas: [],
swiperHeight :0,
noclass_icon : "../../img/noclass_icon.png",},
onLoad: function(){
var that = this
wx.getSystemInfo({
success: function(res) {
that.setData({
windowWidth : res.windowWidth,
windowHeight : res.windowHeight,
titleCellWidth : res.windowWidth/7 -1.1,
dateCellWidth : res.windowWidth/7 -1.1
})
}
})
var tmp = getInitDate()
that.setData({
monthDatas : tmp,
swiperHeight : tmp[0].dataHarr.length * 122})
},
swiperChange: function(e){
var page = e.detail.current
this.setData({
swiperHeight : this.data.monthDatas[page].dataHarr.length * 122})
}
})
function getInitDate(){
var arr = []
var offset = 0 // 测试用
arr.push(getDataObj(dateUtils.initThisMonthDates(offset)))arr.push(getDataObj(dateUtils.initNextMonthDates(offset)))return arr
}
function getDataObj(arr){
var obj = {
data: arr,
dataHarr:dateUtils.initRowList(arr.length/7)}
return obj
}
course.json
{
"navigationBarBackgroundColor": "#000000","navigationBarTextStyle": "white",
"navigationBarTitleText": "课程表",
"backgroundColor": "#fff"
}
course.wxss
[css] view plain copy print?在CODE上查看代码片派生到我的代码片.container-hang {
display: flex;
flex-direction: row;
align-items: center;
background-color: white;
}
.cellDate {
background-color: #000;
color: white;
font-size: 33rpx;
margin-right: 1px;
text-align: center;
}
.contentDate {
display: flex;
flex-direction: column;
background-color: #fff;
margin: 1rpx
}
.type_no_1_pad {
display: flex;
flex-direction: column;
padding-top: 17rpx;
background-color: #eee;
text-align: center;
width: 100%;
height: 100%;
}
.type_no_1 { /*type=-1,表示非本月日期*/
font-size: 33rpx;
color: #c9c9c9;
}
.type_1_pad {
display: flex;
flex-direction: column;
padding-top: 17rpx;
background-color: #ee9b35;
align-items: center;
width: 100%;
height: 100%;
}
.type_1 { /*type=1, 表示今天日期*/
font-size: 33rpx;
color: #fff;
}
.type_2_pad {
display: flex;
flex-direction: column;
padding-top: 17rpx;
background-color: #fff;
text-align: center;
width: 100%;
height: 100%;
}
.type_2 { /*type=2, 表示本月非今天日期*/
font-size: 33rpx;
color: #000;
}
.cell-box {
display:flex;
flex-direction:row;
background-color:#bdbdbd;
}
.swipter-box {
display: block;
width: 100%;
overflow: hidden;
}
dateUtils.js
// 初始化“课程表”日期
// 初始化date对应的月份的日期列表
// -1表示非本月日期
// 1表示今天
// 2表示本月非今天的日期
function initMonthDates(date, isNextMonth=false){var datas = []
var month_this = date.getMonth() + 1; // 本月的月份var month_last = month_this == 1? 12: (month_this - 1) // 上个月的月份var month_next = month_this == 12? 1 : (month_this + 1) // 下个月的月份var year_this = date.getFullYear()
var year_last = month_last == 12? (year_this - 1):year_thisvar year_next = month_next == 1?(year_this + 1):year_thisvar day_this = date.getDay() //今天是本周的第几天var date_this = date.getDate() // 今天是本月的第几天var lastNum = date_this - day_this
while(lastNum > 0){
lastNum = lastNum - 7
}
var dayNum_last = DayNumOfMonth(year_last, month_last) // 上个月有多少天var dayNum = dayNum_last + lastNum
for(var i = 0, c = Math.abs(lastNum); i < c; i++){var tmp = {}
tmp.year = year_last
tmp.month = month_last
tmp.day = dayNum
tmp.type = -1
if(dayNum == 1){
tmp.dateShow = month_last + "月"
}else{
tmp.dateShow = dayNum
}
dayNum++
datas.push(tmp)
}
var dayNum_this = DayNumOfMonth(year_this, month_this) //这个月有多少天for(var i = 1; i <= dayNum_this; i++){
var tmp = {}
tmp.year = year_this
tmp.month = month_this
tmp.day = i
if(isNextMonth){
if(i == 1){
tmp.type = 1
}else{
tmp.type = 2
}
}else{
if(i == date_this){
tmp.type = 1
}else{
tmp.type = 2
}
}
if(i == 1){
tmp.dateShow = month_this + "月"
}else{
tmp.dateShow = i
}
datas.push(tmp)
}
var dayNum_next = dayNum_this - date_this + day_thiswhile(dayNum_next > 0){
dayNum_next -= 7
}
for(var i = 1, c = Math.abs(dayNum_next); i <= c; i++){var tmp = {}
tmp.year = year_next
tmp.month = month_next
tmp.day = i
tmp.type = -1
if(i == 1){
tmp.dateShow = month_next + "月"
}else{
tmp.dateShow = i
}
datas.push(tmp)
}
return datas
}
function DayNumOfMonth(year,month)
{
return new Date(year,month,0).getDate();
}
// 初始化下个月的日期列表
// offset为偏移量，offset默认为0，offset＝1表示获取应该获取到的那个月的下一个月的数据function initNextMonthDates(offset = 0){
var date = new Date()
var nextDate = new Date(date.setMonth(date.getMonth() + 1 + offset))return initMonthDates(nextDate, true)
}
// 初始化这个月的日期列表
// offset为偏移量，offset默认为0，offset＝1表示获取应该获取到的那个月的下一个月的数据function initThisMonthDates(offset = 0){
var date = new Date()
var thisDate = new Date(date.setMonth(date.getMonth() + offset))return initMonthDates(thisDate)
}
function initRowList(num){
var arr = []
for(var i = 0; i < num; i++){
arr.push(i)
}
return arr
}
module.exports = {
initThisMonthDates : initThisMonthDates,
initNextMonthDates : initNextMonthDates,
initRowList : initRowList
}
以上就是如何集成微信支付在微信小程序服务端的全部内容了，大家都学会了吗?
