|
導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一... 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。 摘要: 我們都知道由于微信小程序開發文檔和工具的限制，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? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{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? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{day.date}}</view>
</block>
</view>
</block>
</view>
</view>
|
以上就是利用組件開發微信小程序日歷的詳細方法的詳細內容，更多請關注php中文網其它相關文章！
小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。
| 
