この記事では、ユニアプリ カレンダー プラグインの開(kāi)発を段階的に説明し、次のカレンダー プラグインが開(kāi)発からリリースまでどのように開(kāi)発されるかを紹介します。

様々な小さなプログラムやH5、さらにはAPPを開(kāi)発する際には、技術(shù)の選択肢としてユニアプリを検討することになると思います。ワンクリックで複數(shù)の端末上で実行でき、比較的強(qiáng)力なクロスプラットフォーム パフォーマンスを?qū)g現(xiàn)します。しかし、開(kāi)発をする限りプラグインの使用を避けることはできません。そこで、Dcloud は開(kāi)発者を容易にし、プラグインに活力を注入するために uni のプラグイン マーケットをオープンしました。今後は、これらのサードパーティ プラグインの一部を簡(jiǎn)単に使用して、開(kāi)発したいビジネス ニーズの一部を満たすことができるようになります。しかし、uni プラグインの作り方をご存知ですか?プラグイン ストアにはどのように公開(kāi)されますか?

はじめに

WeChat ミニ プログラムを開(kāi)発した友人は、そのメイン パッケージが 2M に制限されていることを知っているかもしれません。プラグイン モールでプラグインを選択するとき、それらについてはまだ考慮する必要がありますが、より使いやすい軽量のものを使用するようにしてください。最近、ご要望があり、ページにカレンダーが登場(chǎng)しました カレンダーの機(jī)能は月を切り替えるだけの非常にシンプルなもので、バックエンドの一部の特別な日付データに色を付けることができます。ただし、導(dǎo)入した UI ライブラリのカレンダーは少し大きいので、これを機(jī)に、今回は共有ニーズに合わせて特別に設(shè)計(jì)された軽量のカレンダー プラグインを開(kāi)発し、プラグインにリリースする方法を確認(rèn)します。モール。

まず公開(kāi)して使用した後の効果を見(jiàn)てみましょう:

開(kāi)発

ファイルの作成

まず HBuilder X を開(kāi)き、プロジェクト uni-app を作成し、その中に uni_modules という名前のプロジェクトを作成します。フォルダ。

次に、uni_modules を右クリックし、[新しい uni_modules プラグイン ] を選択します。次に、次のことを?qū)い亭毳荪氓抓ⅴ氓?ボックスが表示されます。プラグインに名前を付けます。

名前は任意で構(gòu)いません。よりセマンティックで、いくつかの獨(dú)自の特性を持つことが最善です。たとえば、このカレンダー プラグインには ml-calendar という名前を付けました。 、へー、これは大まかに言うと、jsmask-light-calendar を意味します。これは、jsmask の軽量カレンダーです。面白いですね。このように、[作成] をクリックすると、プラグイン構(gòu)造が生成されます。そこに、このプラグインに関するすべてのロジックを記述します。

まだ終わっていません。その中にindex.jsファイルを作成し、次のように書(shū)き込む必要があります。

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

関與するU(xiǎn)Iは1つだけであるためです。コンポーネントなので、exportdefault はこのコンポーネントを直接指すことができます。この手順を作成しないと、プラグインを參照するときにデフォルトでプラグインが見(jiàn)つからず、エラーが報(bào)告され、検索が失敗するため、この手順は重要です。

依存関係の紹介

今回はカレンダーを迅速に開(kāi)発する必要があるため、多くの判斷と時(shí)間の変更を避けることができません検証としては、例えば、今日のカレンダーの場(chǎng)合、アラビア數(shù)字は表示されず、今日の漢字が直接表示されるため、生成時(shí)に現(xiàn)在のシステム時(shí)刻と日付が正しい日付であるかどうかを判斷する必要があります。同日。そのため、dayjs は、フロントエンド開(kāi)発者であればその名前を知らない人はいないと思うほど、非常に軽量な時(shí)間ライブラリです。容量は小さくなりますが、利便性と拡張性を考慮してここに導(dǎo)入する場(chǎng)合があります。

ここの dayjs ファイルは、トラブルを避けるために、ノードのインストール後にパッケージからコピーしました:

これで、次のようになります。 vue ファイルで導(dǎo)入および使用されています。もちろん、サードパーティのライブラリ ファイルを保存するための libs フォルダーもここに作成しました。

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

受信パラメータ

まず、実裝するインターフェイス図を見(jiàn)てみましょう:

export?default?{
????name:?"ml-calendar",
????props:?{
????????value:?{
????????????type:?[Number,?String,?Date],
????????????default:?""
????????},
????????range:?{
????????????type:?Array,
????????????default:?()?=>?["2021-01",?""]
????????},
????????rows:?{
????????????type:?Array,
????????????default:?()?=>?[]
????????},
????????//?...
????},
????//?...
}

このカレンダーの生成に影響する、どのような値を送信するかを事前に考えておく必要があります。まず、どの年と月のデータが必要かを知る必要があります。value ここで渡すことができます複數(shù)の型で、dayjs に処理させます。統(tǒng)合された日付形式を取得してください。デフォルトでは、現(xiàn)在の月を意味する空の文字列が渡されます。結(jié)局のところ、年と月を知ることによってのみ、月の日數(shù)を取得し、週に対応する日を生成することができます。

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"
}]

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

遍歷日期

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)周幾，這樣我們通過(guò) ?dayjs(this.first).daysInMonth() 方法獲取當(dāng)前傳入月份的天數(shù)，然后進(jìn)行遍歷，把 rows 傳入的標(biāo)記色都給填充上。再通過(guò)得知算出這個(gè)月的第一天是周幾，然后在前面就空出多少個(gè)數(shù)據(jù)來(lái)生成出 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)然，通過(guò)觀察，每行始終是7個(gè)等大的格子，所以樣式方面我們大可以使用 grid布局 ，可以十分快速的實(shí)現(xiàn)效果 。

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

監(jiān)聽(tīng)更新

當(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è)事件給開(kāi)發(fā)者使用，在 first 改變是會(huì)發(fā)出來(lái)一個(gè) change事件 ，表示當(dāng)前日歷的年月，發(fā)生了改變發(fā)出通知。此時(shí)接受到通知，你可以從后端走接口重新獲取新值或者完成其他的業(yè)務(wù)邏輯。而另一個(gè)是 select事件 來(lái)完成點(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 文件寫(xiě)寫(xiě)你開(kāi)發(fā)這款軟件是什么？怎么用？這些至少說(shuō)明白，不然別人過(guò)段時(shí)間自己都忘了怎么用了，方便別人也方便自己吧。

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

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

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

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

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

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

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

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

推薦：《uniapp教程》

以上がユニアプリ カレンダー プラグインを開(kāi)発 (および公開(kāi)) する手順を段階的に説明します。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。