|
導讀微信小程序,簡稱小程序,英文名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中文網其它相關文章!
小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。
|