「极点日历」小程序插件
上期,我们在《「wxParser」小程序插件》一文中介绍了知晓云团队出品的「wxParser」小程序插件,对其意义、作用以及应用作出了说明。而在此之前,我们还介绍过「腾讯地图」、「腾讯视频」、「医院 LBS 位置服务」、「微信同声传译」插件,,有兴趣了解的读者可进入《微信极客WeGeek》微信公众号底部菜单「极客干货 - 小程序插件」浏览。
今天为大家推荐的「极点日历」小程序插件,支持1900 年 1 月 ~ 2099 年 12 月这两百年间的公历和农历显示,适用范围很广,并且可以进行个性化定制。
「极点日历」插件能做什么?
日历具有通用性、一次开发免维护、无需运营、无需网络连接、无需用户授权等优点,满足小程序插件「轻巧普适」的要求,很适合开发实现。
「极点日历」小程序插件在满足基础功能的前提下,提供了丰富的可配置属性,包括日期的显示方式、选择范围、是否显示农历等,可自定义来适配不同的使用场景。
插件各部分属性如下图:
如何接入「极点日历」小程序插件?
- 申请使用插件。在「小程序管理后台 - 设置 - 第三方服务 - 插件管理」中查找插件名称 「极点日历」,并申请使用。
- 引入插件代码。version 表示目前插件版本为 1.1.3,provider 为该插件的 AppID,而 sdkPlugin 为自定义的插件名称。
"plugins": {"calendar": {"version": "1.1.3","provider": "wx92c68dae5a8bb046"}
}
复制代码
- 在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:
{"usingComponents": {"calendar": "plugin://calendar/calendar"}}
复制代码
4.嵌入插件。在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。
<calendar />
复制代码
在以上默认用法中,将具备以下样式特点:
· 显示当前月份的日历;
· 显示日历标题、显示上下月按钮;
· 显示周标题,周标题默认为 en 类型,即英文字母;
· 不显示非当前月的日期;
· 不显示农历;
· 插件占据文档流的整块宽度,即 width:100%。
以上样式均可参考「极点日历」的 GitHub 属性文档更改。
添加插件后效果如图:
自定义插件样式
日历插件本身是无背景色(透明)的,日历标题和周标题字体颜色默认为黑色加粗,当月日期默认字体颜色为 #4a4f74,非当前月日期字体颜色为 #c3c6d1。我们通过一个例子来说明如何自定义插件的样式。
1. 修改日历背景颜色
calendar-style 样式位插组件的根节点。假设要更改日历的背景色,除了插件件的父级容器设置背景色外,也可以通过该样式类进行配置来达到相应的效果。
首先在 WXML 文件里指定 calendar-style 的外部样式类为 calendar:
<calendar calendar-style="calendar" />
复制代码
在 WXSS 文件新增 background-color 属性更改背景颜等,效果如下图:
.calendar { background-color:white; /*背景色为白色*/padding-top: 10px; /*上内边距为10px*/border-radius: 15px; /*添加边框圆角*/}
复制代码
2. 修改日历标题样式
header-style 样式类位于组件的日历标题。对该组件进行配置,可以改变当前年月,上下月按钮的外观和背景。
在上面例子的基础上,我们在 WXML 文件中新增代码:
<calendar calendar-style="calendar" header-style="header" />
复制代码
在 WXSS 文件中添加 header 样式:
.header { font-size: large; color: #59518d;
}
复制代码
3. 修改日历主面板 board-style 样式类位于日历组件的主面板,包含了周标题和日期部分。对该组件进行配置,可以改变周标题的样式和日期面板的样式。
紧跟上面的例子,我们对 WXML 文件加多一行代码。
<calendar calendar-style="calendar" header-style="header" board-style="board" />
复制代码
在 WXSS 文件中新增 board 样式
.board { color: #c7cbe2; font-weight: bold;}
复制代码
4. 禁用上下月按钮,显示更多的日期 在 WXML 文件中,加入以下配置,可以使日历不能翻页,同时将次月的日期也显示出来。
<calendar calendar-style="calendar" header-style="header" board-style="board" next="{{false}}" prev="{{false}}" show-more-days="{{true}}" />
5. 添加日期样式
日期的样式,可以通过对属性 days-color 进行配置,在 JS 文件中,添加以下数组,对日期样式进行定义。
let days_style = new Array;for (let i = 1; i <= days_count; i++) { const date = new Date(this.data.year, this.data.month - 1, i); if (date.getDay() == 0) {days_style.push({month: 'current', day: i, color: '#f488cd'}); } else {days_style.push({month: 'current', day: i, color: '#a18ada'});}
}
days_style.push({month: 'current', day: 12, color: 'white', background: '#b49eeb'},{month: 'current', day: 17, color: 'white', background: '#f5a8f0'},{month: 'current', day :20, color: 'white', background: '#aad4f5'},{month: 'current', day :25, color: 'white', background: '#84e7d0'},
);
复制代码
在 WXML 文件中,加入以下配置,即可完成整个 demo 的制作。
<calendar calendar-style="calendar" header-style="header" board-style="board" next="{{false}}" prev="{{false}}" show-more-days="{{true}}" days-color="{{days_style}}" />
效果如下:
当然,除了外部样式修改,每一个插件内点击事件都添加了监听,使用者可自行扩展。
「极点日历插件」适用范围很广,可进行充分的个性化定制。目前「全民单词」小程序已在首页应用,背景使用了渐变色,具体实现代码放在 GitHub 中实时更新。
除此之外,我们还为你准备了几款配色 demo 可供参考。
如果你想了解更多「极点日历」小程序插件详情,欢迎访问开发者社区插件版块相应页面(建议电脑访问):
? developers.weixin.qq.com/community/d…
了解更多微信小程序开发者内容,欢迎扫码关注微信公众号-《微信极客WeGeek》
「极点日历」小程序插件相关推荐
- 「微信同声传译」小程序插件:快速实现语音转文字、文本翻译、语音合成等能力...
上期,我们在<「医院 LBS 位置服务」插件:输出LBS室内位置能力,为改善就医服务提供解决方案>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为 ...
- 「初探」小程序插件功能
「初探」小程序插件功能 3月13日,小程序发布了新功能-- 小程序插件.即,在小程序基础库 1.9.6 版本上,允许开发者开发插件,同时将插件提供给其它小程序使用.微信小程序在构建自己生态的征程上,又 ...
- 「微信同声传译」小程序插件
上期,我们在<「医院 LBS 位置服务」小程序插件>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为大家推荐的插件是「微信同声传译」,如果你想在小 ...
- 生日快乐程序_「秒福」小程序:送祝福,2020我们不一样
新年将至,大家是否感觉到一丝新年的气息,感受到新的一年到来的喜悦呢?过年最少不了的一件事....当然是送祝福! 新的一年让我们不忘初心,继续前行.今天小编教大家一波送祝福的新姿势,告别群发祝福. [秒 ...
- 「腾讯地图」微信小程序插件:提供简单的路线多方案规划服务
上期,我们在<「腾讯视频」微信小程序插件介绍>一文中介绍了「腾讯视频」小程序插件的意义.使用场景以及使用方法. 今天我们会与大家分享一款同样优秀的小程序插件--「腾讯地图」插件,从使用场景 ...
- 「腾讯视频」微信小程序插件介绍
上期,我们在<从原理到应用,一文带你了解小程序插件能力>一文中介绍了小程序插件的意义.作用以及应用.今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的 ...
- php微信wifi扫码连接不上,微信「扫码连WiFi」小程序,教你不用密码一键连Wi-Fi!...
原标题:微信「扫码连WiFi」小程序,教你不用密码一键连Wi-Fi! 烦恼!你有过的烦恼是什么? 你最近的烦恼是什么? 你有没有在外面支付的时候遇到一个麻烦? 你本来连接好好的Wi-Fi,突然在你支付 ...
- 「小程序JAVA实战」 小程序远程调试(九)
在开发javaweb应用的时候,如果遇见一个问题都会调试,debug,在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js,小程序可以吗?肯定是可以的!小程序的调试也可以在手机端进行远程调试.源码 ...
- 从原理到应用,一文带你了解小程序插件能力
3 月 13 日,小程序插件功能上线:8 月 底,在时隔半年后,为进一步推广插件功能,微信在开发者社区上线了插件版块. 小程序插件是可以被开发者添加到小程序内直接使用的,能为用户提供具体服务的功能组件 ...
最新文章
- 编程之美 1.12 nim(2)
- wxWidgets:显示和测试 wxDC 功能
- android 价格排序筛选页面,Android应用开发之基于Popupwindow实现的筛选房源信息等相关的可自由排序控件...
- awk输出最后一列的命令
- 在Angular应用里使用Redux
- Java中转发(Forward)和重定向(Redirect)的区别
- java 类变量 赋值_Java 中类变量,实例变量,局部变量的赋值
- 调查了 2 万多名 Python 开发者,有了这些发现!
- 高等代数期末考试题库及答案_高等代数3学时试题题目及答案,课程2021最新期末考试题库,章节测验答案...
- Java基础编程机试题
- 我没有时间 I Don't Have Time?
- 深海迷航坐标传送代码_深海迷航代码大全_深海迷航作弊码汇总及代码使用教程_咖绿茵手游站...
- JS短信接口代码示例
- vue项目如何部署?布署服务器后刷新404如何解决?
- echarts-特殊需求
- 1,10-菲啰啉是氧化还原指示剂|双齿配体各类反应
- ESP32学习笔记(22)——ADC接口使用
- Oracle数据库的启停
- C语言编写学生成绩信息管理系统
- iphone拍照的历史顽固问题-鬼影