Vous guide pas à pas pour développer un plug-in de calendrier Uni-App (et le publier)

Cet article vous guidera étape par étape dans le développement d'un plug-in de calendrier uni-app et vous présentera comment le prochain plug-in de calendrier est développé, du développement à la sortie. J'espère qu'il vous sera utile !

Je crois que lorsque nous développons divers petits programmes ou H5, ou même des applications, nous considérerons l'uni-app comme une sélection technologique. Ses avantages sont un packaging en un clic et un fonctionnement multi-terminal, et un cross-terminal relativement puissant. performances de la plateforme. Cependant, tant que vous développez, vous ne pouvez pas éviter d'utiliser des plug-ins, c'est pourquoi Dcloud a ouvert le marché des plug-ins de l'université afin de faciliter les développeurs et d'y injecter de la vitalité. Désormais, nous pouvons facilement utiliser certains de ces plug-ins tiers pour répondre à certains des besoins métiers que nous souhaitons développer. Mais savez-vous comment créer un plug-in universitaire ? Comment est-il publié dans la boutique de plug-ins ?

Introduction

Les amis qui ont développé des mini-programmes WeChat savent peut-être que son package principal est limité à 2M. Lorsque nous choisissons des plug-ins dans le centre commercial de plug-ins, nous devons toujours les considérer et essayer d'en utiliser davantage. les plus légers. Récemment, il y a eu une demande. Un calendrier est apparu sur la page. La fonction du calendrier est très simple, qui consiste à changer de mois. Certaines données de date spéciales dans le backend peuvent être marquées par une couleur. Cependant, le calendrier de la bibliothèque d'interface utilisateur introduite est un peu volumineux. Profitant de cette opportunité, dans ce numéro, un plug-in de calendrier léger est spécialement conçu en fonction des besoins de partage et de voir comment il est développé et publié sur le plug-in. centre commercial.

Jetons d'abord un coup d'œil à l'effet après l'avoir publié et utilisé :

Développement

Créer un fichier

Nous ouvrons d'abord HBuilder X et créons un projet uni-app. Créez un dossier nommé uni_modules à l'intérieur.

Ensuite, faites un clic droit sur uni_modules et sélectionnez Nouveau uni_modules plug-in. Une boîte de dialogue apparaîtra vous demandant de nommer le plug-in.

Vous pouvez le nommer comme vous le souhaitez. Il est préférable d'être plus sémantique et d'avoir certaines de vos propres caractéristiques. Par exemple, j'ai nommé ce plug-in de calendrier ml-calendar. , la signification générale est jsmask-light-calendar, qui est le calendrier léger de jsmask, est ridicule. Juste comme ça, cliquez sur Créer et une structure de plug-in sera générée, dans laquelle nous écrirons toute la logique de ce plug-in. 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

🎜🎜Aussi Ce n'est pas encore fini, nous devons y créer un fichier index.js, et y écrire : 🎜

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

🎜Parce que nous n'impliquons qu'un seul composant ui, donc export default peut être pointé directement vers ce composant . Cette étape est critique, car si vous ne l'écrivez pas, le plug-in ne sera pas trouvé par défaut lorsque vous le référencerez, une erreur sera signalée et la recherche échouera. 🎜🎜🎜

🎜Introduction aux dépendances🎜🎜🎜Parce que nous devons développer rapidement un calendrier cette fois, nous ne pouvons pas éviter beaucoup de jugement et de vérification des formulaires de temps. Par exemple, si le calendrier est sur le même. jour, il n'affichera pas l'arabe. Les chiffres afficheront directement les caractères chinois d'aujourd'hui, donc lors de la génération, il est nécessaire de déterminer si l'heure et la date actuelles du système sont le même jour. Par conséquent, pour la commodité d'utilisation de dayjs, je pense qu'en tant que développeur front-end, personne ne connaît son nom. Bien sûr, vous pouvez le faire. écrivez-le également par vous-même, donc la taille sera plus petite, mais il peut être introduit ici pour plus de commodité et plus d'expansion. 🎜🎜Le fichier dayjs ici, pour éviter les problèmes, je l'ai copié du package après l'installation du nœud : 🎜🎜🎜🎜Vous pouvez maintenant l'introduire et l'utiliser dans le fichier vue. Bien sûr, j'ai aussi construit une bibliothèque ici Le dossier est spécialement utilisé pour stocker des fichiers de bibliothèques tierces. 🎜

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

🎜Paramètres entrants🎜🎜🎜Regardons d'abord le schéma de l'interface à implémenter : 🎜🎜🎜

<template>
	<view>
        <!-- more -->
		<view>
			<view :class="{'active':item&&item.color}">
				<view></view>
				<text>{{item.now?'今日':item.text}}</text>
			</view>
		</view>
	</view>
</template>

🎜Nous devons réfléchir à l'avance aux valeurs qui peuvent être transmises, ce qui affectera Pour la génération de ce calendrier, vous devez tout d'abord savoir quelles données d'année et de mois sont nécessaires. value Ici, vous pouvez transmettre plusieurs types, puis laisser dayjs les traiter pour obtenir un format de date unifié. par défaut, une chaîne vide est passée, ce qui signifie le mois en cours. Après tout, ce n'est qu'en connaissant l'année et le mois que nous pouvons obtenir le nombre de jours du mois et générer le jour correspondant à la semaine. 🎜

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%的宽，此时，我们可以看到，他浏览器和微信小程序的表现是基本一致的。

发布

编辑readme

发布之前我们当然需要在里面的 readme.md 文件写写你开发这款软件是什么？怎么用？这些至少说明白，不然别人过段时间自己都忘了怎么用了，方便别人也方便自己吧。

执行发布

最后我们在 uni_modules 的文件夹中，找的我们刚刚写的 ml-calendar ，在这个文件夹上点击右键选择 发布到插件市场 （此前，必须要在Dcloud注册为开发者并且实名认证）。

此时，会填写一些关于这款插件的信息：

当然，里面会涉及到这款插件的兼容情况的填写，至于到底兼不兼容各端，收不收费根据情况去选择吧。

当点击提交后，就会执行发布指令了。

此时，如果控制台会有发布后的返回信息：

如果成功则会返回一个插件地址链接，点开链接：

到这里属于你自己的一款插件就开发并发布完成了，是不是非常的容易啊。以后在开发uni-app时遇到可以抽离的，我们都可以制成插件发布出来，成就感和便利性都是满满当当~

推荐：《uniapp教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!