微信小程序日历.zip

## WX Calendar > <!-- https://shields.io/ -->     微信小程序日历 > · 年月周日程视图 > · 支持skyline和webview渲染 > · 支持插件扩展 ### 设计 [](https://imgse.com/i/pizCOOg) ### 使用 小程序基础库 `SDKVersion` >= 3.0.0 #### 1.安装 ```bash npm i @lspriv/wx-calendar -S ``` #### 2.构建 微信小程序开发工具菜单栏：`工具` --> `构建 npm` [*官方文档*](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#_2-%E6%9E%84%E5%BB%BA-npm) #### 3.引入配置 在页面或全局配置文件中配置 ```json { "usingComponents": { "calendar": "@lspriv/wx-calendar" } } ``` #### 4.页面使用 在页面wxml文件中使用 ```html <calendar id="calendar" bindload="handleLoad" /> ``` > [!IMPORTANT] > 请在 bindload 事件后执行 selectComponent('#calendar') 操作。 ### 二次开发 alpha分支是我的工作分支也是进度最新的分支，issue/*分支是解决issue里提到的问题，develop分支相当于你们的SIT，发pr到master打tag，拉取哪个分支自行考量 #### 启动 ```bash npm install # 启动，默认skyline配置 npm run dev # 设置webview # npm run dev @webview 或者 npm run dev @W ``` #### 打包 ```bash npm run build ``` #### 发包（预览包） ```bash npm run package ``` > [!NOTE] > 这个发包命令执行了打包、发包和推送仓库三部分，所以不必重复执行打包命令 #### 测试 测试尚未写完，等我抽空就写 :rofl: ### 多端支持 #### Donut 需要开启以下选项，开发工具右上角 -> 详情 -> 本地设置 - 使用 SWC 编译脚本文件 - 编译 worklet 代码 - Android XWeb SDK，在 project.miniapp.json中开启 #### UniApp 1. 项目根目录下创建 wxcomponents 文件夹，将打包后dist里的文件拷贝过来放到单独的一个文件夹，比如 wxcomponents/wx-calendar/** 2. 在 `pages.json` 的 `globalStyle` 中配置 `usingComponents` ```json { "globalStyle": { "wx-calendar": "/components/wx-calendar" } } ``` 注意事项请参考 [UniApp小程序自定义组件支持](https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html) #### Taro 参考 `Taro 使用原生模块` > [!NOTE] > 如果在 Taro 项目引用了小程序原生的组件，那么该项目将不再具备多端转换的能力。 ### 类型说明 以下出现的类型定义： ```typescript type CalendarDay = { year: number; // 年 month: number; // 月 day: number; // 日 }; ``` ### Props 属性 以下所有属性都是可选填属性 <table> <tr> <th>属性</th> <th>类型</th> <th>说明</th> <th>默认值</th> </tr> <tr> <td>view</td> <td>string</td> <td>视图</td> <td>month[week|schedule]</td> </tr> <tr> <td>marks</td> <td>array</td> <td>日程、角标和节假日标记</td> <td>[]</td> </tr> <tr> <td>vibrate</td> <td>boolean</td> <td>点选日期是否震动</td> <td>true</td> </tr> <tr> <td>darkmode</td> <td>boolean</td> <td>深色模式（跟随系统）</td> <td>true</td> </tr> <tr> <td>date</td> <td>string|number</td> <td>选中日期</td> <td>xxxx-xx-xx|timestamp</td> </tr> <tr> <td>weekstart</td> <td>number</td> <td>周首日，0|1|2|3|4|5|6</td> <td>0</td> </tr> <tr> <td>style</td> <td>string</td> <td>设置主题样式变量</td> <td>''</td> </tr> <tr> <td>sameChecked</td> <td>boolean</td> <td>保持选中日期样式一致</td> <td>false</td> </tr> <tr> <td>font</td> <td>string</td> <td>设置字体</td> <td>''</td> </tr> <tr> <td>customNavBar</td> <td>boolean</td> <td>组件所在页面是否自定义导航栏</td> <td>true</td> </tr> <tr> <td>areas</td> <td>array</td> <td>自定义布局区域</td> <td>['header', 'title', 'subinfo', 'today', 'viewbar', 'dragbar']</td> </tr> <tr> <td>viewGesture</td> <td>boolean</td> <td>是否滑动手势控制视图</td> <td>true</td> </tr> </table> > [!TIP] > 1.7.0+版本已经移除了固定视图，新增手势控制属性 `viewGesture` ，用一下方式实现固定视图，有更高的自由度 固定视图的新方式 ```html <!-- 固定为周视图 --> <!-- view 默认初始视图 --> <!-- view-gesture 取消手势控制 --> <!-- areas 只保留四个区域，将viewbar和dragbar移除 --> <calendar view="week" view-gesture="{{ false }}" areas="{{ ['header', 'title', 'subinfo', 'today'] }}" /> ``` > [!TIP] > 关于属性 `marks` > ```typescript > // 标记里的日期，要么输入年月日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'; // 日程｜角标｜节假日 > text: string; // 内容 > color: string; // 文本色 > bgColor?: string; // 背景色，type为schedule时可选 > } > // 样式标记 > type StyleMark = { > year?: number; // 年 > month?: number; // 月 > day?: number; // 日 > date?: string | number | Date; // 日期 yyyy-mm-dd | timestamp | > style: string | Record<string, string | number>; > } > ``` > 角标内容最好一个字符长度，只对一个字符校正了位置，多出的请自行调整位置 ### Events 事件 [***`bindload`***](#bindload) 日历加载完成 ```typescript type LoadEventDetail = { checked: CalenderDay; // 当前选择日期 view: 'week' | 'month' | 'schedule'; // 当前视图 range: [start: CalenderDay, end: CalenderDay]; // 当前渲染的月份范围 } ``` 获取组件实例 ```html <calendar id="calendar" bindload="handleLoad" /> ``` ```typescript 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`***](#bindload) 日期点击 ```typescript type LoadEventDetail = { checked: CalenderDay; // 当前点击日期 view: 'week' | 'month' | 'schedule'; // 当前视图 } ``` > [!NOTE] > 日期点击事件，若有必要请自行防抖处理 [***`bindchange`***](#bindchange) 日期选中变化 ```typescript type ChangeEventDetail = { checked: CalenderDay; // 当前选择日期 view: 'week' | 'month' | 'schedule'; // 当前视图 range: [start: CalenderDay, end: CalenderDay]; // 当前渲染的月份范围 } ``` [***`bindviewchange`***](#bindviewchange) 面板视图变化 ```typescript type ViewChangeEventDetail = { checked: CalenderDay; // 当前选择日期 view: 'week' | 'month' | 'schedule'; // 当前视图 } ``` [***`bindschedule`***](#bindviewchange) 点击日程触发 ```typescript type ScheduleEventDetail = { schedules?: Array<ScheduleEventDetail>; // 所有日程 schedule?: ScheduleEventDetail; // 当前点击日程 all: boolean; // 是否所有日程 } ``` ### Methods 方法 [***`checked`***](#toDate) 选中日期 ```typescript { /** * @param date 选中日期 * yyyy-mm-dd | timestamp | Date | CalendarDay *