微信小程序 聚合摇骰喝酒工具 完整实现（含源码）

效果：搜索 聚合摇骰喝酒

前言

本文从零实现一款聚会喝酒聚合小程序，包含：摇骰子、大话骰、罚酒转盘、真心话大冒险 4 大核心功能。技术栈：原生微信小程序 + JS + CSS 动画，无后端、无云开发，个人可直接上线。适合场景：KTV、饭局、团建、宿舍聚会，点开即玩，无需下载。

一、项目结构

├── pages
│   ├── index        // 首页（功能入口）
│   ├── dice         // 摇骰子
│   ├── dahua        // 大话骰
│   ├── wheel        // 罚酒转盘
│   └── truth        // 真心话大冒险
├── utils
│   └── common.js    // 公共工具函数
├── app.js
├── app.json
└── app.wxss

二、app.json 配置（直接复制）

{
  "pages": [
    "pages/index/index",
    "pages/dice/dice",
    "pages/dahua/dahua",
    "pages/wheel/wheel",
    "pages/truth/truth"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2b2b2b",
    "navigationBarTitleText": "喝酒摇骰神器",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#1a1a1a"
  },
  "sitemapLocation": "sitemap.json"
}

三、核心功能 1：摇骰子（完整源码）

pages/dice/dice.wxml

<view class="container">
  <view class="title">摇骰子</view>
  <view class="dice-box" bindtap="rollDice">
    <view class="dice">{{num}}</view>
  </view>
  <view class="tip">点击屏幕开始摇</view>
  <view class="drink">罚酒：{{tipText}}</view>
</view>

pages/dice/dice.wxss

.container{padding:30rpx;color:#fff;background:#1a1a1a;min-height:100vh;}
.title{font-size:36rpx;text-align:center;margin-bottom:60rpx;}
.dice-box{display:flex;align-items:center;justify-content:center;margin:60rpx 0;}
.dice{width:120rpx;height:120rpx;background:#fff;border-radius:12rpx;
  display:flex;align-items:center;justify-content:center;color:#000;font-size:48rpx;}
.tip{text-align:center;margin:20rpx 0;color:#999;}
.drink{text-align:center;color:#ff4444;font-size:32rpx;margin-top:30rpx;}

pages/dice/dice.js（核心源码）

Page({
  data: {
    num: 1,
    tipText: '点击开始'
  },

  rollDice() {
    let that = this;
    let count = 0;
    let timer = setInterval(() => {
      let rand = Math.floor(Math.random() * 6) + 1;
      that.setData({ num: rand });
      count++;
      if (count > 15) {
        clearInterval(timer);
        that.getResult(that.data.num);
      }
    }, 60);
  },

  getResult(num) {
    let arr = [
      '没事',
      '喝一口',
      '喝半杯',
      '喝一杯',
      '找一人陪喝',
      '全桌喝'
    ];
    this.setData({ tipText: arr[num - 1] });
  }
})

四、核心功能 2：罚酒转盘（完整源码）

pages/wheel/wheel.wxml

<view class="container">
  <view class="title">罚酒大转盘</view>
  <view class="wheel-box">
    <image src="/images/wheel.png" mode="widthFix" style="transform:rotate({{angle}}deg)"></image>
  </view>
  <button bindtap="startSpin">开始转动</button>
  <view class="result">{{result}}</view>
</view>

pages/wheel/wheel.js

Page({
  data: {
    angle: 0,
    result: '等待结果'
  },

  startSpin() {
    let randAngle = 1800 + Math.floor(Math.random() * 1800);
    this.setData({ angle: randAngle });

    setTimeout(() => {
      let list = ['喝一口', '喝半杯', '喝一杯', '免罚', '找朋友喝', '全桌喝'];
      let res = list[Math.floor(Math.random() * list.length)];
      this.setData({ result: '结果：' + res });
    }, 3000);
  }
})

五、核心功能 3：真心话大冒险（源码）

pages/truth/truth.js

Page({
  data: {
    content: '点击开始'
  },

  getOne() {
    let list = [
      '真心话：你谈过几次恋爱？',
      '真心话：最尴尬的一件事？',
      '大冒险：和左边的人喝一杯',
      '大冒险：唱一句歌',
      '喝一口',
      '免罚'
    ];
    this.setData({
      content: list[Math.floor(Math.random() * list.length)]
    })
  }
})

六、首页导航（index）

pages/index/index.wxml

<view class="menu">
  <view bindtap="goDice">🎲 摇骰子</view>
  <view bindtap="goWheel">🎡 罚酒转盘</view>
  <view bindtap="goTruth">🗣 真心话大冒险</view>
  <view bindtap="goDahua">🎭 大话骰</view>
</view>

pages/index/index.js

Page({
  goDice(){wx.navigateTo({url:'/pages/dice/dice'})},
  goWheel(){wx.navigateTo({url:'/pages/wheel/wheel'})},
  goTruth(){wx.navigateTo({url:'/pages/truth/truth'})},
  goDahua(){wx.navigateTo({url:'/pages/dahua/dahua'})},
})

七、实现流程总结

1. 需求分析

聚合酒局高频工具：摇骰、转盘、真心话、大话骰，满足聚会所有场景。

2. 界面设计

深色主题 + 大按钮 + 简单交互，适合酒局灯光暗、快速操作。

3. 功能实现

• 摇骰子：随机数 + 动画模拟滚动
• 转盘：CSS rotate 旋转 + 随机结果
• 真心话：数组随机抽取
• 大话骰：多人逻辑 + 点数判断

4. 上线注意

• 类目选：工具 - 娱乐
• 简介不能出现赌博、金钱
• 个人主体可直接上线