Detaillierte Methode zur Verwendung von Komponenten zur Entwicklung des WeChat-Applet-Kalenders-Mini-Programmentwicklung-php.cn

Detaillierte Methode zur Verwendung von Komponenten zur Entwicklung des WeChat-Applet-Kalenders

巴扎黑

Freigeben： 2018-05-10 15:05:14

Original

5177 Leute haben es durchsucht

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äß der Klasse 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 Wenn Sie hier eine Komponente erstellen, muss die Komponente zunächst Die Struktur ist klar definiert! 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.

Wir Bei der Entwicklung des Kalender-Applets (diese Website hat auch zwei Quellcode-Demos des Applet-Kalenders vorgestellt, können interessierte Freunde mehr darüber erfahren:

我们都知道由于微信小程序开发文档和工具的限制，js文件不能直接操作wxml文件，开发者不能进行dom操作，所以在此创建组件必须先把组件结构定义好！也就是说必须在wxml文件中先定义好组件结构，然后再绑定数据，根据js文件中的数据进行动态渲染。

我们在开发日历小程序时（本站也曾经介绍过两篇小程序日历的源码demo，有兴趣的朋友可以了解下：
一款非常NB的日历转换器（阳历-农历）的微信小程序源码demo 和微信小程序：日历demo下载）就会发现，这里的日历由两部分组成，一是上部红色，而是下面主要日历部分。上部直接绑定数据。
下部分实现方式：
第一行星期的显示，此处为固定显示，无需js操作。然后下面的日历body部分，由于每周七天，绑定的数据可根据此生成，根据当前日期生成每行的数据。
日期生成：
取当前月第一天，得到星期，计算上月在第一行的日期，如下图红色框中的部分：

Detaillierte Methode zur Verwendung von Komponenten zur Entwicklung des WeChat-Applet-Kalenders

Detaillierte Methode zur Verwendung von Komponenten zur Entwicklung des WeChat-Applet-Kalenders

以当前日期为例，本月一号位周六，当前月份可显示上个月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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Ein sehr NB-Kalenderkonverter ( (Gregorianischer Kalender – Mondkalender ) WeChat Mini-Programm-Quellcode-Demo und WeChat Mini-Programm: Kalender-Demo-Download) Sie werden feststellen, dass der Kalender hier aus zwei Teilen besteht, einem ist der obere Teil in Rot und der untere 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:
Detaillierte Methode zur Verwendung von Komponenten zur Entwicklung des WeChat-Applet-Kalenders

WXML-Code:JS-Code:

Das obige ist der detaillierte Inhalt vonDetaillierte Methode zur Verwendung von Komponenten zur Entwicklung des WeChat-Applet-Kalenders. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!