Membawa anda langkah demi langkah untuk membangunkan pemalam kalendar uni-apl (dan menerbitkannya)

Artikel ini akan membimbing anda langkah demi langkah dalam membangunkan pemalam kalendar uni-apl, dan memperkenalkan cara pemalam kalendar seterusnya dibangunkan dari pembangunan hingga keluaran saya harap ia akan membantu anda!

Saya percaya apabila kami membangunkan pelbagai program kecil atau H5, atau pun APP, kami akan menggunakan uni-app sebagai pilihan teknologi Kelebihannya ialah ia boleh dibungkus dan dijalankan pada berbilang terminal dengan satu klik Prestasi merentas platform yang agak berkuasa. Walau bagaimanapun, selagi anda membangunkan, anda tidak boleh mengelak daripada menggunakan pemalam, jadi Dcloud telah membuka pasaran pemalam uni untuk memudahkan pembangun dan menyuntik daya hidup ke dalamnya. Mulai sekarang, kami boleh menggunakan beberapa pemalam pihak ketiga ini dengan mudah untuk memenuhi beberapa keperluan perniagaan yang ingin kami bangunkan. Tetapi adakah anda tahu cara membuat pemalam uni? Bagaimanakah ia diterbitkan ke kedai pemalam?

Pengenalan

Rakan yang telah membangunkan program mini WeChat mungkin tahu bahawa pakej utamanya terhad kepada 2M Apabila kita memilih pemalam dalam pusat beli-belah pemalam, kita masih perlu mempertimbangkannya, cuba gunakan yang lebih ringan yang lebih mudah digunakan. Baru-baru ini, terdapat permintaan Kalendar muncul pada halaman Fungsi kalendar adalah sangat mudah, iaitu untuk menukar bulan Beberapa data tarikh istimewa di bahagian belakang boleh ditandakan dengan warna. Walau bagaimanapun, kalendar perpustakaan UI yang diperkenalkan adalah agak besar. Mengambil peluang ini, dalam isu ini, pemalam kalendar ringan direka khas mengikut keperluan untuk berkongsi dan melihat bagaimana ia dibangunkan dan dikeluarkan kepada pemalam. pusat beli belah.

Mari kita lihat dahulu kesannya selepas menerbitkan dan menggunakannya:

Pembangunan

Cipta fail

Kami mula-mula membuka folder HBuilder. Kemudian klik kanan pada

uni_modules

dan pilih Baharu uni_modules plug-in

Kemudian kotak pop timbul akan muncul bertanya anda menamakan pemalam itu.

Anda sebenarnya boleh menamakannya sesuka hati, lebih baik untuk menjadi lebih semantik dan mempunyai beberapa ciri anda sendiri Sebagai contoh, saya menamakan pemalam kalendar ini

, ahem, Makna umum ialah jsmask-light-calendar, iaitu kalendar ringan jsmask Ia lucu. Sama seperti ini, klik Buat, dan struktur pemalam akan dihasilkan, di mana kami akan menulis semua logik tentang pemalam ini.

ml-calendarIa belum berakhir, kita perlu mencipta fail index.js di dalamnya dan menulis di dalamnya:

Kerana kita hanya melibatkan Ia ialah komponen UI, jadi hanya tunjuk

terus ke komponen ini. Langkah ini adalah kritikal, kerana jika anda tidak menulisnya, pemalam tidak akan ditemui secara lalai apabila merujuknya, dan kegagalan carian ralat akan dilaporkan.

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

export default

Pengenalan Kebergantungan

Oleh kerana kali ini kita perlu cepat membangunkan kalendar, kita tidak boleh mengelakkan banyak masa membuat pertimbangan dan Pengesahan, sebagai contoh, jika kalendar adalah untuk hari semasa, ia tidak akan memaparkan angka Arab tetapi akan memaparkan aksara Cina secara langsung untuk hari ini, Oleh itu, apabila menjana, adalah perlu untuk menentukan sama ada masa dan tarikh sistem semasa adalah sama hari. Oleh itu,

digunakan untuk kemudahan Saya percaya bahawa sebagai pembangun bahagian hadapan, tiada siapa yang tidak tahu namanya. Sudah tentu, anda juga boleh menulisnya sendiri, supaya saiznya menjadi lebih kecil, tetapi ia mungkin diperkenalkan di sini untuk kemudahan dan lebih banyak sambungan. Fail

di sini, untuk menyelamatkan masalah, saya menyalinnya daripada pakej selepas pemasangan nod:

dayjs

dayjs kini boleh digunakan dalam fail vue Ia telah diperkenalkan dan digunakan dalam . Sudah tentu, saya juga mencipta folder libs di sini khusus untuk menyimpan fail perpustakaan pihak ketiga.

Parameter masuk

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

Mari kita lihat dahulu gambarajah antara muka yang akan dilaksanakan:

Kita perlu memikirkan terlebih dahulu nilai yang mungkin dihantar, yang akan menjejaskan penjanaan kalendar ini Pertama sekali, kita mesti tahu data tahun dan bulan mana yang diperlukan

Di sini anda boleh masuk berbilang jenis dan kemudian biarkan dayjs memprosesnya dan dapatkan format tarikh bersatu Secara lalai, rentetan kosong diluluskan, yang bermaksud bulan semasa. Lagipun, hanya dengan mengetahui tahun dan bulan kita boleh mendapatkan bilangan hari dalam bulan itu dan menjana hari yang sepadan dengan minggu tersebut.

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教程》

Atas ialah kandungan terperinci Membawa anda langkah demi langkah untuk membangunkan pemalam kalendar uni-apl (dan menerbitkannya). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!