wx calendar
v1.8.0
تقويم برنامج WeChat Mini
· 年月周日程视图 · 支持skyline和webview渲染 · 支持插件扩展
المكتبة الأساسية للبرنامج المصغر SDKVersion >= 3.0.0
npm i @lspriv/wx-calendar -S شريط قائمة أدوات تطوير تطبيق WeChat الصغير:工具->构建npm وثائق npm الرسمية
تكوين في الصفحة أو ملف التكوين العام
{
"usingComponents" : {
"calendar" : " @lspriv/wx-calendar "
}
}المستخدمة في ملف صفحة wxml
< calendar id =" calendar " bindload =" handleLoad " /> const { WxCalendar } = require ( '@lspriv/wx-calendar/lib' ) ;
const { LunarPlugin } = require ( '@lspriv/wc-plugin-lunar' ) ;
// 使用农历插件
WxCalendar . use ( LunarPlugin ) ;
Page ( {
handleLoad ( detail ) {
conosle . log ( 'calendar load' , detail ) ;
}
} ) مهم
يرجى إجراء عملية تحديد Component('#calendar') بعد حدث bindload.
فرع ألفا هو فرع العمل الخاص بي والفرع الذي لديه أحدث التقدم هو فرع الإصدار/* لحل المشكلات المذكورة في الإصدار. فرع التطوير يعادل إرسال PR إلى المعلم لوضع العلامات لسحب.
npm install
# 启动，默认skyline配置
npm run dev
# 设置webview
# npm run dev @webview 或者 npm run dev @W npm run buildnpm run packageملحوظة
ينفذ أمر إرسال الحزمة هذا ثلاثة أجزاء: التعبئة والتغليف والإرسال والدفع إلى المستودع، لذلك ليست هناك حاجة لتنفيذ أمر التعبئة بشكل متكرر.
الاختبار لم يكتب بعد، هل سيتم كتابته عندما يكون لدي وقت؟
تحتاج إلى تمكين الخيارات التالية، الزاوية اليمنى العليا لأدوات التطوير -> التفاصيل -> الإعدادات المحلية
usingComponents في globalStyle pages.json {
"globalStyle" : {
"wx-calendar" : " /components/wx-calendar "
}
}يرجى الرجوع إلى دعم المكونات المخصصة لبرنامج UniApp الصغير لمعرفة الأمور التي تحتاج إلى الاهتمام.
ارجع إلى Taro 使用原生模块
ملحوظة
إذا كان مشروع Taro يشير إلى المكونات الأصلية للبرنامج الصغير، فلن يكون لدى المشروع القدرة على تحويل محطات طرفية متعددة.
تظهر تعريفات النوع التالية:
type CalendarDay = {
year : number ; // 年
month : number ; // 月
day : number ; // 日
} ;جميع السمات التالية اختيارية
| ملكية | يكتب | يوضح | القيمة الافتراضية |
|---|---|---|---|
| منظر | خيط | منظر | الشهر [الأسبوع|الجدول الزمني] |
| علامات | صفيف | جدول الأعمال والشارات وعلامات العطلات | [] |
| تذبذب | منطقية | انقر فوق ما إذا كان التاريخ سوف يهتز | حقيقي |
| darkmode | منطقية | الوضع الداكن (اتبع النظام) | حقيقي |
| تاريخ | سلسلة|رقم | التاريخ المحدد | xxxx-xxx-xx|الطابع الزمني |
| بداية الأسبوع | رقم | اليوم الأول من الأسبوع، 0|1|2|3|4|5|6 | 0 |
| أسلوب | خيط | تعيين متغيرات نمط الموضوع | '' |
| الخط | خيط | تعيين الخط | '' |
| المناطق | صفيف | منطقة تخطيط مخصصة | ["الرأس"، "العنوان"، "المعلومات الفرعية"، "اليوم"، "شريط العرض"، "شريط السحب"] |
| viewGesture | منطقية | ما إذا كان سيتم التحكم في العرض باستخدام الإيماءات المنزلقة | حقيقي |
| SameChecked | منطقية | حافظ على اتساق نمط التاريخ المحدد | خطأ شنيع |
| customNavBar | منطقية | ما إذا كانت الصفحة التي يوجد بها المكون تحتوي على شريط تنقل مخصص | حقيقي |
| alignDate | خيط | ترتيب التاريخ (في المنتصف | بمحاذاة خط الأساس) | مركز [مركز|خط الأساس] |
| showRest | منطقية | ما إذا كان سيتم عرض تواريخ غير هذا الشهر | حقيقي |
نصيحة
قام الإصدار 1.7.0+ بإزالة سمة العرض الثابتة، وإضافة سمة التحكم في الإيماءات viewGesture ، ويتم تنفيذ العرض الثابت بالطريقة التالية، مع درجة أعلى من الحرية.
طريقة جديدة لتثبيت وجهات النظر
<!-- 固定为周视图 -->
<!-- view 默认初始视图 -->
<!-- view-gesture 取消手势控制 -->
<!-- areas 只保留四个区域，将viewbar和dragbar移除 -->
< calendar
view =" week "
view-gesture =" {{ false }} "
areas =" {{ ['header', 'title', 'subinfo', 'today'] }} "
/> نصيحة
حول marks السمة
// 标记里的日期，要么输入年月日year｜month｜day，要么输入日期 date
type Mark = {
year ?: number ; // 年
month ?: number ; // 月
day ?: number ; // 日
date ?: string | number | Date ; // 日期 yyyy-mm-dd | timestamp | Date
type : 'schedule' | 'corner' | 'festival' | 'solar' ; // 日程｜角标｜节假日 | 日期文字
text : string ; // 内容
style ?: string | Record < string , string | number > ; // 标记样式
}
// 样式标记
type StyleMark = {
year ?: number ; // 年
month ?: number ; // 月
day ?: number ; // 日
date ?: string | number | Date ; // 日期 yyyy-mm-dd | timestamp |
style : string | Record < string , string | number > ;
}يجب أن يتكون محتوى الترجمة من حرف واحد فقط. تم تصحيح موضع حرف واحد فقط. إذا كان هناك أي أحرف إضافية، يرجى تعديل الموضع بنفسك.
مهم
إذا كانت الصفحة التي يوجد بها المكون لا تحتوي على شريط تنقل مخصص ممكّن، فيرجى تعيين السمة customNavBar إلى false
اكتمل تحميل تقويم bindload
type LoadEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
}الحصول على مثيل المكون
< calendar id =" calendar " bindload =" handleLoad " /> import { CalendarExport } from '@lspriv/wx-calendar/lib' ;
Page ( {
handleLoad ( ) {
const calendar = this . selectComponent ( '#calendar' ) as CalendarExport ;
// 如果你使用了其他插件，比如 WxCalendar.use(AnyPlugin)，则可以
// const calendar = ... as CalendarExport<[typeof AnyPlugin]>;
}
} ) ; انقر فوق تاريخ bindclick
type LoadEventDetail = {
checked : CalenderDay ; // 当前点击日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} ملحوظة
حدث النقر على التاريخ، إذا لزم الأمر، يرجى التعامل معه بنفسك
bindchange التغيير المحدد
type ChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
range : [ start : CalenderDay , end : CalenderDay ] ; // 当前渲染的月份范围
} تغيير عرض لوحة bindviewchange
type ViewChangeEventDetail = {
checked : CalenderDay ; // 当前选择日期
view : 'week' | 'month' | 'schedule' ; // 当前视图
} bindschedule انقر فوق مشغل الجدول الزمني
type ScheduleEventDetail = {
schedules ?: Array < ScheduleEventDetail > ; // 所有日程
schedule ?: ScheduleEventDetail ; // 当前点击日程
all : boolean ; // 是否所有日程
} التاريخ checked
{
/**
* @param date 选中日期
* yyyy-mm-dd | timestamp | Date | CalendarDay
*/
( date : string | number | Date | CalendarDay ) : Promise < void > ;
} تبديل عرض toggleView
{
/**
* @param [view] 要切换的视图
* 当view未指定时，会在周月视图之间切换
*/
( view ?: 'month' | 'week' | 'schedule' ) : void ;
} openAnuual يفتح اللوحة السنوية
{
( ) : Promise < void > ;
} تحصل getMarks على علامة التاريخ الكاملة
{
/**
* @param date 获取日期
*/
( date : CalendarDay ) : PluginEntireMarks ;
} يحصل getPlugin على مثيل المكون الإضافي
{
/**
* @param key 插件的KEY
*/
( key : string ) : InstanceType < PluginConstructor > ;
} updateDates يقوم بتحديث بيانات التاريخ
{
/**
* 若不指定哪些日期更新，默认刷新全部
*/
( dates ?: Array < CalendarDay > ) : Promise < void > ;
}تم تشغيل عزل النمط في المكون. يمكن تعديل حجم الخط ورقم اللون فقط. يمكنك تعديل متغيرات CSS التالية عن طريق تمرير سمة النمط لضبط السمة.
. wcc {
/* 浅色主题 */
--wc-bg-light : # FFF ; /* 主背景色 */
--wc-title-color-light : # 333 ; /* 左上角日期标题 */
--wc-title-sub-color-light : # 7A7A7A ; /* 左上角日期标题的右侧描述 */
--wc-opt-bg-light : # D9ECFF ; /* 视图控制背景色 */
--wc-opt-checked-bg-light : # 409EFF ; /* 视图控制按钮背景色 */
--wc-opt-color-light : # 409EFF ; /* 视图控制字体 */
--wc-opt-checked-color-light : # FFF ; /* 视图控制选中字体 */
--wc-week-color-light : # ABABAB ; /* 星期 */
--wc-date-color-light : # 333 ; /* 日期 */
--wc-mark-color-light : # ABABAB ; /* 日期下方信息 */
--wc-dot-color-light : # ABABAB ; /* 日期上方‘･’ */
--wc-schedule-color-light : # 409EFF ; /* 日程默认 */
--wc-schedule-bg-light : # EAEEF2 ; /* 日程默认背景 */
--wc-today-color-light : # 409EFF ; /* 日期（今日） */
--wc-solar-color-light : # 409EFF ; /* 日期下方信息默认（节气，节假日） */
--wc-checked-color-light : # 333 ; /* 被选日期 */
--wc-checked-mark-color-light : # ABABAB ; /* 被选日期下方信息 */
--wc-checked-dot-color-light : # ABABAB ; /* 被选日期上方‘･’ */
--wc-checked-today-color-light : # FFF ; /* 被选日期（今日） */
--wc-checked-bg-light : # F5F5F5 ; /* 被选日期背景圆圈 */
--wc-checked-today-bg-light : # 409EFF ; /* 被选日期背景圆圈（今日） */
--wc-control-bg-light : # DFDFDF ; /* 底部控制条背景 */
--wc-annual-bg-light : # FFF ; /* 年面板背景 */
--wc-annual-title-color-light : # 333 ; /* 年面板左上角标题 */
--wc-annual-title-sub-color-light : # 7A7A7A ; /* 年面板左上角标题右侧信息 */
/* 深色主题，以下和浅色主题一一对应 */
--wc-bg-dark : # 000 ;
--wc-title-color-dark : # E5E5E5 ;
--wc-title-sub-color-dark : # 7A7A7A ;
--wc-opt-bg-dark : # 332D2D80 ;
--wc-opt-checked-bg-dark : # 409EFF ;
--wc-opt-color-dark : # 409EFF ;
--wc-opt-checked-color-dark : # FFF ;
--wc-week-color-dark : # ABABAB ;
--wc-date-color-dark : # E5E5E5 ;
--wc-mark-color-dark : # 5F5F5F ;
--wc-dot-color-dark : # ABABAB ;
--wc-schedule-color-dark : # 66B1FF ;
--wc-schedule-bg-dark : # 332D2D80 ;
--wc-today-color-dark : # 409EFF ;
--wc-solar-color-dark : # 409EFF ;
--wc-checked-color-dark : # E5E5E5 ;
--wc-checked-mark-color-dark : # 5F5F5F ;
--wc-checked-dot-color-dark : # ABABAB ;
--wc-checked-today-color-dark : # E5E5E5 ;
--wc-checked-bg-dark : # 262626 ;
--wc-checked-today-bg-dark : # 409EFF ;
--wc-control-bg-dark : # 262626 ;
--wc-annual-bg-dark : # 000 ;
--wc-annual-title-color-dark : # E5E5E5 ;
--wc-annual-title-sub-color-dark : # 3F3F3F ;
/** 字号 */
--wc-title-size : 46 rpx ; /** 左上角日期标题字号 */
--wc-title-sub-size : 20 rpx ; /** 左上角日期标题右侧描述信息字号 */
--wc-operator-size : 22 rpx ; /** 视图控制按钮字号 */
--wc-week-size : 20 rpx ; /** 星期字号 */
--wc-date-size : 36 rpx ; /** 日期字体字号 */
--wc-mark-size : 20 rpx ; /** 日期下方信息字体字号 */
--wc-corner-size : 16 rpx ; /** 日期角标字体字号 */
--wc-schedule-size : 16 rpx ; /** 日程字体字号 */
--wc-annual-title-size : 50 rpx ; /** 年面板左上角年份标题字体字号 */
--wc-annual-title-sub-size : 18 rpx ; /** 年面板左上角年份标题右侧信息字体字号 */
}تعديل النمط
< calendar style =" --wc-bg-light: #000; " />نظرًا لخصوصية بناء npm للبرامج الصغيرة، فإن هذا المكون ليس مكتبة js خالصة. للحصول على موجه النوع الصحيح، تحتاج إلى تحديد المسار في ملف jsconfig.json أو tsconfig.json في الدليل الجذر لـ. البرنامج المصغر .
{
"compilerOptions" : {
"paths" : {
"@lspriv/wx-calendar/*" : [
" ./node_modules/@lspriv/wx-calendar/dist/* "
]
}
}
} const { WxCalendar } = require ( '@lspriv/wx-calendar/lib' ) ;
const { YourPlugin } = require ( 'anywhere' ) ;
// WxCalendar.clearPlugin(); 清理预设插件
WxCalendar . use ( YourPlugin , options ) ; // options 插件选项
Component ( {
...
} ) import { Plugin } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 插件的 KEY 是必须的，没有此插件会被过滤掉
*/
static KEY = 'my-plugin' as const ;
/**
* 构造函数，参数为用户传入的插件选项。
* 此构造器可选择实现，如果没有提供选项配置或是其他初始化过程的话。
*/
constructor ( options ?: Record < string , any > ) {
// options 引入时的插件选项
}
} سجل خطافات دورة الحياة الثلاثة لمكون التقويم created detacched attached .
import { Plugin , PluginService , CalendarData } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 插件初始化，可选择实现该方法
* 在日历组件 created 阶段最后，在插件实例化后
* @param service PliginService实例
*/
PLUGIN_INITIALIZE ( service : PluginService ) : void {
// 获取日历组件实例
const component = service . component ;
}
/**
* 组件挂载，可选择实现该方法
* 在日历组件 attached 阶段中，此时组件的所有工具类已完成实例化，视图数据即将更新。
* 你可以在此方法里修改视图更新数据 sets，还可以调整一些工具实例的初始值。
* @param service PliginService实例
* @param sets 视图数据
*/
PLUGIN_ON_ATTACH ( service : PluginService , sets : Partial < CalendarData > ) : void {
}
/**
* 组件销毁，可选择实现该方法
* 在日历组件 detacched 阶段中
* @param service PliginService实例
*/
PLUGIN_ON_DETACHED ( service : PluginService ) : void {
}
} أضف طوابع تاريخ التعديل والحذف، واستكمل بيانات الجدول التكميلية.
import {
Plugin ,
WcYear ,
CalendarDay ,
TrackDateResult ,
TrackYearResult ,
WcScheduleInfo ,
getMarkKey ,
getAnnualMarkKey
} from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 捕获日期，可选择实现该方法
* 在此添加修改和删除【周/月/日程视图面板】的日期标记
* @param date 日期
*/
PLUGIN_TRACK_DATE ( date : CalendarDay ) : TrackDateResult | null {
// do something...
return {
schedule : [ { text : '' , color : '' , bgColor : '' , key : getMarkKey ( 'id' , MyPlugin . KEY ) } ] , // 设置日程数组，可选
corner : { text : '' , color : '' } , // 设置角标，可选
festival : { text : '' , color : '' } , // 设置节假日，可选
style : { backgroundColor : '' , color : '' } // 设置日期样式，也可传字符串形式（如 'background-color: #409EFF;color: #fff;'），可选
} ;
} ;
/**
* 捕获年份，可选择实现该方法
* 在此添加修改和删除【年面板】的日期标记
* @param year 年
*/
PLUGIN_TRACK_YEAR ( year : WcYear ) : TrackYearResult | null {
// do something...
return {
subinfo : [
{ text : '乙巳蛇年' , color : '#F56C6C' } ,
{ text : '农历初一' , color : '#409EFF' }
] ,
marks : new Map ( [
[ getAnnualMarkKey ( { month : 10 , day : 6 } ) , { rwtype : 'rest' } ] , // 休息日，置灰
[ getAnnualMarkKey ( { month : 10 , day : 7 } ) , { rwtype : 'work' } ] , // 工作日，正常
[ getAnnualMarkKey ( { month : 10 , day : 12 } ) , { sub : '#F56C6C' } ] // 自定义颜色下标
[ getAnnualMarkKey ( { month : 10 , day : 20 } ) , {
style : {
color : { light : '#fff' , dark : '#000' } , // 日期字体颜色, light浅色模式下，dark深色模式下
bgColor : { light : '#409EFF' , dark : '#409EFF' } , // 日期背景颜色
opacity : { light : 1 , dark : 1 } , // 不支持 0
bgTLRadius : { light : 50 , dark : 50 } , // 日期背景左上圆角半径
bgTRRadius : { light : 0 , dark : 0 } , // 日期背景右上圆角半径
bgBLRadius : { light : 0 , dark : 0 } , // 日期背景左下圆角半径
bgBRRadius : { light : 50 , dark : 50 } , // 日期背景右下圆角半径
bgWidth : { light : 'dateCol' , dark : 'dateCol' } // 日期背景宽度，deteCol为列宽
}
} ]
] )
}
} ;
/**
* 捕获日程信息（点击日程时执行），可选择实现该方法
* @param date 日期
* @param id 插件内标记, 由 getMarkKey 生成 key 时传入的 id，详见 PLUGIN_TRACK_DATE
*/
PLUGIN_TRACK_SCHEDULE ( date : CalendarDay , id :? string ) : WcScheduleInfo {
}
} يلتقط إجراء إيماءة المستخدم عند اكتمال الإجراء، ولكن قبل السلوك الافتراضي لمكون التقويم.
import { Plugin , PluginService , EventIntercept } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 拦截日期点击动作，可选择实现该方法
* @param service PliginService实例
* @param event 事件参数
* @param intercept 拦截器
*/
PLUGIN_CATCH_TAP ( service : PluginService , event : TouchEvent , intercept : EventIntercept ) : void {
// 获取日历组件实例
const component = service . component ;
// 若不想事件继续传播
if ( ... ) intercept ( ) ;
// intercept(0) 直接退出
// intercept(1) 继续向其他插件传播，但不会执行日历组件默认行为
}
/**
* 拦截日期跳转动作（如跳转到今日或者调用toDate方法），可选择实现该方法
* @param service PliginService实例
* @param date 要跳转的日期
* @param intercept 拦截器
*/
PLUGIN_CATCH_MANUAL ( service : PluginService , date : CalendarDay , intercept : EventIntercept ) : void { }
} ملحوظة
هناك سبعة إجراءات رئيسية في إحصائيات التقويم هذه، ويتم حاليًا التقاط إجراءات النقر على التاريخ وإجراءات الانتقال إلى التاريخ، وهي:
قم بالرد على load حدث مكون التقويم، click change viewChange .
import { Plugin , PluginService , CalendarEventDetail , OnceEmiter } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 日历加载完成，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_LOAD ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
// 获取日历组件实例
const component = service . component ;
emiter . cancel ( ) ; // 取消日历组件触发 bindload 事件。
// emiter.emit(detail); 劫持触发 bindload 事件，和 emiter.cancel 只能二选一。
}
/**
* 日期点击事件，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_CLICK ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
}
/**
* 日期选中变化，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_CHANGE ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
}
/**
* 视图变化，可选择实现该方法
* @param service PliginService实例
* @param detail 响应数据
* @param emiter 事件触发器
*/
PLUGIN_ON_VIEWCHANGE ( service : PluginService , detail : CalendarEventDetail , emiter : OnceEmiter ) : void {
}
} import { Plugin , CalendarDay , PluginService , DateRange } from '@lspriv/wx-calendar/lib' ;
class MyPlugin implements Plugin {
/**
* 日期过滤器（提供给其他组件调用的），可选择实现该方法
* @param service PliginService实例
* @param dates 待过滤的日期数组
*/
PLUGIN_DATES_FILTER ( service : PluginService , dates : Array < CalendarDay | DateRange > ) : Array < Calendar | DateRange > {
// 获取日历组件实例
const component = service . component ;
return [
[ { year : 2024 , month : 6 , day : 1 } , { year : 2024 , month : 6 , day : 28 } ] , // 日期范围
{ year : 2024 , month : 7 , day : 1 } // 单点日期
]
}
} 数据标记تحل محل بيانات المكونات الإضافية المقدمة أولاً动作捕捉响应事件الأحداث بالترتيب الذي يتم به تقديم المكونات الإضافية، بحيث يستجيب الأشخاص الذين تم تقديمهم أولاً أولاً. 有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的道友加微信
