記錄--手把手帶你開發一個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 ，相信作為前端開發者沒有不知道它的大名吧，它是一款極其輕量的時間庫，當然你也可以自己把用到的手寫出來，這樣體積會更小，但這里為了方便和更多擴展可能就引入進來了，

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

現在就可以在 vue 檔案中引入使用它了，當然，我這里還建了個libs檔案夾專門來存盤第三方庫檔案的，

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

傳入引數

我們先來看看要實作的界面圖：

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

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

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

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

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

接下來，我們就圍繞著這些引數去完成這個日歷撰寫，

遍歷日期

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

<template>
<view >
        <!-- more -->
<view >
<view  v-for="(item, index) in date" :key="index"
: @click="$emit('select',item)">
<view  :style="{'background-color':item&&item.color}"></view>
<text v-if="item" :>{{item.now?'今日':item.text}}</text>
</view>
</view>
</view>
</template>

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

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

監聽更新

當修改當前日期時，或者標記資料時都要求重新渲染日歷，此時用 watch 就可以輕松實作，

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

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

使用測驗

<template>
    <view>
        <ml-calendar style="width:100%" :rows="rows" :range="range" :https://www.cnblogs.com/smileZAZ/archive/2022/12/15/value="value" @change="changeDate" @select="selectDate" />
    </view>
</template>
<script>
export default {
    data() {
        return {
            value:"2022-05",  // 初始化顯示的月份
            range: ["2021-05", ""], // 時間范圍
            rows: [{   // 特殊日期標注資料，當前日期和標注顏色
                date: "2022-5-21",
                color: "#5F8BFB"
            }, {
                date: "2022-5-24",
                color: "#FBA75F"
            }, {
                date: "2022-5-26",
                color: "#FBA75F"
            }],
            // ...
        }
    },
    methods: {
        // 切換日歷時觸發
        changeDate(e){
            console.log(e)  
        },
        // 點擊日期回傳當前日期物件 
        selectDate(e){
            console.log(e)  
        }
    }
    //...
}
</script>

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