【微信小程序】微信小程序实现未来一周时间表，时间表中显示时间段和是否可以预约或使用

最新推荐文章于 2024-01-23 18:16:53 发布
最新推荐文章于 2024-01-23 18:16:53 发布
阅读量6.5k 收藏 71
点赞数 9
分类专栏： 微信小程序 文章标签： 微信小程序时间表 未来一周 未来7天 预约未来7天 未来一周时间表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshuny/article/details/99544752
版权

一、效果图（时间为灰色为该时间段不可使用）

未选中效果                                                                  选中效果

二、分析

根据图中的效果，可以一行一行的来写，总共有7行，每一行的第一列都是周几+日期，第一列以后都是时间段。

1、处理第一列：可以写js，获取未来一周的日期和日期对应是周几

let time = util.formatDate(new Date());

let date = util.getDatesNoZero(8, time);

这个date是一个长度为8的数组，因为我们要显示从明天开始的日期，所以应该取索引为1以后的数据

以下是util

const formatDate = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')

}

function getDatesNoZero(days, todate) {
  var dateArry = [];
  for (var i = 0; i < days; i++) {
    var dateObj = dateLaterNoZero(todate, i);
    dateArry.push(dateObj)
  }
  return dateArry;
}

function dateLaterNoZero(dates, later) {
  let dateObj = {};
  let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  let yearDate = date.getFullYear();
  let month = date.getMonth() + 1;
  let dayFormate = date.getDate();
  dateObj.time = yearDate + '-' + month + '-' + dayFormate;
  dateObj.week = show_day[day];
  return dateObj;
}

module.exports = {
  formatDate: formatDate,
  getDatesNoZero: getDatesNoZero,
}

2、处理第一列之后的时间段

这个时间段需求上都是固定的，2个小时为一段，可以把时间段数据放入数组，页面上通过wx:for遍历显示。

点击某一个时间段该行会变成浅蓝色，该时间段会变成深蓝色，字体颜色变成白色，字体变粗，这些可以通过动态改变样式来实现

