feat: 提交模板代码

2026-01-09 09:35:44 +08:00
parent 1ba1c0de42
commit fbab15dd2c
47 changed files with 66336 additions and 0 deletions
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1,97 @@
+/* pages/date/date.wxss */
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header {
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.section {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.section-desc {
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 20rpx;
+  line-height: 1.6;
+}
+
+.example-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.example-item {
+  padding: 20rpx;
+  background-color: #f9f9f9;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #1890ff;
+}
+
+.example-label {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.example-format {
+  font-size: 24rpx;
+  color: #999;
+  margin-bottom: 12rpx;
+  font-family: 'Courier New', monospace;
+}
+
+.example-value {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.result-text {
+  flex: 1;
+  font-size: 26rpx;
+  color: #1890ff;
+  word-break: break-all;
+  font-family: 'Courier New', monospace;
+}
+
+.copy-btn {
+  padding: 8rpx 20rpx;
+  background-color: #1890ff;
+  color: #fff;
+  font-size: 24rpx;
+  border-radius: 8rpx;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.copy-btn:active {
+  background-color: #40a9ff;
+  opacity: 0.8;
+}
@@ -0,0 +1,204 @@
+// pages/date/date.ts
+import { formatTime, formatDateTime } from '../../utils/util'
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // formatTime 示例
+    formatTimeExamples: [] as Array<{ label: string; value: string }>,
+    // formatDateTime 示例 - 不同格式模板
+    formatDateTimeExamples: [] as Array<{ label: string; format: string; value: string }>,
+    // formatDateTime 示例 - 不同输入类型
+    inputTypeExamples: [] as Array<{ label: string; input: string; value: string }>,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+    this.initExamples()
+  },
+
+  /**
+   * 初始化所有示例数据
+   */
+  initExamples() {
+    const now = new Date()
+    const timestamp = now.getTime()
+    const dateString = '2024-01-15 14:30:45'
+    const chineseDateString = '2024年1月15日'
+
+    // formatTime 示例
+    const formatTimeExamples = [
+      {
+        label: '当前时间',
+        value: formatTime(now),
+      },
+      {
+        label: '指定日期',
+        value: formatTime(new Date(2024, 0, 15, 14, 30, 45)),
+      },
+      {
+        label: '昨天',
+        value: formatTime(new Date(timestamp - 24 * 60 * 60 * 1000)),
+      },
+      {
+        label: '明天',
+        value: formatTime(new Date(timestamp + 24 * 60 * 60 * 1000)),
+      },
+    ]
+
+    // formatDateTime 示例 - 不同格式模板
+    const formatDateTimeExamples = [
+      {
+        label: '默认格式（YYYY/MM/DD HH:mm:ss）',
+        format: 'YYYY/MM/DD HH:mm:ss',
+        value: formatDateTime(now),
+      },
+      {
+        label: '中文日期格式',
+        format: 'YYYY年MM月DD日 HH:mm:ss',
+        value: formatDateTime(now, 'YYYY年MM月DD日 HH:mm:ss'),
+      },
+      {
+        label: '短日期格式',
+        format: 'YY/MM/DD',
+        value: formatDateTime(now, 'YY/MM/DD'),
+      },
+      {
+        label: '12小时制格式',
+        format: 'YYYY-MM-DD hh:mm:ss A',
+        value: formatDateTime(now, 'YYYY-MM-DD hh:mm:ss A'),
+      },
+      {
+        label: '24小时制格式',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        value: formatDateTime(now, 'YYYY-MM-DD HH:mm:ss'),
+      },
+      {
+        label: '仅日期',
+        format: 'YYYY-MM-DD',
+        value: formatDateTime(now, 'YYYY-MM-DD'),
+      },
+      {
+        label: '仅时间',
+        format: 'HH:mm:ss',
+        value: formatDateTime(now, 'HH:mm:ss'),
+      },
+      {
+        label: '带毫秒',
+        format: 'YYYY-MM-DD HH:mm:ss.SSS',
+        value: formatDateTime(now, 'YYYY-MM-DD HH:mm:ss.SSS'),
+      },
+      {
+        label: '美式日期格式',
+        format: 'MM/DD/YYYY',
+        value: formatDateTime(now, 'MM/DD/YYYY'),
+      },
+      {
+        label: '完整中文格式',
+        format: 'YYYY年MM月DD日 HH时mm分ss秒',
+        value: formatDateTime(now, 'YYYY年MM月DD日 HH时mm分ss秒'),
+      },
+    ]
+
+    // formatDateTime 示例 - 不同输入类型
+    const inputTypeExamples = [
+      {
+        label: 'Date 对象',
+        input: 'new Date()',
+        value: formatDateTime(now),
+      },
+      {
+        label: '时间戳（数字）',
+        input: `${timestamp}`,
+        value: formatDateTime(timestamp),
+      },
+      {
+        label: '日期字符串（标准格式）',
+        input: dateString,
+        value: formatDateTime(dateString),
+      },
+      {
+        label: '中文日期字符串',
+        input: chineseDateString,
+        value: formatDateTime(chineseDateString),
+      },
+      {
+        label: '仅年份字符串',
+        input: '2024',
+        value: formatDateTime('2024'),
+      },
+      {
+        label: '年月字符串',
+        input: '2024/01',
+        value: formatDateTime('2024/01'),
+      },
+    ]
+
+    this.setData({
+      formatTimeExamples,
+      formatDateTimeExamples,
+      inputTypeExamples,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {},
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+
+  /**
+   * 复制文本到剪贴板
+   */
+  copyText(e: WechatMiniprogram.Touch) {
+    const { text } = e.currentTarget.dataset
+    if (!text) {
+      return
+    }
+
+    wx.setClipboardData({
+      data: text,
+      success: () => {
+        wx.showToast({
+          title: '复制成功',
+          icon: 'success',
+        }).catch(() => {
+          console.error('showToast error')
+        })
+      },
+    })
+  },
+})
@@ -0,0 +1,74 @@
+<!--pages/date/date.wxml-->
+<view class="container">
+  <view class="header">
+    <text class="title">日期时间格式化示例</text>
+  </view>
+
+  <!-- formatTime 函数示例 -->
+  <view class="section">
+    <view class="section-title">formatTime 函数示例</view>
+    <view class="section-desc">固定格式：YYYY/MM/DD HH:mm:ss</view>
+    <view class="example-list">
+      <view class="example-item" wx:for="{{formatTimeExamples}}" wx:key="label">
+        <view class="example-label">{{item.label}}：</view>
+        <view class="example-value">
+          <text class="result-text" selectable="{{true}}">{{item.value}}</text>
+          <text
+            class="copy-btn"
+            data-text="{{item.value}}"
+            bindtap="copyText"
+            wx:if="{{item.value}}"
+          >
+            复制
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- formatDateTime 函数示例 - 不同格式模板 -->
+  <view class="section">
+    <view class="section-title">formatDateTime 函数示例 - 不同格式模板</view>
+    <view class="section-desc">支持自定义格式模板，灵活配置日期时间显示格式</view>
+    <view class="example-list">
+      <view class="example-item" wx:for="{{formatDateTimeExamples}}" wx:key="label">
+        <view class="example-label">{{item.label}}</view>
+        <view class="example-format">格式模板：{{item.format}}</view>
+        <view class="example-value">
+          <text class="result-text" selectable="{{true}}">{{item.value}}</text>
+          <text
+            class="copy-btn"
+            data-text="{{item.value}}"
+            bindtap="copyText"
+            wx:if="{{item.value}}"
+          >
+            复制
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- formatDateTime 函数示例 - 不同输入类型 -->
+  <view class="section">
+    <view class="section-title">formatDateTime 函数示例 - 不同输入类型</view>
+    <view class="section-desc">支持 Date 对象、时间戳、日期字符串等多种输入类型</view>
+    <view class="example-list">
+      <view class="example-item" wx:for="{{inputTypeExamples}}" wx:key="label">
+        <view class="example-label">{{item.label}}</view>
+        <view class="example-format">输入：{{item.input}}</view>
+        <view class="example-value">
+          <text class="result-text" selectable="{{true}}">{{item.value}}</text>
+          <text
+            class="copy-btn"
+            data-text="{{item.value}}"
+            bindtap="copyText"
+            wx:if="{{item.value}}"
+          >
+            复制
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>