本篇文章手把手帶大家開發(fā)一個uni-app日歷插件，介紹下一款日歷插件是如何從開發(fā)到發(fā)布的，希望對大家有所幫助！

相信我們在開發(fā)各類小程序或者H5，甚至APP時，會把uni-app作為一個技術(shù)選型，其優(yōu)點在于一鍵打包多端運行，較為強大的跨平臺的性能。但是，只要開發(fā)就免不了使用插件，所以Dcloud為了方便開發(fā)者同時也為注入活力，開放了uni的插件市場。從此，我們可以很方便的使用其中的一些第三方插件來滿足我們要開發(fā)的一些業(yè)務(wù)需求了。但你知道怎么制作一款uni的插件嗎？它又是如何發(fā)布到插件商城里的嗎？

介紹

開發(fā)過微信小程序的朋友或許知道，它的主包限制成2M，我們在插件商城挑選插件時，其實還是要斟酌的，盡可能使用更輕量級的，使用起來更方便的。最近有個需求，頁面中出現(xiàn)了一個日歷，日歷的功能很簡單就是切換月份，后端一些特殊日期數(shù)據(jù)能用顏色標記一下即可。但引入的ui庫的日歷又有點大，借此機會，本期就按照需求特制了一款輕量級的日歷插件進行分享，看看它是如何開發(fā)出來并發(fā)布到插件商城上面去的。

讓我們先來看看發(fā)布使用后的效果吧：

開發(fā)

創(chuàng)建文件

我們先打開 HBuilder X ，創(chuàng)建一個 uni-app 的項目，在里面創(chuàng)建一個名叫 uni_modules 的文件夾。

然后 ?uni_modules 上點擊右鍵，里面選擇新建 ?uni_modules插件 ，然會出現(xiàn)一個彈框要求你對插件起名。

起名其實可以隨意，最好語義化強一些還要帶點自己的特色，比如，這款日歷插件我起名叫 ml-calendar ，咳咳，大致意思就是 jsmask-light-calendar，也就是jsmask的輕量級日歷，見笑了。就這樣，點擊創(chuàng)建，就會生成好一個插件結(jié)構(gòu)，我們就會在這里面寫關(guān)于這個插件的所有邏輯。

還沒結(jié)束，我們還要在里面創(chuàng)建一個index.js的文件，里面寫入：

import?mlCalendar?from?"./components/ml-calendar/ml-calendar"
export?default?mlCalendar

因為我們只涉及到一個ui組件，所以 export default直接指到這個組件上就好了。這一步很關(guān)鍵，因為如果不寫他的話，在引用這款插件的時候默認是找不到這個插件的，會報錯查找失敗。

依賴引入

因為本次需要快速開發(fā)出一款日歷來，所以免不了出現(xiàn)很多時間形式的判斷和驗證，比如，如果日歷是當天就不會顯示阿拉伯數(shù)字了會直接顯示漢字今日，所以生成的時候就要判斷當前系統(tǒng)時間和日期是不是同一天上。所以，為了方便使用了 dayjs ，相信作為前端開發(fā)者沒有不知道它的大名吧，它是一款極其輕量的時間庫，當然你也可以自己把用到的手寫出來，這樣體積會更小，但這里為了方便和更多擴展可能就引入進來了。

這里的 dayjs 文件 ，為了省事，我是從node安裝后的包里拷貝出來的：

現(xiàn)在就可以在 vue 文件中引入使用它了，當然，我這里還建了個libs文件夾專門來存儲第三方庫文件的。

import?dayjs?from?'../../libs/dayjs.js'

傳入?yún)?shù)

我們先來看看要實現(xiàn)的界面圖：

export?default?{
????name:?"ml-calendar",
????props:?{
????????value:?{
????????????type:?[Number,?String,?Date],
????????????default:?""
????????},
????????range:?{
????????????type:?Array,
????????????default:?()?=>?["2021-01",?""]
????????},
????????rows:?{
????????????type:?Array,
????????????default:?()?=>?[]
????????},
????????//?...
????},
????//?...
}

我們需要提前想好可能會傳來什么值，會影響這個日歷的生成，首先，肯定要知道需要哪年哪月的數(shù)據(jù)，value 這里可以傳入多種類型然后再讓dayjs處理出來，得到統(tǒng)一的日期格式，默認傳空字符串，意思就是當月。畢竟，知道年份月份才能得到當月的天數(shù)生成周對應(yīng)的日么。

range 代表時間范圍，可以選擇上圖的左右箭頭對應(yīng)的上一個月和下一個月，月份不能超出范圍。

而 rows 代表著你傳入日期對應(yīng)的標識色，如 ：

let?rows?=?[{
????date:?"2022-5-21",
????color:?"#5F8BFB"
},?{
????date:?"2022-5-24",
????color:?"#FBA75F"
},?{
????date:?"2022-5-26",
????color:?"#FBA75F"
}]

接下來，我們就圍繞著這些參數(shù)去完成這個日歷編寫。

遍歷日期

