This article will guide you step by step in developing a uni-app calendar plug-in, and introduce how the next calendar plug-in is developed from development to release. I hope it will be helpful to everyone!

I believe that when we develop various small programs or H5, or even APP, we will consider uni-app as a technology selection. Its advantage is that it can be packaged and run on multiple terminals with one click. Relatively powerful cross-platform performance. However, as long as you develop, you cannot avoid using plug-ins, so Dcloud has opened uni's plug-in market in order to facilitate developers and inject vitality into it. From now on, we can easily use some of these third-party plug-ins to meet some of the business needs we want to develop. But do you know how to make a uni plug-in? How is it published to the plug-in store?

Introduction

Friends who have developed WeChat mini programs may know that its main package is limited to 2M. When we choose plug-ins in the plug-in mall, we still need to consider them. , try to use lighter weight ones that are more convenient to use. Recently, there was a demand. A calendar appeared on the page. The function of the calendar is very simple, which is to switch the month. Some special date data on the back end can be marked with color. However, the calendar of the introduced UI library is a bit large. Taking this opportunity, in this issue, a lightweight calendar plug-in is specially designed according to the needs to share and see how it is developed and released to the plug-in mall.

Let us first take a look at the effect after publishing and using it:

Development

Create file

We first open HBuilder X, create a project uni-app, and create a project named uni_modules inside folder.

Then right-click on uni_modules and select New uni_modules plug-in. Then a pop-up box will appear asking you to name the plug-in. .

The name can be arbitrary. It is best to be more semantic and have some own characteristics. For example, I named this calendar plug-in ml-calendar, ahem, it roughly means jsmask-light-calendar, which is jsmask's lightweight calendar, it's funny. Just like this, click Create and a plug-in structure will be generated, in which we will write all the logic about this plug-in.

It’s not over yet, we have to create an index.js file in it, and write in it:

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

Because we only involve one ui component, so export default can be pointed directly to this component. This step is critical, because if you don't write it, the plug-in will not be found by default when you reference it, and an error will be reported and the search failed.

Dependency introduction

Because we need to quickly develop a calendar this time, we cannot avoid a lot of judgments and time forms. Verification, for example, if the calendar is for the current day, it will not display Arabic numerals, but will directly display Chinese characters for today, so when generating, it is necessary to determine whether the current system time and date are on the same day. Therefore, for the convenience of using dayjs, I believe that as a front-end developer, there is no one who does not know its name. It is an extremely lightweight time library. Of course, you can also write it out by yourself. This will make the volume smaller, but it may be introduced here for convenience and more expansion.

The dayjs file here, to save trouble, I copied it from the package after node installation:

Now It can be introduced and used in the vue file. Of course, I also created a libs folder here specifically to store third-party library files.

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

Incoming parameters

Let’s first take a look at the interface diagram to be implemented:

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

We You need to think in advance what values ??may be transmitted, which will affect the generation of this calendar. First of all, you must know which year and month data is needed. value Here you can pass in multiple types and then let dayjs process it. Come out and get a unified date format. By default, an empty string is passed, which means the current month. After all, only by knowing the year and month can we get the number of days in the month and generate the day corresponding to the week.

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

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

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

接下來，我們就圍繞著這些參數(shù)去完成這個日歷編寫。

遍歷日期

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() 方法獲取當前傳入月份的天數(shù)，然后進行遍歷，把 rows 傳入的標記色都給填充上。再通過得知算出這個月的第一天是周幾，然后在前面就空出多少個數(shù)據(jù)來生成出 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布局 ，可以十分快速的實現(xiàn)效果 。

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

監(jiān)聽更新

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

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

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

使用測試

<template>
????<view>
????????<ml-calendar></ml-calendar>
????</view>
</template>
<script>
export default {
    data() {
        return {
            value:"2022-05",  // 初始化顯示的月份
            range: ["2021-05", ""], // 時間范圍
            rows: [{   // 特殊日期標注數(shù)據(jù)，當前日期和標注顏色
                date: "2022-5-21",
                color: "#5F8BFB"
            }, {
                date: "2022-5-24",
                color: "#FBA75F"
            }, {
                date: "2022-5-26",
                color: "#FBA75F"
            }],
            // ...
        }
    },
    methods: {
        // 切換日歷時觸發(fā)
        changeDate(e){
            console.log(e)  
        },
        // 點擊日期返回當前日期對象 
        selectDate(e){
            console.log(e)  
        }
    }
    //...
}
</script>

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

發(fā)布

編輯readme

發(fā)布之前我們當然需要在里面的 readme.md 文件寫寫你開發(fā)這款軟件是什么？怎么用？這些至少說明白，不然別人過段時間自己都忘了怎么用了，方便別人也方便自己吧。

執(zhí)行發(fā)布

最后我們在 uni_modules 的文件夾中，找的我們剛剛寫的 ml-calendar ，在這個文件夾上點擊右鍵選擇 發(fā)布到插件市場 （此前，必須要在Dcloud注冊為開發(fā)者并且實名認證）。

此時，會填寫一些關于這款插件的信息：

當然，里面會涉及到這款插件的兼容情況的填寫，至于到底兼不兼容各端，收不收費根據(jù)情況去選擇吧。

當點擊提交后，就會執(zhí)行發(fā)布指令了。

此時，如果控制臺會有發(fā)布后的返回信息：

如果成功則會返回一個插件地址鏈接，點開鏈接：

到這里屬于你自己的一款插件就開發(fā)并發(fā)布完成了，是不是非常的容易啊。以后在開發(fā)uni-app時遇到可以抽離的，我們都可以制成插件發(fā)布出來，成就感和便利性都是滿滿當當~

推薦：《uniapp教程》

The above is the detailed content of Take you step by step to develop a uni-app calendar plug-in (and publish it). For more information, please follow other related articles on the PHP Chinese website!