草庐IT

好用的微信小程序日历组件(可滑动,可展开收缩,可标点)

七年觐汐 2023-03-28 原文

效果图

组件介绍

原生小程序编写,简单轻便,拿来即用。
gitee地址:https://gitee.com/qq_connect-EC6BCC0B556624342/wx-calendar

代码部分(这里可能不是最新的推荐去gitee克隆代码)

calendar.wxml

<!--component/calendar/calendar.wxml-->
<view class="calendar">
    <view class="title">
        <view class="header-wrap">
            <view class="flex">
                <view class="title">{{title}}</view>
                <view class="month">
                    <block wx:if="{{title}}">
                        (
                    </block>
                    {{selectDay.year}}年{{selectDay.month}}月
                    <block wx:if="{{title}}">
                        )
                    </block>
                </view>
            </view>
            <block wx:if="{{goNow}}">
                <view wx:if="{{open && !(nowDay.year==selectDay.year&&nowDay.month==selectDay.month&&nowDay.day==selectDay.day)}}" class="today" bindtap="switchNowDate">
                    今日
                </view>
            </block>
        </view>

    </view>

    <!-- 日历头部 -->
    <view class="flex-around calendar-week">
        <view class="view">一</view>
        <view class="view">二</view>
        <view class="view">三</view>
        <view class="view">四</view>
        <view class="view">五</view>
        <view class="view">六</view>
        <view class="view">日</view>
    </view>
    <!-- 日历主体 -->
    <swiper class="swiper" style="height:{{swiperHeight}}rpx" bindchange="swiperChange" circular="{{true}}" current="{{swiperCurrent}}" duration="{{swiperDuration}}">
        <swiper-item wx:for="{{[dateList0, dateList1, dateList2]}}" wx:for-index="listIndex" wx:for-item="listItem" wx:key="listIndex">
            <view class="flex-start flex-wrap calendar-main" style="height:{{listItem.length/7*82}}rpx">
                <view wx:for="{{listItem}}" wx:key="dateList" class="day">
                    <view class="bg {{item.month === selectDay.month?spotMap['y'+item.year+'m'+item.month+'d'+item.day]?spotMap['y'+item.year+'m'+item.month+'d'+item.day]:'':''}} {{(item.year === nowDay.year && item.month === nowDay.month && item.day === nowDay.day) ? 'now' : ''}} {{(item.year === selectDay.year && item.month === selectDay.month) ? (item.day === selectDay.day && oldCurrent === listIndex ?'select':''): 'other-month'}}" catchtap="selectChange" data-day="{{item.day}}" data-year="{{item.year}}" data-month="{{item.month}}">
                        {{item.day}}
                    </view>
                </view>
            </view>
        </swiper-item>
    </swiper>
    <view catchtap="openChange" class="flex list-open">
        <view class="icon {{open?'fold':'unfold'}}"></view>
    </view>
</view>

calendar.js

