Entwicklung der WeChat-Applet-Kalenderkomponente

Zusammenfassung: Wir alle wissen, dass JS-Dateien aufgrund der Einschränkungen der WeChat-Applet-Entwicklungsdokumente und -Tools WXML-Dateien nicht direkt bedienen können und Entwickler keine Dom-Vorgänge ausführen können Komponentenstruktur muss zuerst gut definiert werden! Das heißt, die Komponentenstruktur muss zuerst in der WXML-Datei definiert werden und dann werden die Daten gemäß j...

Wir alle wissen, dass JS-Dateien aufgrund der Einschränkungen der WeChat-Applet-Entwicklungsdokumente und -Tools WXML-Dateien nicht direkt bedienen können und Entwickler keine DOM-Operationen ausführen können. Daher ist hier beim Erstellen einer Komponente die Komponentenstruktur wichtig muss zuerst definiert werden! Das heißt, die Komponentenstruktur muss zuerst in der WXML-Datei definiert werden, dann werden die Daten gebunden und das dynamische Rendering wird basierend auf den Daten in der JS-Datei durchgeführt.
Als wir das Kalender-Applet entwickelten (auf dieser Website wurden auch zwei kleine Programme vorgestellt). Die Quelle Code-Demo des Kalenders, Freunde, die interessiert sind, können mehr darüber erfahren:

我们都知道由于微信小程序开发文档和工具的限制，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>

Ein sehr nützlicher Kalenderkonverter (Sonnenkalender-Mondkalender). WeChat-Applet-Quellcode-Demo und WeChat-Applet: Kalender-Demo herunterladen ) und Sie werden feststellen, dass der Kalender hier aus zwei Teilen besteht, einem aus dem oberen roten Teil und dem unteren Hauptkalenderteil. Der obere Teil bindet Daten direkt.
Der folgende Teil der Implementierung:
Die Anzeige der ersten Zeile der Tage ist hier eine feste Anzeige, es ist keine js-Operation erforderlich. Da die Woche sieben Tage hat, können dann im Kalenderhauptteil unten die gebundenen Daten auf dieser Grundlage generiert werden, und die Daten für jede Zeile werden auf der Grundlage des aktuellen Datums generiert.
Datumsgenerierung:
Erhalten Sie den ersten Tag des aktuellen Monats, rufen Sie die Woche ab und berechnen Sie das Datum in der ersten Zeile des vorherigen Monats, wie im roten Feld unten gezeigt:


WXML-Code:JS-Code:

Das obige ist der detaillierte Inhalt vonEntwicklung der WeChat-Applet-Kalenderkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!