以第一行举例：

 <view class='row' style='background:{{selectArray[0].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[0].week}}</text>
          <text class='date-text'>{{selectArray[0].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

三、以组件形式实现

wxml：

<view class='root-container'>
  <view class='container'>
    <view class='title-container'>
      <text class='title'>选择时间</text>
      <text class='time'>{{time}}</text>
    </view>
    <view class='time-container'>
      <view class='row' style='background:{{selectArray[0].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[0].week}}</text>
          <text class='date-text'>{{selectArray[0].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[1].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[1].week}}</text>
          <text class='date-text'>{{selectArray[1].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[1].selectTime?"#59B0FF":""}}' data-content='1#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[1].selectTime?"#ffffff":dataArray[1].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[1].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[1].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='1#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[1].selectTime?"#ffffff":dataArray[1].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[1].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[2].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[2].week}}</text>
          <text class='date-text'>{{selectArray[2].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[2].selectTime?"#59B0FF":""}}' data-content='2#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[2].selectTime?"#ffffff":dataArray[2].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[2].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[2].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='2#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[2].selectTime?"#ffffff":dataArray[2].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[2].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[3].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[3].week}}</text>
          <text class='date-text'>{{selectArray[3].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[3].selectTime?"#59B0FF":""}}' data-content='3#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[3].selectTime?"#ffffff":dataArray[3].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[3].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[3].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='3#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[3].selectTime?"#ffffff":dataArray[3].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[3].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[4].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[4].week}}</text>
          <text class='date-text'>{{selectArray[4].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[4].selectTime?"#59B0FF":""}}' data-content='4#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[4].selectTime?"#ffffff":dataArray[4].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[4].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[4].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='4#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[4].selectTime?"#ffffff":dataArray[4].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[4].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

      <view class='row' style='background:{{selectArray[5].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[5].week}}</text>
          <text class='date-text'>{{selectArray[5].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[5].selectTime?"#59B0FF":""}}' data-content='5#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[5].selectTime?"#ffffff":dataArray[5].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[5].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[5].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='5#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[5].selectTime?"#ffffff":dataArray[5].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[5].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

      <view class='row' style='background:{{selectArray[6].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container-bottom'>
          <text class='date-text'>{{selectArray[6].week}}</text>
          <text class='date-text'>{{selectArray[6].date}}</text>
        </view>

        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container-bottom' style='background:{{itemName==selectArray[6].selectTime?"#59B0FF":""}}' data-content='6#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[6].selectTime?"#ffffff":dataArray[6].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[6].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right-bottom' style='background:{{itemName==selectArray[6].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='6#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[6].selectTime?"#ffffff":dataArray[6].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[6].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
    </view>
    <view class='bottom-divider' />
  </view>
</view>

js：

var util = require('../../utils/util.js')

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

  /**
   * 组件的初始数据
   */
  data: {
    timeArray: ["8:00", "10:30", "13:30", "16:00"],
    timeSlotArray: ["8:00-10:00", "10:30-12:30", "13:30-15:30", "16:00-18:00"],
    dataArray: [{
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }],
    selectArray: [{
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }],
    time: "",
    selectTimeForServer: "",
    canSubscribe: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    pushSchedule(scheduleMap) {
      var index = 0;
      for (var day in scheduleMap) {
        this.data.selectArray[index].date = day
        var scheduleDayArray = scheduleMap[day]
        var timeArray = this.data.dataArray[index].time
        for (var i = 0; i < scheduleDayArray.length; i++) {
          if (scheduleDayArray[i].checked == 1) {
            timeArray[i] = true
          } else {
            timeArray[i] = false
          }
        }
        this.data.dataArray[index].time = timeArray
        index = index + 1
      }
      this.setData({
        selectArray: this.data.selectArray,
        dataArray: this.data.dataArray
      })
    },
    onItemClick: function(e) {
      var data = e.currentTarget.dataset.content;
      var dateArray = data.split("-")
      //0#8:00
      var dataSplitArray = data.split("#");
      let temp = this.data.selectArray;
      for (var i = 0; i < temp.length; i++) {
        if (i == dataSplitArray[0]) {
          temp[i].select = true;
          temp[i].selectTime = dataSplitArray[1]
          continue;
        }
        temp[i].select = false;
        temp[i].selectTime = "";
      }
      let time = util.formatDate(new Date());
      var timeArray = util.getDates(8, time)
      var dataIndex = this.data.timeArray.indexOf(dataSplitArray[1])
      this.setData({
        selectArray: temp,
        time: temp[dataSplitArray[0]].date + " " + temp[dataSplitArray[0]].week + " " + this.data.timeSlotArray[dataIndex],
        selectTimeForServer: timeArray[parseInt(dataSplitArray[0]) + 1].time + " " + this.data.timeSlotArray[dataIndex]
      })

      if (this.data.dataArray[dataSplitArray[0]].time[dataIndex]) {
        this.data.canSubscribe = true
      } else {
        this.data.canSubscribe = false;
      }

      this.triggerEvent('selectTime', {
        "time4Server": this.data.selectTimeForServer,
        "time": this.data.time
      }, {});
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行

      let time = util.formatDate(new Date());
      console.log(time)
      let date = util.getDatesNoZero(8, time);
      console.log(date);
      let temp = this.data.selectArray;
      for (var i = 1; i < date.length; i++) {
        if (i == 1) {
          temp[0].week = "明天";
          temp[0].date = date[1].time.split("-")[1] + "月" + date[1].time.split("-")[2] + "日";
          continue;
        }
        temp[i - 1].week = date[i].week;
        temp[i - 1].date = date[i].time.split("-")[1] + "月" + date[i].time.split("-")[2] + "日";
      }
      this.setData({
        selectArray: temp,
        //初始化time
        // time: temp[0].date +" "+ temp[0].week + " " + this.data.timeSlotArray[0]
      })
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },

  },
})

WXSS :

.root-container {
  display: flex;
  flex-direction: column;
  width: 710rpx;
  background: #f6f6f6;
}

.container {
  width: 710rpx;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16rpx;
}

