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 代表時(shí)間范圍，可以選擇上圖的左右箭頭對(duì)應(yīng)的上一個(gè)月和下一個(gè)月，月份不能超出范圍。

而 rows 代表著你傳入日期對(duì)應(yīng)的標(biāo)識(shí)色，如 ：

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

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

遍歷日期

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]
????????},
????????//?...
????}
}

首先，我們定義一個(gè) first 變量，表示需要展示的年月，因?yàn)橐兂扇諝v，肯定日期要對(duì)應(yīng)周幾，這樣我們通過 ?dayjs(this.first).daysInMonth() 方法獲取當(dāng)前傳入月份的天數(shù)，然后進(jìn)行遍歷，把 rows 傳入的標(biāo)記色都給填充上。再通過得知算出這個(gè)月的第一天是周幾，然后在前面就空出多少個(gè)數(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>

當(dāng)然，通過觀察，每行始終是7個(gè)等大的格子，所以樣式方面我們大可以使用 grid布局 ，可以十分快速的實(shí)現(xiàn)效果 。

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

監(jiān)聽更新

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

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

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

使用測(cè)試

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

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

發(fā)布

編輯readme

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

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

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

此時(shí)，會(huì)填寫一些關(guān)于這款插件的信息：

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

當(dāng)點(diǎn)擊提交后，就會(huì)執(zhí)行發(fā)布指令了。

此時(shí)，如果控制臺(tái)會(huì)有發(fā)布后的返回信息：

如果成功則會(huì)返回一個(gè)插件地址鏈接，點(diǎn)開鏈接：

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

推薦：《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!