接上文:微信小程序开发04-打造自己的UI库

github地址:https://github.com/yexiaochai/wxdemo

我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可:

 let View = require('behavior-view');
const util = require('../utils/util.js'); // const dateUtil = util.dateUtil; Component({
behaviors: [
View
],
properties: { },
data: {
weekDayArr: ['日', '一', '二', '三', '四', '五', '六'],
displayMonthNum: 1, //当前显示的时间
displayTime: null,
//可以选择的最早时间
startTime: null,
//最晚时间
endTime: null, //当前时间,有时候是读取服务器端
curTime: new Date() }, attached: function () {
//console.log(this)
},
methods: { }
})
 <wxs module="dateUtil">
var isDate = function(date) {
return date && date.getMonth;
}; var isLeapYear = function(year) {
//传入为时间格式需要处理
if (isDate(year)) year = year.getFullYear()
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return true;
return false;
}; var getDaysOfMonth = function(date) {
var month = date.getMonth(); //注意此处月份要加1,所以我们要减一
var year = date.getFullYear();
return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
} var getBeginDayOfMouth = function(date) {
var month = date.getMonth();
var year = date.getFullYear();
var d = getDate(year, month, 1);
return d.getDay();
} var getDisplayInfo = function(date) {
if (!isDate(date)) {
date = getDate(date)
}
var year = date.getFullYear(); var month = date.getMonth();
var d = getDate(year, month); //这个月一共多少天
var days = getDaysOfMonth(d); //这个月是星期几开始的
var beginWeek = getBeginDayOfMouth(d); /*
console.log('info',JSON.stringify( {
year: year,
month: month,
days: days,
beginWeek: beginWeek
}));
*/ return {
year: year,
month: month,
days: days,
beginWeek: beginWeek
}
} module.exports = {
getDipalyInfo: getDisplayInfo
}
</wxs> <view class="cm-calendar">
<view class="cm-calendar-hd ">
<block wx:for="{{weekDayArr}}">
<view class="item">{{item}}</view>
</block>
</view>
<view class="cm-calendar-bd ">
<view class="cm-month ">
</view>
<view class="cm-day-list"> <block wx:for="{{dateUtil.getDipalyInfo(curTime).days + dateUtil.getDipalyInfo(curTime).beginWeek}}" wx:for-index="index"> <view wx:if="{{index < dateUtil.getDipalyInfo(curTime).beginWeek }}" class="item active"></view>
<view wx:else class="item">{{index + 1 - dateUtil.getDipalyInfo(curTime).beginWeek}}</view> </block> <view class=" active cm-item--disabled " data-cndate="" data-date=""> </view>
</view>
</view>
</view>

这个是非常简陋的日历雏形,在代码过程中有以下几点比较痛苦:

① WXML与js间应该只有数据传递,根本不能传递方法,应该是两个webview的通信,而日历组件这里在WXML层由不得不写一点逻辑

② 本来在WXML中写逻辑已经不太对了,而我们引入的WXS,使用与HTML中的js片段也有很大的不同

这些问题,一度让代码变得复杂,而可以看到一个简单的组件,还没有复杂功能,涉及到的文件都太多了,这里是调用层:

<ui-calendar  is-show="" ></ui-calendar>

事实上,我们以上数据根本不应该写到data里面,应该属性传递,我们这里先为了简单实现功能,接下来我们继续完善这个组件,具体代码请看git:

这个日历组件应该是在小程序中写的最复杂的组件了,尤其是很多逻辑判断的代码都放在了WXML里面,根据之前的了解,小程序渲染在一个webview中,js逻辑在一个webview中,他这样做的目的可能是想让性能更好,但是我这里代码写起来事实上是有点痛苦的,我们这里开始组装组件,将数据配置放到属性上,开始组装abstract-page,事实上我认为日历这种非全局组件本来不应该放到基类中:

① 因为Component提供的是一个标签,而且涉及的文件很多,加上继承关系很不好管理

② 因为日历组件事实上是一个标签,所以我们会有一个引入的基础WXML,一个使用的js,完全独立一个文件更加复杂

③ 本来小程序或者复杂的页面都应该组件化开发,所以我们简历一个页面级别的组件,分散到对应的页面中

小程序像是给灵活的HTML&JS戴上了枷锁,只允许在其允许的范围灵活,我们这里尝试对页面进行再拆分:

 <import src="./mod.searchbox.wxml" />
<view>
<template is="searchbox" />
</view>
<include src="./mod/calendar.wxml"/>
<include src="../../utils/abstract-page.wxml"/>
<ui-calendar displayTime="{{CalendarDisplayTime}}"
selectedDate="{{CalendarSelectedDate}}"
displayMonthNum="{{CalendarDisplayMonthNum}}"
is-show="{{isCalendarShow}}" ></ui-calendar>
 /*
事实上一个mod就只是一个对象,只不过为了方便拆分,将对象分拆成一个个的mod
一个mod对应一个wxml,但是共享外部的css,暂时如此设计
所有日历模块的需求全部再此实现
*/
module.exports = {
q: 1,
ddd: function(){}, data: {
isCalendarShow: '',
CalendarDisplayMonthNum: 2,
CalendarDisplayTime: new Date(),
CalendarSelectedDate: null
}
}

