聚会时最怕的就是大家坐在一起没话聊，冷场氛围特别尴尬。为了解决这个问题，我借助AI编程的能力开发了一款六合一真心话小程序，整合了多种互动玩法，现在把完整的制作流程和代码分享给大家。
需求梳理与功能设计
首先我们需要明确小程序的核心功能，六合一指的是包含六种不同类型的真心话玩法，分别是：日常吐槽、情感隐私、趣味挑战、职场吐槽、童年回忆、脑洞大开。每个分类下都有对应的随机题目库，用户选择分类后点击按钮就能随机获取题目。
核心功能点如下：
- 分类选择：展示六个玩法分类，支持点击切换
- 随机抽题：点击抽题按钮从对应分类题库随机返回题目
- 题目展示：清晰展示抽到的题目内容
- 题库管理：支持后续扩展题目内容
AI编程辅助开发流程
我们不需要从零手写所有代码，只需要把需求清晰描述给AI，让它生成基础框架和核心逻辑，我们再根据实际情况调整即可。我使用的需求描述如下：帮我开发一个微信小程序，包含六个真心话分类，每个分类有独立题库，点击分类后点击抽题按钮随机返回对应分类的题目，使用原生小程序语法开发。
AI返回的基础代码结构后，我做了部分调整，下面是核心的页面逻辑代码：
// 页面数据定义
Page({
data: {
// 六个分类列表
categories: [
{ id: 1, name: '日常吐槽', questions: ['最近一次想吐槽的人是谁？', '你最讨厌的社交行为是什么？', '你最近一次熬夜是因为什么？'] },
{ id: 2, name: '情感隐私', questions: ['你最近一次心动是因为什么？', '你最遗憾的感情经历是什么？', '你理想中的伴侣是什么样？'] },
{ id: 3, name: '趣味挑战', questions: ['现场模仿一个你喜欢的明星', '用方言说一句绕口令', '给大家表演一个你的特长'] },
{ id: 4, name: '职场吐槽', questions: ['你最讨厌的同事行为是什么？', '你遇到过最离谱的工作要求是什么？', '你理想中的工作环境是什么样？'] },
{ id: 5, name: '童年回忆', questions: ['你童年最爱的动画片是什么？', '你小时候最想要的玩具是什么？', '你童年最难忘的一件事是什么？'] },
{ id: 6, name: '脑洞大开', questions: ['如果能穿越到过去，你想改变哪件事？', '如果给你一百万你会怎么花？', '如果动物会说话，你最想和哪种动物聊天？'] }
],
currentCategory: null, // 当前选中的分类
currentQuestion: '', // 当前抽到的题目
showQuestion: false // 是否展示题目
},
// 选择分类
chooseCategory(e) {
const index = e.currentTarget.dataset.index
this.setData({
currentCategory: this.data.categories[index],
showQuestion: false,
currentQuestion: ''
})
},
// 随机抽题
drawQuestion() {
if (!this.data.currentCategory) {
wx.showToast({
title: '请先选择分类',
icon: 'none'
})
return
}
const questions = this.data.currentCategory.questions
const randomIndex = Math.floor(Math.random() * questions.length)
this.setData({
currentQuestion: questions[randomIndex],
showQuestion: true
})
}
})页面结构代码
接下来是页面的WXML结构，负责展示分类按钮、抽题按钮和题目内容：
<view class="container">
<view class="category-list">
<view
class="category-item {{currentCategory && currentCategory.id === item.id ? 'active' : ''}}"
wx:for="{{categories}}"
wx:key="id"
data-index="{{index}}"
bindtap="chooseCategory"
>
{{item.name}}
</view>
</view>
<view class="draw-btn" bindtap="drawQuestion">
点击抽题
</view>
<view class="question-box" wx:if="{{showQuestion}}">
<view class="question-title">当前题目：</view>
<view class="question-content">{{currentQuestion}}</view>
</view>
</view>样式调整
最后加上基础的WXSS样式，让页面更美观：
.container {
padding: 20rpx;
min-height: 100vh;
background-color: #f5f5f5;
}
.category-list {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
margin-bottom: 40rpx;
}
.category-item {
padding: 20rpx 30rpx;
background-color: #fff;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}
.category-item.active {
background-color: #4a90e2;
color: #fff;
}
.draw-btn {
width: 60%;
margin: 0 auto 40rpx;
padding: 30rpx 0;
background-color: #4a90e2;
color: #fff;
text-align: center;
border-radius: 15rpx;
font-size: 32rpx;
font-weight: bold;
}
.question-box {
padding: 40rpx;
background-color: #fff;
border-radius: 15rpx;
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}
.question-title {
font-size: 28rpx;
color: #666;
margin-bottom: 20rpx;
}
.question-content {
font-size: 36rpx;
color: #333;
font-weight: bold;
text-align: center;
line-height: 1.5;
}后续扩展建议
目前这个版本是基础功能，你还可以借助AI编程继续扩展更多功能：
- 增加题目自定义功能，允许用户自己添加题目到题库
- 加入分享功能，抽到的题目可以直接分享到群聊
- 增加题目计数功能，统计每个用户抽题的次数
- 优化UI样式，添加动画效果提升使用体验
整个开发过程借助AI编程，从需求到完成基础版本只花了不到两小时，即使是编程新手也能快速上手，如果你有类似的小工具需求，也可以尝试用AI编程快速实现。