// component/calendar/calendar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        spotMap: { //标点的日期
            type: Object,
            value: {}
        },
        defaultTime: { //标记的日期,默认为今日
            type: String,
            value: ''
        },
        title: { //标题
            type: String,
            value: ''
        },
        goNow: { // 是否有快速回到今天的功能
            type: Boolean,
            value: true,
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        selectDay: {}, //选中时间
        nowDay: {}, //现在时间
        open: false,
        swiperCurrent: 1, //选中时间
        oldCurrent: 1, //之前选中时间
        dateList0: [], //0位置的日历数组
        dateList1: [], //1位置的日历数组
        dateList2: [], //2位置的日历数组
        swiperDuration: 500,
        swiperHeight: 0,
        backChange: false, //跳过change切换
    },

    /**
     * 组件的方法列表
     */
    methods: {
        swiperChange(e) { // 日历滑动时触发的方法
            if (this.data.backChange) {
                this.setData({
                    backChange: false
                })
                return
            }
            //计算第三个索引
            let rest = 3 - e.detail.current - this.data.oldCurrent
            let dif = e.detail.current - this.data.oldCurrent
            let date
            if (dif === -2 || (dif > 0 && dif !== 2)) { //向右划的情况,日期增加
                if (this.data.open) {
                    date = new Date(this.data.selectDay.year, this.data.selectDay.month)
                    this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined)
                    this.getIndexList({
                        setYear: this.data.selectDay.year,
                        setMonth: this.data.selectDay.month,
                        dateIndex: rest
                    })
                } else {
                    date = new Date(this.data.selectDay.year, this.data.selectDay.month - 1, this.data.selectDay.day + 7)
                    this.setMonth(date.getFullYear(), date.getMonth() + 1, date.getDate())
                    this.getIndexList({
                        setYear: this.data.selectDay.year,
                        setMonth: this.data.selectDay.month - 1,
                        setDay: this.data.selectDay.day + 7,
                        dateIndex: rest
                    })
                }
            } else { //向左划的情况,日期减少
                if (this.data.open) {
                    date = new Date(this.data.selectDay.year, this.data.selectDay.month - 2)
                    this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined)
                    this.getIndexList({
                        setYear: this.data.selectDay.year,
                        setMonth: this.data.selectDay.month - 2,
                        dateIndex: rest
                    })
                } else {
                    date = new Date(this.data.selectDay.year, this.data.selectDay.month - 1, this.data.selectDay.day - 7)
                    this.setMonth(date.getFullYear(), date.getMonth() + 1, date.getDate())
                    this.getIndexList({
                        setYear: this.data.selectDay.year,
                        setMonth: this.data.selectDay.month - 1,
                        setDay: this.data.selectDay.day - 7,
                        dateIndex: rest
                    })
                }
            }
            this.setData({
                oldCurrent: e.detail.current
            })
            this.setSwiperHeight(e.detail.current)
        },
        setSwiperHeight(index) { // 根据指定位置数组的大小计算长度
            this.setData({
                swiperHeight: this.data[`dateList${index}`].length / 7 * 82 + 18
            })
        },
        //更新指定的索引和月份的列表
        getIndexList({
            setYear,
            setMonth,
            setDay = void 0,
            dateIndex
        }) {
            let appointMonth
            if (setDay)
                appointMonth = new Date(setYear, setMonth, setDay)
            else
                appointMonth = new Date(setYear, setMonth)
            let listName = `dateList${dateIndex}`
            this.setData({
                [listName]: this.dateInit({
                    setYear: appointMonth.getFullYear(),
                    setMonth: appointMonth.getMonth() + 1,
                    setDay: appointMonth.getDate(),
                    hasBack: true
                }),
            })
        },
        //设置月份
        setMonth(setYear, setMonth, setDay) {
            const day = Math.min(new Date(setYear, setMonth, 0).getDate(), this.data.selectDay.day)
            if (this.data.selectDay.year !== setYear || this.data.selectDay.month !== setMonth) {
                const data = {
                    selectDay: {
                        year: setYear,
                        month: setMonth,
                        day: setDay ? setDay : day
                    },
                }
                if (!setDay) {
                    data.open = true
                }
                this.setData(data, () => {
                    this.triggerEvent("selectDay", this.data.selectDay)
                })
            } else {
                const data = {
                    selectDay: {
                        year: setYear,
                        month: setMonth,
                        day: setDay ? setDay : day
                    },
                }
                this.setData(data, () => {
                    this.triggerEvent("selectDay", this.data.selectDay)
                })
            }
        },
        //展开收起
        openChange() {
            this.setData({
                open: !this.data.open
            })
            this.triggerEvent("aaa", {
                a: 0
            })
            // 更新数据
            const selectDate = new Date(this.data.selectDay.year, this.data.selectDay.month - 1, this.data.selectDay.day)
            if (this.data.oldCurrent === 0) {
                this.updateList(selectDate, -1, 2)
                this.updateList(selectDate, 0, 0)
                this.updateList(selectDate, 1, 1)
            } else if (this.data.oldCurrent === 1) {
                this.updateList(selectDate, -1, 0)
                this.updateList(selectDate, 0, 1)
                this.updateList(selectDate, 1, 2)
            } else if (this.data.oldCurrent === 2) {
                this.updateList(selectDate, -1, 1)
                this.updateList(selectDate, 0, 2)
                this.updateList(selectDate, 1, 0)
            }
            this.setSwiperHeight(this.data.oldCurrent)
        },
        // 选中并切换今日日期
        switchNowDate() {
            const now = new Date()
            const selectDate = new Date(this.data.selectDay.year, this.data.selectDay.month - 1, this.data.selectDay.day)
            let dateDiff = (selectDate.getFullYear() - now.getFullYear()) * 12 + (selectDate.getMonth() - now.getMonth())
            let diff = dateDiff === 0 ? 0 : dateDiff > 0 ? -1 : 1
            const diffSum = (x) => (3 + (x % 3)) % 3
            if (this.data.oldCurrent === 0) {
                this.updateList(now, -1, diffSum(2 + diff))
                this.updateList(now, 0, diffSum(0 + diff))
                this.updateList(now, 1, diffSum(1 + diff))
            } else if (this.data.oldCurrent === 1) {
                this.updateList(now, -1, diffSum(0 + diff))
                this.updateList(now, 0, diffSum(1 + diff))
                this.updateList(now, 1, diffSum(2 + diff))
            } else if (this.data.oldCurrent === 2) {
                this.updateList(now, -1, diffSum(1 + diff))
                this.updateList(now, 0, diffSum(2 + diff))
                this.updateList(now, 1, diffSum(0 + diff))
            }
            this.setData({
                swiperCurrent: diffSum(this.data.oldCurrent + diff),
                oldCurrent: diffSum(this.data.oldCurrent + diff),
                backChange: dateDiff !== 0,
            })
            this.setData({
                selectDay: {
                    year: now.getFullYear(),
                    month: now.getMonth() + 1,
                    day: now.getDate()
                }
            }, () => {
                this.triggerEvent("selectDay", this.data.selectDay)
            })
            this.setSwiperHeight(this.data.oldCurrent)
        },
        //日历主体的渲染方法
        dateInit({
            setYear,
            setMonth,
            setDay = this.data.selectDay.day,
            hasBack = false
        } = {
            setYear: this.data.selectDay.year,
            setMonth: this.data.selectDay.month,
            setDay: this.data.selectDay.day,
            hasBack: false
        }) {
            let dateList = []; //需要遍历的日历数组数据
            let now = new Date(setYear, setMonth - 1) //当前月份的1号
            let startWeek = now.getDay(); //目标月1号对应的星期
            let resetStartWeek = startWeek == 0 ? 6 : startWeek - 1; //重新定义星期将星期天替换为6其余-1
            let dayNum = new Date(setYear, setMonth, 0).getDate() //当前月有多少天
            let forNum = Math.ceil((resetStartWeek + dayNum) / 7) * 7 //当前月跨越的周数
            let selectDay = setDay ? setDay : this.data.selectDay.day
            this.triggerEvent("getDateList", {
                setYear: now.getFullYear(),
                setMonth: now.getMonth() + 1
            })
            if (this.data.open) {
                //展开状态,需要渲染完整的月份
                for (let i = 0; i < forNum; i++) {
                    const now2 = new Date(now)
                    now2.setDate(i - resetStartWeek + 1)
                    let obj = {};
                    obj = {
                        day: now2.getDate(),
                        month: now2.getMonth() + 1,
                        year: now2.getFullYear()
                    };
                    dateList[i] = obj;
                }
            } else {
                //非展开状态,只需要渲染当前周
                for (let i = 0; i < 7; i++) {
                    const now2 = new Date(now)
                    //当前周的7天
                    now2.setDate(Math.ceil((selectDay + (startWeek - 1)) / 7) * 7 - 6 - (startWeek - 1) + i)
                    let obj = {};
                    obj = {
                        day: now2.getDate(),
                        month: now2.getMonth() + 1,
                        year: now2.getFullYear()
                    };
                    dateList[i] = obj;
                }
            }
            if (hasBack) {
                return dateList
            }
            this.setData({
                dateList1: dateList
            })
        },
        //一天被点击时
        selectChange(e) {
            const year = e.currentTarget.dataset.year
            const month = e.currentTarget.dataset.month
            const day = e.currentTarget.dataset.day
            const selectDay = {
                year: year,
                month: month,
                day: day,
            }
            if (this.data.open && (this.data.selectDay.year !== year || this.data.selectDay.month !== month)) {
                if ((year * 12 + month) > (this.data.selectDay.year * 12 + this.data.selectDay.month)) { // 下个月
                    if (this.data.oldCurrent == 2)
                        this.setData({
                            swiperCurrent: 0
                        })
                    else
                        this.setData({
                            swiperCurrent: this.data.oldCurrent + 1
                        })
                } else { // 点击上个月
                    if (this.data.oldCurrent == 0)
                        this.setData({
                            swiperCurrent: 2
                        })
                    else
                        this.setData({
                            swiperCurrent: this.data.oldCurrent - 1
                        })
                }
                this.setData({
                    ['selectDay.day']: day
                }, () => {
                    this.triggerEvent("selectDay", this.data.selectDay)
                })
            } else if (this.data.selectDay.day !== day) {
                this.setData({
                    selectDay: selectDay
                }, () => {
                    this.triggerEvent("selectDay", this.data.selectDay)
                })
            }
        },
        updateList(date, offset, index) {
            if (this.data.open) { //打开状态
                const setDate = new Date(date.getFullYear(), date.getMonth() + offset * 1) //取得当前日期的上个月日期
                this.getIndexList({
                    setYear: setDate.getFullYear(),
                    setMonth: setDate.getMonth(),
                    dateIndex: index
                })
            } else {
                const setDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset * 7) //取得当前日期的七天后的日期
                this.getIndexList({
                    setYear: setDate.getFullYear(),
                    setMonth: setDate.getMonth(),
                    setDay: setDate.getDate(),
                    dateIndex: index
                })
            }
        },
    },
    lifetimes: {
        attached() {
            let now = this.data.defaultTime ? new Date(this.data.defaultTime) : new Date()
            let selectDay = {
                year: now.getFullYear(),
                month: now.getMonth() + 1,
                day: now.getDate()
            }
            this.setData({
                nowDay: {
                    year: now.getFullYear(),
                    month: now.getMonth() + 1,
                    day: now.getDate()
                }
            })
            this.setMonth(selectDay.year, selectDay.month, selectDay.day)
            this.updateList(now, -1, 0)
            this.updateList(now, 0, 1)
            this.updateList(now, 1, 2)
            this.setSwiperHeight(1)
        }
    },
    observers: {}
})

