Développement de composants de calendrier d'applet WeChat

Résumé : Nous savons tous qu'en raison des limitations des documents et des outils de développement d'applets WeChat, les fichiers js ne peuvent pas exploiter directement les fichiers wxml et les développeurs ne peuvent pas effectuer d'opérations dom, donc lors de la création d'un composant ici, le la structure des composants doit d'abord être bien définie ! C'est-à-dire que la structure des composants doit d'abord être définie dans le fichier wxml, puis les données sont liées selon le style j...

Nous savons tous qu'en raison des limitations des documents et outils de développement d'applets WeChat, les fichiers js ne peuvent pas exploiter directement les fichiers wxml et les développeurs ne peuvent pas effectuer d'opérations dom, donc lors de la création d'un composant ici, la structure du composant doit être défini en premier ! C'est-à-dire que la structure des composants doit d'abord être définie dans le fichier wxml, puis les données sont liées et le rendu dynamique est effectué en fonction des données du fichier js.
Lorsque nous développions l'applet de calendrier (ce site a également introduit deux petits programmes La source Démo de code du calendrier, les amis intéressés peuvent en apprendre davantage :

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

Un convertisseur de calendrier très NB (calendrier solaire-calendrier lunaire) Démo du code source de l'applet WeChat et applet WeChat : démo du calendrier Télécharger ) et vous constaterez que le calendrier ici se compose de deux parties, l'une est la partie supérieure rouge et la partie inférieure principale du calendrier. La partie supérieure lie directement les données.
La partie suivante de l'implémentation :
L'affichage de la première ligne de jours est ici un affichage fixe, aucune opération js n'est requise. Ensuite, dans la partie du corps du calendrier ci-dessous, puisqu'il y a sept jours dans une semaine, les données liées peuvent être générées sur cette base et les données de chaque ligne sont générées en fonction de la date actuelle.
Génération de date :
Obtenez le premier jour du mois en cours, obtenez la semaine et calculez la date sur la première ligne du mois précédent, comme indiqué dans l'encadré rouge ci-dessous :


code wxml :code js :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!