이 기사에서는 uni-app 캘린더 플러그인 개발 과정을 단계별로 안내하고, 다음 캘린더 플러그인이 개발부터 출시까지 어떻게 진행되는지 소개하는 것이 도움이 되기를 바랍니다.
다양한 소형 프로그램이나 H5, 심지어 APP를 개발할 때 uni-app을 기술 선택으로 고려할 것이라고 믿습니다. 그 장점은 원클릭 패키징과 멀티엔드 운영, 그리고 상대적으로 강력한 크로스입니다. 플랫폼 성능. 하지만 개발을 하다 보면 플러그인을 사용하지 않을 수 없기에, 디클라우드에서는 개발자들의 편의성과 활력을 불어넣고자 유니 플러그인 마켓을 오픈하게 되었습니다. 이제부터 이러한 타사 플러그인 중 일부를 쉽게 사용하여 개발하려는 비즈니스 요구 사항 중 일부를 충족할 수 있습니다. 하지만 uni 플러그인을 만드는 방법을 알고 있나요? 플러그인 스토어에 어떻게 게시되나요?
소개
WeChat 미니 프로그램을 개발해 본 친구들은 위챗의 메인 패키지가 2M으로 제한되어 있다는 것을 알고 있을 것입니다. 더 편리합니다. 최근에 페이지에 달력이 등장했습니다. 달력의 기능은 매우 간단하며 백엔드의 일부 특수 날짜 데이터를 색상으로 표시할 수 있습니다. 다만, 이번에 소개된 UI 라이브러리의 캘린더는 용량이 좀 큰 편입니다. 이번 호에서는 공유의 필요성에 따라 경량 캘린더 플러그인을 특별히 설계하여 플러그인으로 출시하는 방법을 살펴보겠습니다. 쇼핑 센터.
먼저 게시하고 사용한 후 효과를 살펴보겠습니다.
Development
파일 만들기
먼저 HBuilder X를 열고 uni-app 프로젝트를 만듭니다. 내부에 uni_modules라는 폴더를 만듭니다.
그런 다음 uni_modules를 마우스 오른쪽 버튼으로 클릭하고 New uni_modules 플러그인을 선택하면 플러그인 이름을 묻는 팝업 상자가 나타납니다.
실제로는 원하는 대로 이름을 지정할 수 있습니다. 예를 들어 이 캘린더 플러그인의 이름을 ml-calendar로 지정했습니다. 일반적인 의미는 jsmask의 경량 캘린더인 jsmask-light-calendar가 말도 안 된다는 것입니다. 이와 같이 Create를 클릭하면 플러그인 구조가 생성되며, 여기에 이 플러그인에 대한 모든 로직을 작성하게 됩니다. 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
🎜🎜또한 아직 끝나지 않았습니다. index.js 파일을 생성하고 다음과 같이 작성해야 합니다. 🎜
let rows = [{
date: "2022-5-21",
color: "#5F8BFB"
}, {
date: "2022-5-24",
color: "#FBA75F"
}, {
date: "2022-5-26",
color: "#FBA75F"
}]로그인 후 복사
로그인 후 복사
🎜우리는 하나의 ui 구성 요소만 포함하므로
export default가 이 구성 요소를 직접 가리킬 수 있습니다. . 이 단계는 매우 중요합니다. 작성하지 않으면 참조할 때 기본적으로 플러그인을 찾을 수 없으며 오류가 보고되고 검색이 실패하기 때문입니다. 🎜🎜
🎜
🎜종속성 소개🎜🎜🎜이번에는 달력을 빨리 개발해야 하기 때문에 시간 형식에 대한 많은 판단과 검증을 피할 수 없습니다. 일이면 아랍어가 표시되지 않습니다. 숫자는 오늘 한자를 직접 표시하므로 생성 시 현재 시스템 시간과 날짜가 같은 날인지 확인해야 합니다. 그러므로 dayjs 사용의 편의를 위해, 프론트엔드 개발자로서 이름을 모르는 사람은 없을 것이라 믿습니다. 물론 아주 가벼운 시간 라이브러리일 수도 있습니다. 직접 작성하기도 하므로 크기는 작아지지만, 편의와 확장을 위해 여기에 소개할 수도 있습니다. 🎜🎜여기 있는 dayjs 파일은 문제를 방지하기 위해 노드 설치 후 패키지에서 복사했습니다. 🎜🎜
🎜🎜이제 vue 파일에 도입해서 사용하시면 됩니다. 물론 여기에 libs도 구축해 두었습니다 폴더 타사 라이브러리 파일을 저장하는 데 특별히 사용됩니다. 🎜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]
},
// ...
}
}로그인 후 복사
로그인 후 복사
🎜수신 매개변수🎜🎜🎜먼저 구현할 인터페이스 다이어그램을 살펴보겠습니다. 🎜🎜
🎜<template>
<view>
<!-- more -->
<view>
<view :class="{'active':item&&item.color}">
<view></view>
<text>{{item.now?'今日':item.text}}</text>
</view>
</view>
</view>
</template>로그인 후 복사
로그인 후 복사
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%的宽，此时，我们可以看到，他浏览器和微信小程序的表现是基本一致的。
发布
编辑readme
发布之前我们当然需要在里面的 readme.md 文件写写你开发这款软件是什么？怎么用？这些至少说明白，不然别人过段时间自己都忘了怎么用了，方便别人也方便自己吧。
执行发布
最后我们在 uni_modules 的文件夹中，找的我们刚刚写的 ml-calendar ，在这个文件夹上点击右键选择 发布到插件市场 （此前，必须要在Dcloud注册为开发者并且实名认证）。
此时，会填写一些关于这款插件的信息：
当然，里面会涉及到这款插件的兼容情况的填写，至于到底兼不兼容各端，收不收费根据情况去选择吧。
当点击提交后，就会执行发布指令了。
此时，如果控制台会有发布后的返回信息：
如果成功则会返回一个插件地址链接，点开链接：
到这里属于你自己的一款插件就开发并发布完成了，是不是非常的容易啊。以后在开发uni-app时遇到可以抽离的，我们都可以制成插件发布出来，成就感和便利性都是满满当当~
推荐：《uniapp教程》
위 내용은 uni-app 캘린더 플러그인을 개발하고 게시하는 방법을 단계별로 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