export?default?{
????name:?"ml-calendar",
????data()?{
????????return?{
????????????year:?"",
????????????month:?"",
????????????date:?[],
????????????now:?"",
????????????first:?dayjs(this.value).format("YYYY-MM")
????????}
????},
????methods:?{
????????render()?{
????????????this.date.length?=?0;
????????????this.year?=?dayjs(this.first).year();
????????????this.month?=?dayjs(this.first).month()?+?1;
????????????this.now?=?dayjs().format("YYYY-MM-DD");

????????????let?days?=?[...new?Array(dayjs(this.first).daysInMonth()).keys()].map(i?=>?{
????????????????let?n?=?i?+?1;
????????????????let?text?=?n?< 10 ? "0" + n : n;
                let date = `${this.first}-${text}`;
                let now = !!(dayjs(date).diff(this.now, &#39;day&#39;) === 0);
                let color = "";
                let obj = this.rows.find(item =>?dayjs(date).diff(item.date,?'day')?===?0);
????????????????if?(obj)?{
????????????????????color?=?obj.color
????????????????}
????????????????return?{
????????????????????text,
????????????????????date,
????????????????????color,
????????????????????now,
????????????????}
????????????})
????????????let?week?=?dayjs(`${this.year}-${this.month}-1`).day();
????????????this.date?=?[...new?Array(week???(week?-?1)?:?6).fill(null),?...days]
????????},
????????//?...
????}
}

首先，我們定義一個 first 變量，表示需要展示的年月，因為要變成日歷，肯定日期要對應(yīng)周幾，這樣我們通過 ?dayjs(this.first).daysInMonth() 方法獲取當前傳入月份的天數(shù)，然后進行遍歷，把 rows 傳入的標記色都給填充上。再通過得知算出這個月的第一天是周幾，然后在前面就空出多少個數(shù)據(jù)來生成出 date 。

<template>
	<view class="ml-calendar">
????????<!-- more -->
		<view class="ml-calendar-month__days">
			<view class="ml-calendar-month__days__day" v-for="(item, index) in date" :key="index"
				:class="{&#39;active&#39;:item&&item.color}" @click="$emit(&#39;select&#39;,item)">
				<view class="ml-calendar-tips" :style="{&#39;background-color&#39;:item&&item.color}"></view>
				<text v-if="item" :class="[{&#39;now&#39;:item.now}]">{{item.now?'今日':item.text}}</text>
			</view>
		</view>
	</view>
</template>

當然，通過觀察，每行始終是7個等大的格子，所以樣式方面我們大可以使用 grid布局 ，可以十分快速的實現(xiàn)效果 。

.m-calendar-month__days?{
????display:?grid;
????grid-template-columns:?repeat(7,?1fr);
}

監(jiān)聽更新

當修改當前日期時，或者標記數(shù)據(jù)時都要求重新渲染日歷，此時用 watch 就可以輕松實現(xiàn)。

watch:?{
????first(v)?{
????????this.render()
????????this.$emit("change",?{
????????????year:?this.year,
????????????month:?this.month,
????????})
????},
????rows(v)?{
???????this.render()
????}
}

別忘了，我們還要定義兩個事件給開發(fā)者使用，在 first 改變是會發(fā)出來一個 change事件 ，表示當前日歷的年月，發(fā)生了改變發(fā)出通知。此時接受到通知，你可以從后端走接口重新獲取新值或者完成其他的業(yè)務(wù)邏輯。而另一個是 select事件 來完成點擊某個日期，發(fā)出的響應(yīng)，在上個步驟的遍歷階段可以看出。

使用測試

<template>
????<view>
????????<ml-calendar style="width:100%" :rows="rows" :range="range" :value="value" @change="changeDate" @select="selectDate" />
????</view>
</template>
<script>
export?default?{
????data()?{
????????return?{
????????????value:"2022-05",??//?初始化顯示的月份
????????????range:?["2021-05",?""],?//?時間范圍
????????????rows:?[{???//?特殊日期標注數(shù)據(jù)，當前日期和標注顏色
????????????????date:?"2022-5-21",
????????????????color:?"#5F8BFB"
????????????},?{
????????????????date:?"2022-5-24",
????????????????color:?"#FBA75F"
????????????},?{
????????????????date:?"2022-5-26",
????????????????color:?"#FBA75F"
????????????}],
????????????//?...
????????}
????},
????methods:?{
????????//?切換日歷時觸發(fā)
????????changeDate(e){
????????????console.log(e)??
????????},
????????//?點擊日期返回當前日期對象?
????????selectDate(e){
????????????console.log(e)??
????????}
????}
????//...
}
</script>

日歷的大小可能受外界容器的影響，所以，給他加一個100%的寬，此時，我們可以看到，他瀏覽器和微信小程序的表現(xiàn)是基本一致的。

發(fā)布

編輯readme

發(fā)布之前我們當然需要在里面的 readme.md 文件寫寫你開發(fā)這款軟件是什么？怎么用？這些至少說明白，不然別人過段時間自己都忘了怎么用了，方便別人也方便自己吧。

執(zhí)行發(fā)布

最后我們在 uni_modules 的文件夾中，找的我們剛剛寫的 ml-calendar ，在這個文件夾上點擊右鍵選擇 發(fā)布到插件市場 （此前，必須要在Dcloud注冊為開發(fā)者并且實名認證）。

此時，會填寫一些關(guān)于這款插件的信息：

當然，里面會涉及到這款插件的兼容情況的填寫，至于到底兼不兼容各端，收不收費根據(jù)情況去選擇吧。

當點擊提交后，就會執(zhí)行發(fā)布指令了。

此時，如果控制臺會有發(fā)布后的返回信息：

如果成功則會返回一個插件地址鏈接，點開鏈接：

到這里屬于你自己的一款插件就開發(fā)并發(fā)布完成了，是不是非常的容易啊。以后在開發(fā)uni-app時遇到可以抽離的，我們都可以制成插件發(fā)布出來，成就感和便利性都是滿滿當當~

推薦：《uniapp教程》

以上是手把手帶你開發(fā)一個uni-app日歷插件（并發(fā)布）的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！