calendar.json

{
    "component": true,
    "usingComponents": {}
}

calendar.wxss

/* component/calendar/calendar.wxss */

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACcUlEQVRYhe2WvWtUURDFf8dNVk1ETViMX4WNna22CopELBQUkYASgzFFUPBPsLGSgAqJGDRGBEUsRA0KIthaip2I/4CEoIR8JyP33lldl7fuR1AL9xSP3Xfvmzlz7pl5jyaa+O+hq0NDqDEV8sBGYA3wDZirP4TFhxvFApAD1gPz5TGqF2Xx2pK5puwA9uuPPUA30A48Bd43Ukg2gWpQTHwe2Iax5GRuA6//BoFuwQDQaUF6xaPYBFzCYryXf4yAoAc44We/INjgJvzqGwYwWg2e1Rqzogmt9MwTjgGngBXvgLB8Axh1HyiuiV7BwVoJ1KpAqPqMu70dtFbYNWDC7SqwfoMp0r9BLHbHi2qBa2nDk0A/aAmUF9oscR1pAikJIR4g3RXqUFIoxD0nOLQqAoLjwFlgOuyVKCDGve3KMY54BOqMrBTVDSQON0rgqLfajJCF5IJ7SmdeifBIICgISgQSbUCPYH+9BI4Ag8BidLzY4VXf+V01TmIM9BhU8Gc7gNOCfVn7s0y4N1SuNNuXhbYDDwU3qyX/QUIMm7Eo6HNj7gQueKe8KyfQ4guh2gPAZW+zWdAW4Al1JC+RYjTMBKA3xYpdcZE0O974rlxIXvDeDhv6gF1Kg6UrnrcYqTv5TwwLpi0VFRTd6oTmQB/AckUPrMS5LjpR9MU6n+2rSV7EfRQH1orSwOoC2w0WlQ+XZZ9qs/57CnQFLMnk47A4FdXYx8MYMJl8ECN9hPgSyxdNGM7qC3DLibyt9Ea3rHtmFddK8DzlURvYZ1c5GrA4ueZBr5S8EPp3JjNgyc061QgvsE9gk/4x0+qKN9FEE/8QwHd9qo6ectzgFAAAAABJRU5ErkJggg==");
  background-size: 100% auto;
  width: 32rpx;
  height: 32rpx;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.swiper {
  transition: height 0.3s;
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.today {
  width: 88rpx;
  height: 42rpx;
  background: #F3F4F4;
  border-radius: 22rpx;
  font-size: 24rpx;
  line-height: 42rpx;
  color: #868D8D;
  text-align: center;
  margin-right: 6rpx;
}

.today:active {
  background: #dfdfdf;
  color: #5f6464;
}

.direction-column {
  flex-direction: column;
}

.flex1 {
  flex: 1;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.calendar {
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
}

.calendar .title {
  padding: 10rpx 16rpx 10rpx 20rpx;
  line-height: 60rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #1C2525;
  line-height: 44px;
  letter-spacing:1px;
}

.calendar .title .year-month {
  margin-right: 20rpx;
}

.calendar .title .icon {
  padding: 0 16rpx;
  font-size: 32rpx;
  color: #999;
}

.calendar .title .open {
  background-color: #f6f6f6;
  color: #999;
  font-size: 22rpx;
  line-height: 36rpx;
  border-radius: 18rpx;
  padding: 0 14rpx;
}

.list-open {
  position: relative;
  justify-content: center;
}

.list-open .icon::after {
  content: '';
  position: absolute;
  top: 16rpx;
  right: 60rpx;
  display: block;
  width: 278rpx;
  height: 0rpx;
  border-bottom: 2rpx solid rgba(214, 219, 219, 0.68);
}

.list-open .icon::before {
  content: '';
  position: absolute;
  top: 16rpx;
  left: 60rpx;
  display: block;
  width: 278rpx;
  height: 0rpx;
  border-bottom: 2rpx solid rgba(214, 219, 219, 0.68);
}

.fold {
  transform: rotate(0deg);
}

.unfold {
  transform: rotate(180deg);
}

.calendar .calendar-week {
  line-height: 40rpx;
  padding: 0 25rpx;
  font-size: 28rpx;
  color: #999;
}

.calendar .calendar-week .view {
  width: 100rpx;
  text-align: center;
}

.calendar .calendar-main {
  padding: 18rpx 25rpx 0rpx;
  transition: height 0.3s;
  align-content: flex-start;
  overflow: hidden;
}

.calendar .calendar-main .day {
  position: relative;
  width: 100rpx;
  color: #666;
  text-align: center;
  height: 82rpx;
}

.calendar .calendar-main .day .bg {
  height: 66rpx;
  line-height: 66rpx;
  font-size: 28rpx;
  color: #333;
}

.calendar .calendar-main .day .now {
  width: 66rpx;
  border-radius: 50%;
  text-align: center;
  color: #0EC0B8;
  background: rgba(14, 192, 184, 0.2);
  margin: 0 auto;
}

.calendar .calendar-main .day .select {
  width: 66rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  background: #0EC0B8;
  margin: 0 auto;
}

.calendar .calendar-main .day .spot::after {
  position: absolute;
  content: "";
  display: block;
  width: 8rpx;
  height: 8rpx;
  bottom: 22rpx;
  background: #0EC0B8;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
}

.calendar .calendar-main .day .deep-spot::after {
  position: absolute;
  content: "";
  display: block;
  width: 8rpx;
  height: 8rpx;
  bottom: 22rpx;
  background: #FF7416;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
}

.calendar .calendar-main .day .other-month {
  color: #ccc;
}

.header-wrap .month {
  font-size: 28rpx;
  color: #929797;
  line-height: 40rpx;
}

有关好用的微信小程序日历组件(可滑动,可展开收缩,可标点)的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. ruby - 如果它是标点符号,我怎么能从字符串中删除最后一个字符,在 ruby​​ 中? - 2

    啊,正则表达式有点困惑。我正在尝试删除字符串末尾所有可能的标点符号:ifstr[str.length-1]=='?'||str[str.length-1]=='.'||str[str.length-1]=='!'orstr[str.length-1]==','||str[str.length-1]==';'str.chomp!end我相信有更好的方法来做到这一点。有什么指点吗? 最佳答案 str.sub!(/[?.!,;]?$/,'')[?.!,;]-字符类。匹配这5个字符中的任何一个(注意,。在字符类中并不特殊)?-前一个字符或组

  5. C/C++好用的websocket库 - 2

    IntrductionLibwebsocketsisasimple-to-use,MIT-license,pureClibraryprovidingclientandserverforhttp/1,http/2,websockets,MQTTandotherprotocolsinasecurity-minded,lightweight,configurable,scalableandflexibleway.It’seasytobuildandcross-buildviacmakeandissuitablefortasksfromembeddedRTOSthroughmasscloudservi

  6. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  7. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  8. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  9. Ruby 添加一个日历月 - 2

    我是ruby​​新手,对某些日期函数有疑问。我正在尝试将日历月添加到提供的日期,以便“2002年4月30日”输出“2002年5月31日”。这是我的代码date='30thApr2002'parseDate=Date.parse(date)(parseDate>>1)#Thisreturns2002-05-30也许这不是该函数应有的工作方式,在这种情况下,如果提供的日期是该月的最后一天,我将需要编写一些代码来返回下个月的最后一天?如有任何帮助,我们将不胜感激。 最佳答案 >>只是增加月份并在月份内保持同一天,正如Skeet在评论中指出

  10. 微信小程序切换云环境 - 2

    在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更

随机推荐