WeChat 애플릿 캘린더 구성 요소 개발

요약: WeChat 애플릿 개발 문서 및 도구의 한계로 인해 js 파일은 wxml 파일을 직접 조작할 수 없고 개발자는 dom 작업을 수행할 수 없다는 것을 모두 알고 있으므로 여기서 컴포넌트를 생성할 때 컴포넌트 구조가 먼저 있어야 합니다. 잘 정의되어 있습니다! 즉, wxml 파일에서 먼저 컴포넌트 구조를 정의한 다음 j...

WeChat 애플릿 개발 문서 및 도구의 한계로 인해 js 파일은 wxml 파일을 직접 조작할 수 없고 개발자는 dom 작업을 수행할 수 없다는 것을 모두 알고 있으므로 여기서 컴포넌트를 생성할 때 컴포넌트 구조는 먼저 정의해야합니다! 즉, 먼저 wxml 파일에서 컴포넌트 구조를 정의한 후 데이터를 바인딩하고, js 파일의 데이터를 기반으로 동적 렌더링을 수행합니다.
캘린더 애플릿을 개발할 때(이 사이트에는 두 개의 작은 프로그램도 도입되었습니다. 소스 달력의 코드 데모, 관심 있는 친구는 그것에 대해 배울 수 있습니다:

我们都知道由于微信小程序开发文档和工具的限制，js文件不能直接操作wxml文件，开发者不能进行dom操作，所以在此创建组件必须先把组件结构定义好！也就是说必须在wxml文件中先定义好组件结构，然后再绑定数据，根据js文件中的数据进行动态渲染。
我们在开发日历小程序时（本站也曾经介绍过两篇小程序日历的源码demo，有兴趣的朋友可以了解下：
一款非常NB的日历转换器（阳历-农历）的微信小程序源码demo 和微信小程序：日历demo下载）就会发现，这里的日历由两部分组成，一是上部红色，而是下面主要日历部分。上部直接绑定数据。
下部分实现方式：
第一行星期的显示，此处为固定显示，无需js操作。然后下面的日历body部分，由于每周七天，绑定的数据可根据此生成，根据当前日期生成每行的数据。
日期生成：
取当前月第一天，得到星期，计算上月在第一行的日期，如下图红色框中的部分：


以当前日期为例，本月一号位周六，当前月份可显示上个月6天；计算当前月(或指定月份)最后一天的星期天数，取得下个月可在本月显示日期。最后合并本月日期，并按每行七日排列，即可生成当前月分的日历数据。以下贴出代码：
wxml代码：

<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? &#39;&#39; : &#39;placeholder&#39;}} {{day.date==canlender.date?&#39;date-current&#39;: &#39;&#39;}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>

js代码：

<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? &#39;&#39; : &#39;placeholder&#39;}} {{day.date==canlender.date?&#39;date-current&#39;: &#39;&#39;}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>

매우 NB 달력 변환기(양력-음력) WeChat 애플릿 소스 코드 데모 및 WeChat 애플릿: 달력 데모 다운로드 ) 여기서 달력은 두 부분으로 구성되어 있음을 알 수 있습니다. 하나는 상단 빨간색 부분이고 하단 기본 달력 부분입니다. 상단 부분은 데이터를 직접 바인딩합니다.
구현의 다음 부분:
일의 첫 번째 행 표시는 여기에서 고정된 표시이며 js 작업이 필요하지 않습니다. 그러면 아래 달력 본문 부분에서는 일주일이 7일이므로 이를 기준으로 바운드 데이터를 생성할 수 있고, 각 행에 대한 데이터는 현재 날짜를 기준으로 생성됩니다.
날짜 생성:
아래 빨간색 상자에 표시된 대로 이번 달의 첫 번째 날, 주를 가져오고 이전 달의 첫 번째 줄에서 날짜를 계산합니다.


wxml 코드:rrreeejs 코드 :rrreee

위 내용은 WeChat 애플릿 캘린더 구성 요소 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!