微信小程式日曆元件開發

摘要: 我們都知道由於微信小程式開發文檔和工具的限制，js檔案不能直接操作wxml文件，開發者不能進行dom操作，所以在此創建元件必須先把元件結構定義好！也就是說必須在wxml檔案中先定義好元件結構，然後再綁定數據，根據j ...

#

##我們都知道由於微信小程式開發文檔和工具的限制，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>

以上是微信小程式日曆元件開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！