核心代码还是在abstract-page里面:

   //pageData为页面级别数据,mod为模块数据,要求一定不能重复
initPage(pageData, mod) {
//debugger;
let _pageData = {};
let key, value, k, v; //为页面动态添加操作组件的方法
Object.assign(_pageData, this.getPageFuncs(), pageData); //生成真实的页面数据
_pageData.data = {};
Object.assign(_pageData.data, this.getPageData(), pageData.data || {}); for( key in mod) {
value = mod[key];
for(k in value) {
v = value[k];
if(k === 'data') {
Object.assign(_pageData.data, v);
} else {
_pageData[k] = v;
}
}
} console.log(_pageData);
return _pageData;
}

这里再改造一下,我们基本的日历组件便完成了80%了:

 /*
事实上一个mod就只是一个对象,只不过为了方便拆分,将对象分拆成一个个的mod
一个mod对应一个wxml,但是共享外部的css,暂时如此设计
所有日历模块的需求全部再此实现
*/
module.exports = {
q: 1,
ddd: function(){},
onCalendarDayTap: function (e) {
let data = e.detail;
var date = new Date(data.year, data.month, data.day);
console.log(date)
this.setData({
calendarSelectedDate: date
});
},
data: {
isCalendarShow: '',
calendarDisplayMonthNum: 2,
calendarDisplayTime: new Date(),
calendarSelectedDate: null
}
}

至此,我们组件相关课题基本结束,接下来,我们开始我们的业务代码

微信小程序开发05-日历组件的实现的更多相关文章

  1. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  2. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  3. 微信小程序开发 [05] wx.request发送请求和妹纸图

    1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...

  4. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  5. 微信小程序开发之日期组件

    一: wxml: <view class="navbarlift" style="background:#ffffff;padding:20rpx"> ...

  6. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  7. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  8. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  9. 微信小程序开发之模板消息

    一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性r ...

随机推荐

  1. golang 并发模式笔记

    1.并发并不是并行,前者是优先对时间片的抢占,后者是真多核. go中多线程时直接要求并行的方法是: 亦不可滥用,CPU密集型,并发度很高的场景适用. 2.go起的协程 3. function that ...

  2. Python笔记 in 机器学习

    Python3的函数实在太多了,在机器学习的过程中,总会一不留神就学到一个python的高效率用法,怕自己会忘记,所以更新在这篇随笔中. 更新至:2018.5.23 字符串str的前缀或者后缀识别 s ...

  3. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  4. jquery实现登录加密的几种方法以及cookie存放加密/解密

    本篇文章的所有操作都是在jsp页面上进行的,完全与后台分离 part 1:加密方式 这个加密方式网上基本都有很多人总结,我在此也就抛砖引玉一下: 1.base64加密 在页面中引入base64.js文 ...

  5. HashMap 实现及原理

    1.为什么用HashMap? HashMap是一个散列桶(数组和链表),它存储的内容是键值对(key-value)映射HashMap采用了数组和链表的数据结构,能在查询和修改方便继承了数组的线性查找和 ...

  6. 命令行中的 vi 模式

    命令行中修改已经输入的命令比较麻烦,如果你不知道一些快捷键的话,只能使用方向键一个一个字符地移动到目标位置进行修改,对于比较复杂且过长的命令来说,效率不高. 以下信息来自 bash 的 man 页面: ...

  7. 如何通过免费开源的ERP Odoo打造企业全员营销整体解决方案

    应用场景的背景故事 在一些二级城市,往往线索的来源是通过企业当地口碑积累.熟人转介绍等线下的方式为主,利用互联网的模式往往很难奏效,企业面临的第一个问题就是如何把握线索真实的来源介绍的问题.在这个问题 ...

  8. Git使用详细教程(8):Git分支

    目录 创建分支 查看分支 切换分支 删除分支 分支合并 探寻分支本质 创建分支 当我们使用git init projectName命令的时候,Git就会默认帮我们创建一个分支,名字叫做master. ...

  9. Docker 创建 Crowd3.3.2 以及打通 Jira Software7.12.3和Confluence6.12.2 SSO 单点登录

    目录 目录 1.介绍 1.1.什么是Crowd? 2.Crowd 的官网在哪里? 3.如何下载安装? 4.对 Crowd 进行配置 4.1.破解 Crowd 第一步 4.2.破解 Crowd 第二步, ...

  10. windows本地安全策略实验-远程桌面连接锁定账户

    windows本地安全策略实验-远程桌面连接锁定账户 实验环境: 服务端:Win7-1:10.10.10.136,开启远程桌面服务 客户端:win7-2:10.10.10.153 确保客户端和服务端能 ...