手把手帶你開發一個uni-app日曆插件（並發布）-uni-app-PHP中文網

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

手把手帶你開發一個uni-app日曆插件（並發布）

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

介紹

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

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

手把手帶你開發一個uni-app日曆插件（並發布）

#開發

手把手帶你開發一個uni-app日曆插件（並發布）

##建立檔案我們先開啟HBuilder X

，建立一個

uni-app 手把手帶你開發一個uni-app日曆插件（並發布）的項目，在裡面建立一個名叫

uni_modules

的資料夾。

手把手帶你開發一個uni-app日曆插件（並發布）然後

uni_modules

上點選右鍵，裡面選擇新建

uni_modules外掛

，會出現一個彈框要求你對外掛程式命名。

手把手帶你開發一個uni-app日曆插件（並發布）起名其實可以隨意，最好語義化強一些還要帶點自己的特色，比如，這款日曆插件我起名叫

ml-calendar

，咳，大致意思就是jsmask-light-calendar，也就是jsmask的輕量級日曆，見笑了。就這樣，點擊創建，就會產生好一個插件結構，我們就會在這裡面寫關於這個插件的所有邏輯。

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

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

登入後複製

因為我們只涉及到一個ui元件，所以

export default直接指到這個元件上就好了。這一步很關鍵，因為如果不寫他的話，在引用這款插件的時候預設是找不到這個插件的，會報錯查找失敗。

手把手帶你開發一個uni-app日曆插件（並發布）

依賴引入

因為本次需要快速開發出一個日曆來，所以免不了出現很多時間形式的判斷和驗證，例如，如果日曆是當天就不會顯示阿拉伯數字了會直接顯示漢字今日，所以生成的時候就要判斷當前系統時間和日期是不是同一天上。所以，為了方便使用了dayjs

，相信身為前端開發者沒有不知道它的大名吧，它是一款極其輕量的時間庫，當然你也可以自己把用到的手寫出來，這樣體積會更小，但這裡為了方便和更多擴展可能就引入了。

這裡的

dayjs 手把手帶你開發一個uni-app日曆插件（並發布）文件，為了省事，我是從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  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 :class="{'active':item&&item.color}">
				<view></view>
				<text>{{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></ml-calendar>
    </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%的宽，此时，我们可以看到，他浏览器和微信小程序的表现是基本一致的。

手把手帶你開發一個uni-app日曆插件（並發布）