日韩免费影院,www.日韩.com,精品9999

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

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

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

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

創(chuàng)建文件

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

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

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

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

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

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

依賴引入

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

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

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

import dayjs from &＃39;../../libs/dayjs.js&＃39;

傳入參數(shù)

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

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

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

range 代表時間范圍，可以選擇上圖的左右箭頭對應的上一個月和下一個月，月份不能超出范圍。愛掏網 - it200.com

而 rows 代表著你傳入日期對應的標識色，如：

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

接下來，我們就圍繞著這些參數(shù)去完成這個日歷編寫。愛掏網 - it200.com

遍歷日期

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 dayjs(date).diff(item.date, &＃39;day&＃39;) === 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 變量，表示需要展示的年月，因為要變成日歷，肯定日期要對應周幾，這樣我們通過 dayjs(this.first).daysInMonth() 方法獲取當前傳入月份的天數(shù)，然后進行遍歷，把 rows 傳入的標記色都給填充上。愛掏網 - it200.com再通過得知算出這個月的第一天是周幾，然后在前面就空出多少個數(shù)據來生成出 date 。愛掏網 - it200.com

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

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

監(jiān)聽更新

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

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

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