一键搞定!小程序调用日历本该如此简单

作者:蔡炜桀

在开发小程序的过程中,往往会遇到类似签到、打卡、记事、待办、提醒等相关主题的需求。而这类需求往往与时间强相关,且时间粒度往往是在「天」上,这就需要有一个组件来呈现以天为单位的展示需求,于是我们自然而然地想到了「日历」。

日历具有通用性、一次开发免维护、无需运营、无需网络连接、无需用户授权等优点,满足小程序插件「轻巧普适」的要求,很适合开发实现。

「极点日历」小程序插件各部分属性如下图:

插件配置

目前「极点日历」插件信息:

AppID

wx92c68dae5a8bb046

版本号

1.1.0

那么具体如何操作呢?下面为大家简单介绍一下:

1. 搜索插件

在微信小程序管理后台——设置——第三方服务,按 AppID(wx92c68dae5a8bb046)搜索到该插件并申请授权。

2. 引入声明

在要使用该插件的小程序 app.json 文件中引入插件声明。

"plugins": {
    "calendar": {
        "version": "1.1.0",
        "provider": "wx92c68dae5a8bb046"
    }
}

3. 添加配置

在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}

4. 嵌入插件

在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。

<calendar />

添加插件后效果如图:

默认用法,将具备以下样式特点:

  1. 显示当前月份的日历;
  2. 显示日历标题、显示上下月按钮;
  3. 显示周标题,周标题默认为 en 类型,即英文字母;
  4. 不显示非当前月的日期;
  5. 不显示农历;
  6. 插件占据文档流的整块宽度,即 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 可供参考。

插件开发者招募

知晓程序推出首个「插件市场」,免费为开发者提供插件的展示与交易服务,让优秀的插件快速对接用户。

目前,首批入驻开发者 100 人计划持续招募中!成为受邀开发者的条件只有一个:了解并熟悉小程序开发!

1. 如果你是对插件有兴趣的开发者,请添加晓小云(ID:minsupport3),加入插件开发讨论群。

2. 如果你已经成功开发插件,请用电脑访问 https://minapp.com/ ,点击顶部「插件市场」按钮,上传并提交你的小程序插件信息。

相关阅读

/ 知晓程序

终于过审!首批小程序插件诞生了

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2018-04-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

看大神如何玩转微信小程序日历插件?

1173
来自专栏姬小光

姬小光前端小讲堂【第006期】

在前几期的成果中,我们做出来的页面只有一些“静态”的内容,只能给用户大眼瞪小眼的看,那么别人家的网页上那些飞来飞去的,若隐若现的东西都是咋搞的呢?

632
来自专栏Nian糕的私人厨房

WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

533
来自专栏CSDN技术头条

React开发实践:如何做出好用的Switch组件

前言 HTML5 将 Web 开发者的战场从传统的 PC 端带到了移动端。然而移动端交互的核心在于手势和滑动,如果只是将 PC 端的点击体验简单地移植到移动端,...

2069
来自专栏知晓程序

如何从零开始,做一个跑步小程序?| 实战案例

1144
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(四)

本站微信小程序版“DeveWork极客”在中文WP 圈子可谓是一直被模仿,从未被超越。如今快速迭代,写作本文的现在是1.6 版本。作为“WordPress 开发...

2216
来自专栏Web 开发

Design For Mobile Web

上面这段代码,源自Google的Best Practices for Web Apps,但在实际使用过程中,并不能完全适应iOS、Android平台,至于WP,...

770
来自专栏娱乐心理测试

小程序开发者调试工具使用说明

微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设...

1453
来自专栏互联网杂技

HTML head 头标签 总结

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

2757
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(三)

本文是“WordPress 开发微信小程序”系列的第三篇,本文记录的是“DeveWork极客”小程序1.2 版本的开发要点。建议先看完第一篇、第二篇再来阅读本文...

21310

扫码关注云+社区