

> 标签：微信小程序、WorkBuddy、AI 编程、低代码、趣味工具

## 一、前言

最近在学习微信小程序开发，但自己从零写页面总觉得慢。于是想到用 **WorkBuddy** 来辅助：我把需求描述清楚，它直接帮我生成页面结构、样式和逻辑代码，我再在微信开发者工具里微调即可。

这篇文章记录了我用 WorkBuddy 完成一个「趣味小工具」小程序的全过程。小程序包含 5 个常用小功能：

- **今天吃什么**：随机推荐菜品，拯救选择困难症
- **幸运大转盘**：点击抽奖，转盘动画+震动反馈
- **答案之书**：翻开书本，随机给出一个答案
- **掷骰子**：支持统计和运势解读
- **今日运势**：每日运势卡片，含幸运色、幸运数字

最终效果如下：
![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/bae5b01163117cddfbc00dac34e077bc.png)
如果你也想快速完成一个类似的小工具小程序，跟着本文操作即可。

---

## 二、准备工作

### 2.1 注册微信小程序账号

1. 访问 [微信公众平台](https://mp.weixin.qq.com/)，注册「小程序」类型账号
2. 记录你的 **AppID**（开发设置 → 开发 ID）
3. 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

### 2.2 项目技术栈

- 微信小程序原生框架（WXML + WXSS + JS + JSON）
- 无需后端，纯前端实现
- WorkBuddy 负责生成代码结构和页面逻辑

---

## 三、用 WorkBuddy 生成项目

### 3.1 第一步：给 WorkBuddy 提需求

直接复制下面的提示词到 WorkBuddy 对话框：
![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/8b06e4f0d1e282e55fc5e46ed0828025.png)

```text
我要开发一个微信小程序，名字叫「趣味小工具」。

首页是工具列表，包含以下功能入口：
1. 今天吃什么 —— 随机推荐菜品，拯救选择困难症
2. 幸运大转盘 —— 点击抽奖，转盘旋转动画
3. 答案之书 —— 点击书本翻开，随机显示一条答案
4. 掷骰子 —— 掷骰子并显示结果，最好带统计
5. 今日运势 —— 显示今日运势卡片，包括综合运势、财运、事业、爱情、健康、今日提示、幸运色、幸运数字

要求：
- 使用微信小程序原生语法（WXML、WXSS、JS、JSON）
- 配色以珊瑚红 #FF6B6B 和橙色 #FF8E53 为主
- 每个页面都要有返回首页的入口
- 增加震动反馈（wx.vibrateShort）
- 帮我生成完整项目结构和所有代码文件
```

> 小提示：描述越具体，WorkBuddy 生成的代码越贴近你的预期。如果第一次不满意，可以继续补充："把首页改成两列网格"、"给转盘加上 8 个扇区"等。

### 3.2 WorkBuddy 会返回什么？

通常情况下，WorkBuddy 会返回：

1. 完整的项目目录结构
2. `app.json`、`app.wxss`、`app.js` 等全局文件
3. 每个页面的 `.wxml`、`.wxss`、`.js`、`.json` 文件
4. 关键代码的说明
![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/f93301ed0cc87ba19c41f295ded25709.png)
你可以让它把代码直接写到你的项目目录，也可以手动复制。本文我采用「手动复制到微信开发者工具」的方式，方便讲解每一步。

---

## 四、项目目录结构

在微信开发者工具中新建项目后，最终目录如下：

```
mini-program/
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json
├── pages/
│   ├── index/          # 首页：工具列表
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
│   ├── eat/            # 今天吃什么
│   ├── wheel/          # 幸运大转盘
│   ├── answer/         # 答案之书
│   ├── dice/           # 掷骰子
│   └── fortune/        # 今日运势
```

---

## 五、全局配置

### 5.1 app.json 页面注册

```json
{
  "pages": [
    "pages/index/index",
    "pages/eat/eat",
    "pages/wheel/wheel",
    "pages/answer/answer",
    "pages/dice/dice",
    "pages/fortune/fortune"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FF6B6B",
    "navigationBarTitleText": "趣味小工具",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#f5f5f5"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
```

**关键点**：
- `navigationBarBackgroundColor` 设置导航栏为珊瑚红
- `pages` 数组第一个页面是首页

### 5.2 app.wxss 全局样式

```css
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.container {
  padding: 20rpx;
  min-height: 100vh;
}

.card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.btn-primary {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  border: none;
  border-radius: 50rpx;
}
```

> `rpx` 是微信小程序的自适应单位，750rpx = 屏幕宽度，推荐全部使用 rpx。

---

## 六、首页：工具列表

### 6.1 效果预览
![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/bc7da534ae66369401fc2da508e803e6.png)

### 6.2 index.wxml 页面结构

```xml
<view class="container">
  <view class="header">
    <view class="header-title">趣味小工具</view>
    <view class="header-desc">生活小帮手，每日有惊喜</view>
  </view>

  <view class="tool-grid">
    <view class="tool-item"
          wx:for="{{tools}}"
          wx:key="id"
          bindtap="goToPage"
          data-url="{{item.url}}">
      <view class="tool-icon" style="background:{{item.color}}">
        <text class="emoji">{{item.icon}}</text>
      </view>
      <view class="tool-name">{{item.name}}</view>
      <view class="tool-desc">{{item.desc}}</view>
    </view>
  </view>
</view>
```

### 6.3 index.js 数据绑定

```javascript
Page({
  data: {
    tools: [
      { id: 1, name: '今天吃什么', desc: '选择困难症救星', icon: '🍜', color: '#FF6B6B', url: '/pages/eat/eat' },
      { id: 2, name: '幸运大转盘', desc: '转一转好运来', icon: '🎡', color: '#FF8E53', url: '/pages/wheel/wheel' },
      { id: 3, name: '答案之书', desc: '心中有惑问我', icon: '📖', color: '#4ECDC4', url: '/pages/answer/answer' },
      { id: 4, name: '掷骰子', desc: '遇事不决掷一掷', icon: '🎲', color: '#45B7D1', url: '/pages/dice/dice' },
      { id: 5, name: '今日运势', desc: '看看今天运气', icon: '🔮', color: '#A55EEA', url: '/pages/fortune/fortune' }
    ]
  },

  goToPage(e) {
    const url = e.currentTarget.dataset.url
    wx.navigateTo({ url })
  }
})
```

### 6.4 技术要点

- `wx:for` + `wx:key` 循环渲染列表
- `bindtap` 绑定点击事件
- `data-url` 配合 `e.currentTarget.dataset.url` 传参跳转

---

## 七、今天吃什么

### 7.1 效果预览
![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/14b8d049f2f809f9e5b966382be62b29.png)

### 7.2 核心逻辑

```javascript
randomFood() {
  const foods = this.data.foods
  const index = Math.floor(Math.random() * foods.length)
  const food = foods[index]

  let history = this.data.history
  if (history.length === 0 || history[0].name !== food.name) {
    history = [food, ...history].slice(0, 5)
  }

  this.setData({
    food,
    showResult: true,
    history
  })

  // 轻微震动反馈
  wx.vibrateShort({ type: 'light' })
}
```

### 7.3 设计思路

- 用数组存储菜品（包含 emoji、名称、标签）
- 随机取一个，并限制历史记录最多 5 条
- 用 `showResult` 控制结果展示
- 加入 `wx.vibrateShort` 增强交互反馈

---

## 八、幸运大转盘

### 8.1 效果预览

![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/f84999575874291f963b720b5cdaa89a.png)

### 8.2 核心逻辑

```javascript
spin() {
  if (this.data.rotating) return

  this.setData({ rotating: true, showResult: false })

  const prizeIndex = Math.floor(Math.random() * this.data.prizes.length)
  const baseRotation = 360 * 5
  const targetAngle = 360 - (prizeIndex * this.data.sectorAngle) - (this.data.sectorAngle / 2)
  const totalDeg = this.data.currentDeg + baseRotation + targetAngle

  this.setData({ currentDeg: totalDeg })

  setTimeout(() => {
    const prize = this.data.prizes[prizeIndex]
    this.setData({
      rotating: false,
      showResult: true,
      resultName: prize.name,
      resultEmoji: prize.icon
    })
    wx.vibrateShort({ type: 'medium' })
  }, 4200)
}
```

### 8.3 技术要点

- 转盘用 8 个扇形组成，`clip-path` 裁出扇形
- 旋转角度 = 已转角度 + 5 整圈 + 目标扇区角度
- 通过 CSS `transition` 控制 4 秒动画曲线
- 动画结束后再显示中奖结果

---

## 九、答案之书

### 9.1 效果预览
![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/7b3bd1855a3433df5d8920a51452aedf.png)

### 9.2 核心逻辑

```javascript
toggleBook() {
  if (this.data.opened) {
    this.setData({ opened: false })
  } else {
    const index = Math.floor(Math.random() * this.data.answers.length)
    this.setData({
      opened: true,
      answer: this.data.answers[index]
    })
    wx.vibrateShort({ type: 'light' })
  }
}
```

### 9.3 设计思路

- 用 `opened` 变量控制封面/内页切换
- 预置 20+ 条答案文案
- 合上再翻开会重新抽取答案

---

## 十、掷骰子

### 10.1 效果预览

![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/d27d634783dc4396728f5f2b1619713d.png)

### 10.2 核心逻辑

```javascript
roll() {
  if (this.data.rolling) return
  this.setData({ rolling: true, showResult: false })

  let count = 0
  const interval = setInterval(() => {
    this.setData({ result: Math.floor(Math.random() * 6) + 1 })
    count++
    if (count >= 10) {
      clearInterval(interval)
      const finalResult = Math.floor(Math.random() * 6) + 1
      // 更新结果和统计
      this.setData({ result: finalResult, rolling: false, showResult: true })
      wx.vibrateShort({ type: 'medium' })
    }
  }, 100)
}
```

### 10.3 设计思路

- 用 `setInterval` 模拟骰子滚动动画（10 次随机切换）
- 最终结果停止后给出运势解读
- 保留最近 5 次投掷记录

---

## 十一、今日运势

### 11.1 效果预览

![image.png](https://developer.qcloudimg.com/http-save/yehe-11585609/a428caa794f1a6d6687364cc9eefa578.png)

### 11.2 核心逻辑

```javascript
getFortune() {
  const luckLevels = ['大吉', '中吉', '小吉', '平', '小凶']
  const starStrs = ['⭐⭐⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐', '⭐⭐']
  // ...
  const luckIndex = Math.floor(Math.random() * luckLevels.length)

  this.setData({
    showResult: true,
    fortune: {
      icon: icons[...],
      stars: starStrs[luckIndex],
      wealth: wealths[...],
      career: careers[...],
      love: loves[...],
      health: healths[...],
      tip: tips[...],
      color: colors[...].color,
      colorName: colors[...].name,
      number: Math.floor(Math.random() * 99) + 1
    }
  })
  wx.vibrateShort({ type: 'light' })
}
```

### 11.3 设计思路

- 卡片式布局展示多维运势
- 幸运色用小圆点直观展示
- 幸运数字用 1-99 随机生成

---

## 十二、微信开发者工具预览

### 12.1 导入项目

1. 打开微信开发者工具
2. 点击「+」新建项目
3. 选择项目目录为 `mini-program`
4. 填入你的 AppID（或选择测试号）
5. 点击「确定」

### 12.2 常见调试问题

| 问题 | 解决方案 |
|------|---------|
| 页面白屏 | 检查 `app.json` 的 `pages` 配置是否完整 |
| 样式不生效 | 检查 WXSS 选择器是否与 WXML 结构匹配 |
| 转盘不转 | 检查 `transition` 属性是否动态绑定成功 |
| 真机无震动 | 真机测试才支持 `wx.vibrateShort`，模拟器无效 |

### 12.3 真机预览

点击开发者工具顶部的「真机调试」→「预览」，微信扫码即可在手机上体验完整效果。

---

## 十三、上传发布

### 13.1 上传代码

1. 在微信开发者工具右上角点击「上传」
2. 填写版本号，例如 `1.0.0`
3. 填写项目备注：新增趣味小工具首页及 5 个子功能
4. 上传成功后登录微信公众平台

### 13.2 提交审核

1. 进入「版本管理」
2. 找到刚才上传的开发版本，点击「提交审核」
3. 填写功能页面、服务类目、测试账号（如需要）
4. 等待微信审核（通常 1-3 个工作日）

### 13.3 发布上线

审核通过后，点击「发布」即可正式上线。

---

## 十四、总结

通过 WorkBuddy，我不到 30 分钟就拿到了完整的小程序代码结构，剩下的时间主要花在：

1. 在微信开发者工具里验证效果
2. 微调动画时长和颜色
3. 补充历史记录、统计等小细节

如果你也想快速搭建一个类似的小工具小程序，建议按下面的流程：

```
1. 明确功能需求 → 2. 向 WorkBuddy 描述清楚 → 3. 获取代码并导入开发者工具 → 4. 预览调试 → 5. 上传发布
```

这套方法特别适合做 MVP、活动页、小工具集合类的小程序。后续可以继续扩展：

- 接入云开发数据库，保存用户历史
- 增加分享卡片，提升传播
- 接入微信广告实现变现
- 接入 AI 接口，做智能版「答案之书」

希望这篇实战教程对你有帮助！

---
> 相关链接
[WorkBuddy 从入门到精通：手把手教你打造你的 AI 数字同事-腾讯云开发者社区-腾讯云](https://cloud.tencent.com/developer/article/2704994)
[2026年中大促|AI 领航智绘未来-腾讯云开发者社区-腾讯云](https://cloud.tencent.com/developer/article/2683444)

最近在学习微信小程序开发，但自己从零写页面总觉得慢。于是想到用 WorkBuddy 来辅助：我把需求描述清楚，它直接帮我生成页面结构、样式和逻辑代码，我再在微信开发者工具里微调即可。

WorkBuddy 实战：30 分钟搭建一个「趣味小工具」微信小程序

编程语言

用WorkBuddy辅助开发微信小程序「趣味小工具」，涵盖今天吃什么、幸运大转盘、答案之书、掷骰子、今日运势5个功能。文章提供完整项目结构、核心代码及配置方法，从需求描述到代码生成、调试发布全流程实操，适合快速搭建小工具类小程序。

代码解释

数据库

WorkBuddy 

AI编程

JSON

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

2026上云采购 | AI焕新·智启新局

coding

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

WorkBuddy 实战：30 分钟搭建一个「趣味小工具」微信小程序-腾讯云开发者社区-腾讯云

WorkBuddy 实战：30 分钟搭建一个「趣味小工具」微信小程序

WorkBuddy 实战：30 分钟搭建一个「趣味小工具」微信小程序

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