.title-container {
  width: 710rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title {
  margin-left: 20rpx;
  margin-top: 30rpx;
  font-size: 36rpx;
  color: #333;
  font-weight: 700;
  margin-bottom: 30rpx;
}

.time {
  margin-left: 40rpx;
  font-size: 32rpx;
  color: #59b0ff;
  font-weight: 700;
}

.time-container {
  width: 710rpx;
  display: flex;
  flex-direction: column;
}

.row {
  /* 边框样式 dotted solid double dashed 点状 实线 双线 虚线*//* border-style: solid; */
  border-color: #e6e6e6;
  width: 710rpx;
  display: flex;
  flex-direction: row;
}

.date-container {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.date-container-bottom{
 border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time-tab-container {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-right {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-bottom {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-right-bottom {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.date-text {
  font-size: 28rpx;
  color: #666;
}

.time-tab {
  font-size: 32rpx;
  color: #333;
}
.bottom-divider{
  width: 710rpx;
  background: #ffffff;
  border-radius: 0 0 16rpx 16rpx;
  height: 40rpx;
}

四、组件的使用

先在page下的index.json中引用这个组件,然后再page下的wxml中将组件添加进来，例如

<my-select-time id="select-time"  />

初始化数据以及展示数据：

var data = {
	"8月15日": [{
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 08:00:00",
		endTime: "2019-08-15 10:00:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 10:30:00",
		endTime: "2019-08-15 12:30:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 13:30:00",
		endTime: "2019-08-15 15:30:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 16:00:00",
		endTime: "2019-08-15 18:00:00",
		timeDes: "8:00-10:00",
		week: "周四"
	}]
}
this.selectTime = this.selectComponent('#select-time')
this.selectTime.pushSchedule(data)

 调用效果如下

    

end

川川~
关注
  • 9
    点赞
  • 踩
  • 71
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
微信小程序实现时间预约功能
10-17
主要为大家详细介绍了微信小程序实现时间预约基本功能，一个类似电商的时间预约功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp----微信小程序 日历组件（周日历&& 月日历）【Vue3+ts+uView】
heavenz19的博客
09-18 3457
【代码】uniapp----微信小程序 日历组件（周日历&& 月日历）【Vue3+ts+uView】
微信小程序日历打卡组件
01-27
恍恍惚惚开发小程序也有一段时间了，最近要做一个关于打卡的小程序，最终还是翻遍全网，依然找不到一款比较随眼缘的日历打卡的相关组件，所以，老样子，自己开发一个呗。（代码比较简单，只是提供一个思路，样式可以自己去样式表修改，如果有需要，文章留言，如果多的话，我会加上换肤，样式自定义等扩展功能，有需求，就留言吧，谢谢大家了，如果有错误，请您一定告诉我） #### 先来看看什么样子 一.主要功能 日期选择 “看第一预览图” 日期切换 月份切换 回到今天 “看第一预览图” 记录选中 二.使用 最下面放上下载地址 代码结构 将下载下来的文件 wx-calendar.rar 解压放到 components 文件夹下 引入代码 打开pages/xxx/xxx.json xxx 为你需要引入的文件名 ，已xxx = index 为例 // pages/index/index.js { "usingCo
微信小程序picker组件-用于预约上门服务时间
weixin_47348711的博客
04-24 2591
微信小程序picker组件-用于预约上门服务时间 看到网上有很多乱七八糟的代码,看着头疼,于是自己写了一个简单的 代码可直接复制运行,数据可配合后端来使用 wxml–代码 <picker class='time-picker' mode="multiSelector" bindchange="bindStartMultiPickerChange" bindtap='pickerTap' ...
微信小程序日历组件（可滑动，可展开收缩，可标点）
aaa123aaasqw的博客
12-08 1110
6.在需要的页面中引入：index.wxss。7.在需要的页面中引入：index.json。8.在需要的页面中引入：index.js。
微信小程序 小工具类 倒班日历 （源代码+截图）
06-21
微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码+截图）微信小程序 小工具类 倒班日历 （源代码
微信小程序获取当前和一周后的日期时间
m0_51684823的博客
03-19 473
微信小程序获取当前和一周后的日期时间。
微信小程序获取从明天开始一周日期(包含周几及号数)简单实现
yjdyyds的博客
05-09 1021
<view class="choose-time-middle"> <view class="date"> <view wx:for="{{dateArray}}" wx:key="index"><button class="{{item.day == thisDate ? 'active' : ''}}" data-id="{{item.day}}" bindtap="dateClick" data-time="{{item.time}}">{.
微信小程序组件-uniapp-预约时间段
喜欢做一些demo，和分享遇到的 BUG
04-01 3165
用于预约时间的选择器，显示被占用的时间，支持多选、单选、选择一个时间段
微信小程序一周时间表
caoyuna1998的博客
10-16 28
　　　<view class="dateView"> <image class="dateLeft" bindtap="prevWeek" src="../../res/imgs/dateLeft.png"></image> <view>{{dateStart}} 至 {{dateEnd}}</view&gt...
基于微信小程序求职招聘系统设计后端SSM可升级SpringBoot
11-01
## 开发技术：微信小程序客户端 + Java后台服务器端 + mysql数据库 系统一共3个身份：求职者，商家和管理员，其中求职者和商家在小程序端实现，管理员在web端后台实现。用户通过扫码、搜索分享进入小程序。授权微信登录用户则需要完善自己的个人信息（姓名、性别、所在院系、专业班级、性格特点），然后进入自主挑选兼职，找到对应的兼职分类选取合适的兼职岗位，选择好之后联系商户商谈详情，交谈好了可以预约面试。商户则可以通过学校的认证且完善商户信息（店名、经营内容、经营时间、地址、上传营业许可证）来设置兼职信息的共享发布。发布兼职岗位和接受面试请求。设置评分系统。双方能互相评论，让优秀的商户被更多人知道，优秀的同学更多的录用。同时也设置客服系统，来指导用户的使用和解答疑问。 研究方法：微信小程序的制作编译是现在推出了独立的编译工具—微信开发者工具。使用js—全局逻辑、json小程序的公共设置，页面配置、wxml—页面结构，结合基础组件事件系统构建出页面的结构、wxss—全局样式表。 ## 实体ER属性如下： 用户: 用户名,预留密码段,院系班级,姓名,性别,出生日期,用户照片,联系
微信小程序健身房私教预约系统+ssm.zip
最新发布
04-11
2. **在线预约功能**：用户可以实时查看教练的可预约时间段，并直接在小程序中完成预约。 3. **动态时间表**：教练和用户均可查看和管理自己的时间表，方便双方协调时间。 4. **支付集成**：整合微信支付，允许...
微信小程序个人行政复议在线预约系统开发+ssm.zip
04-11
SSM项目小程序“个人行政复议在线预约系统开发Ssm.zip”是一个基于Spring、Spring MVC和MyBatis（SSM）框架开发的微信小程序，旨在简化公民进行行政复议申请的流程。该项目结合了微信小程序的用户便利性与SSM框架的...
基于SSM的新乡学院自习室预约微信小程序.zip
04-29
基于SSM的新乡学院自习室预约微信小程序 高校自习室、学生、座位预约 微信小程序、Java、SSM、Mysql 自习室预约管理系统的用户是系统最根本使用者，按需要分析系统包括用户：学生、管理员。 管理员通过后台的登录...
微信小程序时间日程
qq_53346049的博客
01-23 359
【代码】微信小程序时间日程。
微信小程序可滑动周日历组件
qq_36082658的博客
06-20 4068
微信小程序@TOC 微信小程序可滑动周日历组件 看网上周日历组件比较少，自己弄了一个，和大家分享一下。 展示一下效果图 在components组件文件夹下新建calendarWeek文件夹 直接上代码吧： index.wxml <!--components/calendarWeek/index.wxml--> <!-- 日历 --> <view class="dat...
微信小程序 工作时间段选择 星期几选择
qq_39201210的博客
06-11 5585
1. 效果图如上  需完成时间段的选择  以及下面的工作日选择  保存按钮为formSubmit提交后台2.思路： ①时段用picker跟input  如果没有占位字符  则不需要input             ②工作日选择用checkbox  多选的样式用label  将checkbox隐藏             ③label的选择后的样式跟取消的样式，这里无需判断checked  当然也...
微信小程序大全之100荐：301~400
weixin_34392906的博客
06-23 7254
2019独角兽企业重金招聘Python工程师标准>>> ...
JAVA -微信小程序制作日历预约时间功能
Code645472731的博客
08-02 6253
实现的是一个微信小程序预约时间功能 ，开始接到这个需求的时候觉得，是写在前端好呢，还是后端，后来我的日历呈现实现方式是放在了后端，因为产品设计的需求呢每次进入预约时间页面，规定都要读一遍后台设置数据，对当前时间于预约时间进行对比判断，确保数据的实时性。我本能的想驳回下，因为一开始觉得这并不是合理设计，说多了都是心累，特别不想去实现这么个功能。因为我这个人嘞脾气火爆，不好惹，后来还是硬着头皮弄完了...
php 微信小程序实现仿动态朋友圈
07-20
### 回答1： 要实现仿动态朋友圈的功能，首先我们需要使用PHP作为后端语言来处理数据和逻辑。微信小程序是前端框架，负责展示和用户交互。 在PHP后端，我们需要搭建一个数据库来存储用户发表的动态内容，可以使用MySQL或者其他关系型数据库。为了实现点赞、评论等功能，可以设计两个表，一个是动态表，存储每条动态的信息和用户ID；另一个是评论表，存储每条动态的评论及相关信息。 前端部分，我们可以使用微信小程序提供的界面组件和API来实现动态朋友圈的展示和交互功能。界面方面，我们可以使用列表组件来展示所有动态，每个列表项显示动态的基本信息，如发表者头像、昵称、发表时间等。点击列表项可以跳转到动态详情页，展示动态的详细内容和相关评论。 交互方面，我们可以在每个动态列表项中添加点赞和评论功能。点击点赞按钮会触发一个请求到后端，更新动态表中的点赞数字段。点击评论按钮，则跳转到评论列表界面，展示该动态的所有评论，并提供用户输入评论的输入框和提交按钮。 在后端，我们需要编写PHP接口来处理前端的请求。这些接口可以通过HTTP请求来实现，可以使用GET和POST方法来接收前端传递的参数，并进行相应的数据库操作。比如，GET请求可以用来获取动态列表和评论列表；POST请求可以用来进行点赞和评论的操作。 通过PHP后端和微信小程序前端的配合，我们可以实现仿动态朋友圈的功能。当用户发表动态、点赞评论时，数据会通过微信小程序发送给后端，后端再将数据存储到数据库中。同时，微信小程序通过请求后端接口获取动态和评论数据，展示给用户。这样就实现了一个简单的仿动态朋友圈的小程序应用。 ### 回答2： 要实现仿动态朋友圈的功能，需要使用PHP开发微信小程序。首先，需要创建一个数据库来存储用户的朋友圈动态信息。数据库中的表包括用户表和朋友圈表。 用户表包含用户的唯一标识、昵称、头像等信息。朋友圈表包含动态的唯一标识、发布用户的标识、动态内容、发布时间等信息。 在小程序的首页，需要显示用户关注的朋友的动态列表。这可以通过查询朋友圈表，将用户关注的好友动态按时间倒序展示。 用户进入自己的朋友圈页面时，可以发布新的动态。用户填写动态内容后，将内容、发布用户标识和当前时间插入朋友圈表中。 用户可以对朋友的动态进行点赞、评论和转发。这些操作都需要在数据库中更新相应的信息。 用户点击动态时，可以查看该动态的详细信息，包括点赞的用户、评论内容等。这可以通过查询数据库实现。 在小程序中，还可以添加一些辅助功能，比如上传图片、添加@功能、附近动态等。 除了PHP后端的开发，还需要使用微信小程序的前端框架进行界面开发和与后端的数据交互。前后端的数据传输可以使用JSON格式。 以上就是利用PHP开发微信小程序实现仿动态朋友圈的基本流程。当然还有很多细节需要根据具体需求来实现。 ### 回答3： 在PHP中实现仿动态朋友圈的微信小程序，首先需要搭建一个后端服务器来处理数据的存储和交互。可以使用PHP的框架如Laravel或Yii等来简化开发流程。 首先，需要创建一个数据库来存储用户信息、动态内容等。可以使用MySQL等关系型数据库来实现。在数据库中，可以创建用户表、动态表等。 用户表可以包含用户的基本信息，如用户ID、昵称、头像等。动态表可以包含动态的内容、发布时间等。 在微信小程序中，用户可以登录、注册账户，因此需要实现用户的认证功能。可以使用微信小程序的用户登录 API 来获取用户的 openID，用作用户的唯一标识。通过openID，可以在用户表中创建或者获取用户的信息。 用户登录后，可以查看自己的朋友圈动态。可以使用PHP的数据库查询语句来获取用户关注的好友的动态数据，并按照发布时间倒序排列。动态数据可以包含动态的内容、发布者的信息等。 用户可以发布动态，这时需要将用户输入的动态内容、当前时间等信息保存到动态表中。可以使用PHP的数据库插入语句来实现动态的保存。 另外，用户可以对动态进行点赞、评论等操作。这时需要更新动态表中的对应动态的点赞数、评论数等字段。可以使用PHP的数据库更新语句来实现。 最后，在微信小程序中展示朋友圈的动态时，可以使用PHP的后端接口来获取动态数据，并将数据返回给小程序前端进行展示。可以使用小程序的模板来渲染动态列表，并将用户的头像、昵称等信息展示出来。 总之，通过PHP来实现仿动态朋友圈的微信小程序，需要搭建后端服务器来处理数据的存储和交互，并利用数据库来保存用户信息和动态内容。通过后端接口提供数据给微信小程序前端展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值