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

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

介紹

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

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

開發(fā)

創(chuàng)建文件

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

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

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

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

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

因?yàn)槲覀冎簧婕暗揭粋€ui組件，所以 export default直接指到這個組件上就好了。這一步很關(guān)鍵，因?yàn)槿绻粚懰脑?，在引用這款插件的時候默認(rèn)是找不到這個插件的，會報錯查找失敗。

依賴引入

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