菜鸟-创作你的创作

利用vue3编写一个有趣的牛马时钟并集成到小程序

lichongyang

下面给你一个可直接运行的 Vue3 版“牛马时钟（工时倒计时 + 趣味文案）”，然后告诉你如何无缝集成到微信小程序（mpvue / uni-app / taro / 原生自定义组件套壳）。

你可以直接复制使用。

🎯 功能说明：牛马时钟（Vue3 版本）

🚀 一、Vue3 完整版本（可直接跑）

1）CowHorseClock.vue

<template>
  <div class="clock-wrapper">
    <h2 class="title">🐮🐴 牛马时钟</h2>

    <div class="time">{{ currentTime }}</div>

    <div class="status">
      <p v-if="isWorking">💼 距离下班还有：{{ timeToOff }}</p>
      <p v-else>🎉 距离上班还有：{{ timeToWork }}</p>
    </div>

    <div class="quote">“{{ quote }}”</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const currentTime = ref("");
const timeToOff = ref("");
const timeToWork = ref("");
const isWorking = ref(false);

const quotes = [
  "上班这件事，只要不去，就不会发生。",
  "打工人打工魂，打工都是人上人。",
  "工资就像月经，一个月一次，一周就没。",
  "下班，是打工人最后的倔强。",
  "我不是在上班，就是在去上班的路上。",
];

const quote = ref(quotes[Math.floor(Math.random() * quotes.length)]);

function updateClock() {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString();

  const workStart = new Date(now);
  workStart.setHours(9, 0, 0);

  const workEnd = new Date(now);
  workEnd.setHours(18, 0, 0);

  if (now >= workStart && now < workEnd) {
    isWorking.value = true;
    timeToOff.value = formatTime(workEnd - now);
  } else {
    isWorking.value = false;
    let nextWork = new Date(now);
    if (now < workStart) {
      nextWork = workStart;
    } else {
      nextWork.setDate(now.getDate() + 1);
      nextWork.setHours(9, 0, 0);
    }
    timeToWork.value = formatTime(nextWork - now);
  }
}

function formatTime(ms) {
  let s = Math.floor(ms / 1000);
  const h = Math.floor(s / 3600);
  s %= 3600;
  const m = Math.floor(s / 60);
  s %= 60;
  return `${h}小时 ${m}分 ${s}秒`;
}

let timer;
onMounted(() => {
  updateClock();
  timer = setInterval(updateClock, 1000);
});

onUnmounted(() => clearInterval(timer));
</script>

<style scoped>
.clock-wrapper {
  text-align: center;
  padding: 20px;
  font-family: "Arial";
}

.title {
  font-size: 26px;
  margin-bottom: 20px;
}

.time {
  font-size: 32px;
  margin: 10px 0;
}

.status {
  font-size: 20px;
  margin: 15px 0;
}

.quote {
  margin-top: 20px;
  font-size: 18px;
  color: #666;
  font-style: italic;
}
</style>

🚀 二、如何集成到微信小程序？

你有 4 种选择，我给你最简单和最推荐的：

✅ 方案 1：使用 uni-app（推荐，0 改动）

Vue3 代码几乎 不用改，直接迁移：

1）HBuilderX 导入项目

把上述组件放进：

/components/CowHorseClock.vue

2）在页面中使用

<template>
  <view>
    <CowHorseClock />
  </view>
</template>

<script setup>
import CowHorseClock from "@/components/CowHorseClock.vue";
</script>

3）点击运行 → “微信小程序”

uni-app 会自动转成小程序语法。

✔ Vue3
✔ Composition API
✔ 页面、样式全部兼容

这是最轻松的方式。

✅ 方案 2：使用 Taro（Vue3 模式）

同样几乎不用改。

安装：

taro init cowhorse-clock
选择 Vue3

把 CowHorseClock.vue 放到 src/components/

因为 taro 与小程序标签类似，但支持 Vue3，所以兼容。

⚠️ 原生微信小程序（不推荐直接上 Vue3）

微信小程序本身不支持 Vue，官方框架是 WXML。

如果你一定要原生小程序用它，必须借助 Kbone / WeChat Miniprogram WebView 这样：

原理：

但功能（分享、支付）受限。

🚀 三、你想要哪个增强版本？

我还可以帮你增加这些功能：

🧩 可扩展功能

退出移动版