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

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

介紹

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

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

開發

創建文件

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

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

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

還沒結束，我們還要在里面創建一個index.js的文件，里面寫入：

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

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

依賴引入

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