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

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

介紹

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

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

開(kāi)發(fā)

創(chuàng)建文件

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

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

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

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

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

因?yàn)槲覀冎簧婕暗揭粋€(gè)ui組件，所以 export default直接指到這個(gè)組件上就好了。這一步很關(guān)鍵，因?yàn)槿绻粚懰脑挘谝眠@款插件的時(shí)候默認(rèn)是找不到這個(gè)插件的，會(huì)報(bào)錯(cuò)查找失敗。

依賴引入

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