這篇文章手把手帶大家開發一個uni-app日曆插件，介紹下一款日曆插件是如何從開發到發布的，希望對大家有所幫助！
相信我們在開發各類小程式或H5，甚至APP時，會把uni-app當作一個技術選型，其優點在於一鍵打包多端運行，較為強大的跨平台的性能。但是，只要開發就免不了使用插件，所以Dcloud為了方便開發者同時也為注入活力，開放了uni的插件市場。從此，我們可以很方便的使用其中的一些第三方外掛程式來滿足我們要開發的一些業務需求了。但你知道怎麼製作一款uni的插件嗎？它又是如何發佈到插件商城裡的嗎？
開發過微信小程式的朋友或許知道，它的主包限製成2M，我們在插件商城挑選插件時，其實還是要斟酌的，盡可能使用更輕量的，使用起來更方便的。最近有個需求，頁面中出現了一個日曆，日曆的功能很簡單就是切換月份，後端一些特殊日期資料能用顏色標記一下即可。但引入的ui庫的日曆又有點大，藉此機會，本期就按照需求特製了一款輕量級的日曆插件進行分享，看看它是如何開發出來並發佈到插件商城上面去的。
讓我們先來看看發布使用後的效果：
##建立檔案我們先開啟HBuilder X
，建立一個uni-app
的資料夾。
上點選右鍵，裡面選擇新建
uni_modules外掛 ，會出現一個彈框要求你對外掛程式命名。
還沒結束，我們還要在裡面建立一個index.js的文件，裡面寫入：
import mlCalendar from "./components/ml-calendar/ml-calendar" export default mlCalendar
export default直接指到這個元件上就好了。這一步很關鍵，因為如果不寫他的話，在引用這款插件的時候預設是找不到這個插件的，會報錯查找失敗。
依賴引入
dayjs
##現在就可以在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: () => []
},
// ...
},
// ...
}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.md 文件写写你开发这款软件是什么？怎么用？这些至少说明白，不然别人过段时间自己都忘了怎么用了，方便别人也方便自己吧。
最后我们在 uni_modules 的文件夹中，找的我们刚刚写的 ml-calendar ，在这个文件夹上点击右键选择 发布到插件市场 （此前，必须要在Dcloud注册为开发者并且实名认证）。
此时，会填写一些关于这款插件的信息：
当然，里面会涉及到这款插件的兼容情况的填写，至于到底兼不兼容各端，收不收费根据情况去选择吧。
当点击提交后，就会执行发布指令了。
此时，如果控制台会有发布后的返回信息：
如果成功则会返回一个插件地址链接，点开链接：
到这里属于你自己的一款插件就开发并发布完成了，是不是非常的容易啊。以后在开发uni-app时遇到可以抽离的，我们都可以制成插件发布出来，成就感和便利性都是满满当当~
推荐：《uniapp教程》
以上是手把手帶你開發一個uni-app日曆插件（並發布）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
