ユニアプリ カレンダー プラグインを開発 (および公開) する手順を段階的に説明します。

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

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

はじめに

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

まず公開して使用した後の効果を見てみましょう:

開発

ファイルの作成

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

次に、uni_modules を右クリックし、[新しい uni_modules プラグイン ] を選択します。次に、次のことを尋ねるポップアップ ボックスが表示されます。プラグインに名前を付けます。

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

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

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

関与するUIは1つだけであるためです。コンポーネントなので、exportdefault はこのコンポーネントを直接指すことができます。この手順を作成しないと、プラグインを参照するときにデフォルトでプラグインが見つからず、エラーが報告され、検索が失敗するため、この手順は重要です。

依存関係の紹介

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

ここの 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: () => []
        },
        // ...
    },
    // ...
}

このカレンダーの生成に影響する、どのような値を送信するかを事前に考えておく必要があります。まず、どの年と月のデータが必要かを知る必要があります。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教程》

以上がユニアプリ カレンダー プラグインを開発 (および公開) する手順を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。