10 分钟搞定婚礼小程序？我用 DeepSeek 把同学的作业卷成了范本！

前端Hardy2025-07-31 18:44

"哥，明早要交一个婚礼主题的微信小程序作业，只要 5 个页面，要求有视频、图片、背景音乐，能救我吗？"

"好的，10 分钟后给你"

这不是段子，是真事。下面把全过程拆开复盘，顺便奉上一份可直接复用的开发笔记，下次再有人临时抱佛脚，直接把这篇博客甩给 TA。

需求分析

  • 主题：婚礼邀请函
  • 页数：5 页
  • 要求：有视频、图片、背景音乐

页面效果

DeepSeek

打开 deepseek 输入：帮我设计 5 个微信小程序的页面，主题是婚礼邀请函，要求有视频、图片、背景音乐。

diff 复制代码 
wedding-invitation/
├── app.js
├── app.json
├── app.wxss
├── images/
│ ├── couple.jpg
│ ├── gallery1.jpg
│ ├── ...
│ └── icon/
│ ├── home.png
│ ├── home-active.png
│ ├── ...
│ └── guestbook-active.png
└── pages/
├── home/
│ ├── home.js
│ ├── home.json
│ ├── home.wxml
│ └── home.wxss
├── details/
│ ├── details.js
│ ├── details.json
│ ├── details.wxml
│ └── details.wxss
├── story/
│ ├── story.js
│ ├── story.json
│ ├── story.wxml
│ └── story.wxss
├── gallery/
│ ├── gallery.js
│ ├── gallery.json
│ ├── gallery.wxml
│ └── gallery.wxss
└── guestbook/
├── guestbook.js
├── guestbook.json
├── guestbook.wxml
└── guestbook.wxss

新建项目

  • 微信开发者工具 → 新建小程序，起名 wedding
  • 将静态资源放到 static 文件夹
  • app.json 一次写死 5 页 + 底部 tabBar
  • 把 5 个页面 WXML + WXSS + JS 直接复制模板
  • 真机扫码 → 确认视频自动播放、音乐不中断、图片可预览
  • 截 5 张图、提交。完事！

源码

app.json

json 复制代码 
{
  "pages": [
    "pages/home/home",
    "pages/details/details",
    "pages/story/story",
    "pages/gallery/gallery",
    "pages/guestbook/guestbook"
  ],
  "window": {
    "navigationBarTitleText": "幸福婚礼邀请函",
    "navigationBarBackgroundColor": "#f8d7e4",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#fcf5f8"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#a76d8b",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/index1.png",
        "selectedIconPath": "images/index1.png"
      },
      {
        "pagePath": "pages/details/details",
        "text": "详情",
        "iconPath": "images/index2.png",
        "selectedIconPath": "images/index2.png"
      },
      {
        "pagePath": "pages/story/story",
        "text": "故事",
        "iconPath": "images/story.png",
        "selectedIconPath": "images/story-active.png"
      },
      {
        "pagePath": "pages/gallery/gallery",
        "text": "相册",
        "iconPath": "images/index3.png",
        "selectedIconPath": "images/index3.png"
      },
      {
        "pagePath": "pages/guestbook/guestbook",
        "text": "留言",
        "iconPath": "images/index4.png",
        "selectedIconPath": "images/index4.png"
      }
    ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

home

xml 复制代码 
<view class="container">
  <!-- 音乐控制按钮 -->
  <view class="music-control {{isPlaying ? 'playing' : ''}}" bindtap="toggleMusic">
    <image src="/images/mu.png" class="music-icon"></image>
  </view>

  <!-- 页面内容保持不变 -->
  <view class="hero">
    <image src="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/5.jpeg" class="wx-hero-image" mode="aspectFill"></image>
    <view class="couple-names">
      <text class="heart">❤</text>
      张伟 & 李娜
      <text class="heart">❤</text>
    </view>
    <view class="wedding-date">2023年10月1日 • 幸福大酒店</view>
    <view class="invite-text">
      <view>我们诚挚地邀请您</view>
      <view>参加我们的婚礼庆典</view>
      <view>共同见证我们的幸福时刻</view>
    </view>
  </view>

  <view class="page-header">
    <view class="page-title">婚礼邀请函</view>
    <view>恭请您拨冗出席，与我们共度美好时光</view>
  </view>

  <view class="detail-card">
    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">婚礼日期</view>
        <text>2023年10月1日（星期日）</text>
        <text>午宴 11:58</text>
      </view>
    </view>

    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">婚礼地点</view>
        <text>幸福大酒店 • 玫瑰厅</text>
        <text>北京市朝阳区幸福路88号</text>
      </view>
    </view>

    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">新郎新娘</view>
        <text>张伟 & 李娜</text>
      </view>
    </view>
  </view>

  <view class="countdown">
    <view class="countdown-title">婚礼倒计时</view>
    <view class="countdown-container">
      <view class="countdown-item">
        <text class="countdown-number">12</text>
        <text class="countdown-label">天</text>
      </view>
      <view class="countdown-item">
        <text class="countdown-number">18</text>
        <text class="countdown-label">时</text>
      </view>
      <view class="countdown-item">
        <text class="countdown-number">45</text>
        <text class="countdown-label">分</text>
      </view>
      <view class="countdown-item">
        <text class="countdown-number">32</text>
        <text class="countdown-label">秒</text>
      </view>
    </view>
  </view>
</view>
css 复制代码 
/* home.wxss */
.hero {
  text-align: center;
  padding: 20px 0px;
  position: relative;
}

.wx-hero-image {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid #f8d7e4;
  box-shadow: 0 10px 30px rgba(167, 109, 139, 0.2);
  margin: 0 auto 20px;
}

.couple-names {
  font-size: 32px;
  font-weight: 600;
  color: #a76d8b;
  letter-spacing: 2px;
  margin: 15px 0;
  position: relative;
}

.heart {
  color: #e8b5ce;
  margin: 0 10px;
  font-size: 24px;
}

.wedding-date {
  font-size: 18px;
  color: #5a3a4c;
  margin-bottom: 25px;
}

.invite-text {
  font-size: 16px;
  line-height: 1.8;
  margin: 20px 0;
  color: #5a3a4c;
  text-align: center;
}

.detail-item {
  display: flex;
  margin: 15px 0;
  align-items: flex-start;
}

.detail-icon {
  width: 40px;
  height: 40px;
  background: #f8d7e4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.detail-content {
  flex: 1;
}

.detail-title {
  font-size: 18px;
  margin-bottom: 5px;
  color: #a76d8b;
  font-weight: 600;
}

.detail-content text {
  display: block;
  color: #5a3a4c;
  font-size: 16px;
  line-height: 1.6;
}

.countdown {
  text-align: center;
  margin: 30px 0;
}

.countdown-title {
  font-size: 20px;
  color: #a76d8b;
  margin-bottom: 15px;
  font-weight: 600;
}

.countdown-container {
  display: flex;
  justify-content: center;
}

.countdown-item {
  margin: 0 8px;
  text-align: center;
}

.countdown-number {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #a76d8b;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px;
  margin-bottom: 5px;
}

.countdown-label {
  font-size: 14px;
  color: #5a3a4c;
}



.audiosBox {
  width: 92%;
  margin: auto;
  height: 130rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f7f7;
  border-radius: 10rpx;
}

/*按钮大小  */
.audioOpen {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

image {
  width: 30rpx;
  height: 40rpx;
}

.image2 {
  margin-left: 10%;
}

/*进度条长度  */
.slid {
  flex: 1;
  position: relative;
}

.slid view {
  display: flex;
  justify-content: space-between;
}

.slid view>text:nth-child(1) {
  color: #4c9dee;
  margin-left: 6rpx;
}

.slid view>text:nth-child(2) {
  margin-right: 6rpx;
}

slider {
  width: 520rpx;
  margin: 0;
  margin-left: 35rpx;
}

/*横向布局  */
.times {
  width: 100rpx;
  text-align: center;
  display: inline-block;
  font-size: 24rpx;
  color: #999999;
  margin-top: 5rpx;
}

.title view {
  text-indent: 2em;
}

.music-control {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.music-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

.music-control.playing .music-icon {
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
js 复制代码 
Page({
  data: {
    isPlaying: false, // 音乐播放状态
    backgroundAudioManager: null // 背景音频管理器
  },

  onLoad: function() {
    // 初始化背景音频管理器
    this.initAudioManager();

    // 检查设备类型，iOS需要特殊处理自动播放
    this.checkDeviceType();
  },

  // 初始化音频管理器
  initAudioManager: function() {
    const backgroundAudioManager = wx.getBackgroundAudioManager();

    // 设置音频信息
    backgroundAudioManager.title = '婚礼进行曲';
    backgroundAudioManager.epname = '婚礼邀请函';
    backgroundAudioManager.singer = '经典音乐';
    backgroundAudioManager.coverImgUrl = 'https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/index.jpeg';

    // 监听播放事件
    backgroundAudioManager.onPlay(() => {
      this.setData({
        isPlaying: true
      });
    });

    // 监听暂停事件
    backgroundAudioManager.onPause(() => {
      this.setData({
        isPlaying: false
      });
    });

    // 监听停止事件
    backgroundAudioManager.onStop(() => {
      this.setData({
        isPlaying: false
      });
    });

    // 监听结束事件
    backgroundAudioManager.onEnded(() => {
      this.setData({
        isPlaying: false
      });
    });

    this.setData({
      backgroundAudioManager: backgroundAudioManager
    });
  },

  // 检查设备类型
  checkDeviceType: function() {
    const systemInfo = wx.getSystemInfoSync();
    if (systemInfo.platform === 'ios') {
      // iOS设备显示提示信息
      wx.showModal({
        title: '温馨提示',
        content: '点击右上角音乐图标可开启背景音乐',
        showCancel: false
      });
    }
  },

  // 切换音乐播放状态
  toggleMusic: function() {
    const backgroundAudioManager = this.data.backgroundAudioManager;

    if (this.data.isPlaying) {
      // 暂停音乐
      backgroundAudioManager.pause();
    } else {
      // 播放音乐 - 设置音频源
      backgroundAudioManager.src = 'https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/WeChat_20250703094702.mp4'; // 替换为实际音乐URL
      backgroundAudioManager.play();

      // 解决iOS自动播放限制
      wx.showToast({
        title: '背景音乐已开启',
        icon: 'success',
        duration: 1000
      });
    }
  },

  onUnload: function() {
    // 页面卸载时停止音乐
    if (this.data.backgroundAudioManager) {
      this.data.backgroundAudioManager.stop();
    }
  }
});

details

xml 复制代码 
<view class="container">
  <view class="page-header">
    <view class="page-title">婚礼详情</view>
  </view>

  <view class="detail-card">
    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">婚礼流程</view>
        <text>10:30-11:30 迎宾签到</text>
        <text>11:58-12:30 婚礼仪式</text>
        <text>12:30-14:00 婚宴开始</text>
        <text>14:00-16:00 互动环节</text>
      </view>
    </view>

    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">宴会地点</view>
        <text>幸福大酒店 • 玫瑰厅（3楼）</text>
        <text>北京市朝阳区幸福路88号</text>
        <text>电话: 010-88889999</text>
      </view>
    </view>

    <map
      id="weddingMap"
      longitude="116.404"
      latitude="39.915"
      scale="15"
      markers="{{markers}}"
      style="width: 100%; height: 200px; border-radius: 10px; margin-top: 15px;">
    </map>

    <button class="map-btn" bindtap="navigateToMap">
      导航到酒店
    </button>
  </view>

  <view class="detail-card">
    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">交通指南</view>
        <text>地铁：1号线幸福路站A出口</text>
        <text>公交：88路、99路幸福大酒店站</text>
        <text>酒店提供免费停车场</text>
      </view>
    </view>

    <view class="detail-item">
      <view class="detail-icon">
        <image src="/images/story-active.png" style="width: 24px; height: 24px;"></image>
      </view>
      <view class="detail-content">
        <view class="detail-title">住宿信息</view>
        <text>酒店提供特惠婚房：</text>
        <text>豪华大床房: ￥588/晚</text>
        <text>预订电话: 010-88889999</text>
      </view>
    </view>
  </view>

  <view class="detail-card">
    <view class="detail-title">温馨提示</view>
    <view class="tips">
      <text>1. 请于10月1日10:30前到达婚礼现场</text>
      <text>2. 酒店提供免费停车位，请提前告知车牌号</text>
      <text>3. 婚礼设有儿童游乐区，请放心携带孩子</text>
      <text>4. 如需特殊饮食安排，请提前联系我们</text>
    </view>
  </view>
</view>
css 复制代码 
/* details.wxss */
.detail-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 5px 15px rgba(167, 109, 139, 0.1);
}

.detail-item {
  display: flex;
  margin: 15px 0;
  align-items: flex-start;
}

.detail-icon {
  width: 40px;
  height: 40px;
  background: #f8d7e4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.detail-icon image {
  width: 24px;
  height: 24px;
}

.detail-content {
  flex: 1;
}

.detail-title {
  font-size: 18px;
  margin-bottom: 5px;
  color: #a76d8b;
  font-weight: 600;
}

.detail-content text {
  display: block;
  color: #5a3a4c;
  font-size: 16px;
  line-height: 1.6;
  margin: 3px 0;
}

.map-container {
  height: 200px;
  background: #f5f5f5;
  border-radius: 10px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a76d8b;
  font-weight: bold;
  overflow: hidden;
}

.map-btn {
  background: #a76d8b;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-btn image {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.tips {
  padding: 10px 0;
}

.tips text {
  display: block;
  margin: 8px 0;
  font-size: 15px;
  color: #5a3a4c;
  line-height: 1.6;
}

story

xml 复制代码 
<view class="container">
  <view class="page-header">
    <view class="page-title">我们的故事</view>
  </view>

  <view class="story-timeline">
    <view class="timeline-item">
      <view class="timeline-date">
        <text>2018</text>
        <text>相遇</text>
      </view>
      <view class="timeline-content">
        <text>在大学的图书馆里，一次偶然的邂逅，让两条平行线有了交集。他借走了她正要拿的那本书，也借走了她的心。</text>
      </view>
    </view>

    <view class="timeline-item">
      <view class="timeline-date">
        <text>2019</text>
        <text>相知</text>
      </view>
      <view class="timeline-content">
        <text>从校园的林荫道到城市的大街小巷，从课堂上的笔记到咖啡馆里的低语，他们分享着彼此的梦想与秘密。</text>
      </view>
    </view>

    <view class="timeline-item">
      <view class="timeline-date">
        <text>2021</text>
        <text>相爱</text>
      </view>
      <view class="timeline-content">
        <text>在一个星光灿烂的夜晚，他鼓起勇气表白，她微笑着点头。从此，他们的故事有了新的篇章。</text>
      </view>
    </view>

    <view class="timeline-item">
      <view class="timeline-date">
        <text>2023</text>
        <text>相守</text>
      </view>
      <view class="timeline-content">
        <text>在亲友的见证下，他单膝跪地，许下爱的誓言。她说"我愿意"，从此携手共度余生。</text>
      </view>
    </view>
  </view>

  <view class="love-quote">
    <image src="/images/icon/quote.png" style="width: 30px; height: 30px;"></image>
    <text class="quote-text">从心动到古稀，从青丝到白发，我们的爱情会像美酒，愈陈愈香。</text>
    <image src="/images/icon/quote.png" style="width: 30px; height: 30px; transform: rotate(180deg);"></image>
  </view>

  <view class="couple-promise">
    <view class="promise-title">爱的承诺</view>
    <view class="promise-content">
      <text>张伟：我会用一生的时间，让你每天都有微笑的理由。</text>
      <text>李娜：无论顺境逆境，我都会在你身边，不离不弃。</text>
    </view>
  </view>
</view>
css 复制代码 
/* story.wxss */
.story-timeline {
  position: relative;
  padding: 20px 0 40px;
}

.story-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 3px;
  background: #e8b5ce;
  z-index: 1;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 70px;
  z-index: 2;
}

.timeline-date {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f8d7e4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #a76d8b;
  z-index: 3;
}

.timeline-content {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(167, 109, 139, 0.1);
  line-height: 1.6;
  font-size: 16px;
  color: #5a3a4c;
}

.love-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 30px 0;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(167, 109, 139, 0.1);
}

.love-quote image {
  width: 30px;
  height: 30px;
  margin: 5px 0;
}

.quote-text {
  font-size: 16px;
  line-height: 1.8;
  color: #5a3a4c;
  font-style: italic;
  margin: 10px 0;
}

.couple-promise {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(167, 109, 139, 0.1);
  margin-top: 20px;
}

.promise-title {
  font-size: 18px;
  color: #a76d8b;
  text-align: center;
  font-weight: 600;
  margin-bottom: 15px;
}

.promise-content text {
  display: block;
  margin: 12px 0;
  padding: 10px;
  background: #fcf5f8;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: #5a3a4c;
  border-left: 3px solid #e8b5ce;
}

gallery

xml 复制代码 
<view class="container">
  <view class="page-header">
    <view class="page-title">幸福瞬间</view>
  </view>
  <view class="gallery">
    <view class="gallery-item">
      <image mode="aspectFill" src="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/5.jpeg" alt="婚纱照"></image>
    </view>
    <view class="gallery-item">
      <image mode="aspectFill" src="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/3.jpeg" alt="婚纱照"></image>
    </view>
    <view class="gallery-item">
      <image mode="aspectFill" src="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/4.jpg" alt="婚纱照"></image>
    </view>
    <view class="gallery-item">
      <image mode="aspectFill" src="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/5.jpeg" alt="婚纱照"></image>
    </view>
  </view>
  <view class="share-section">
    <button class="share-btn" open-type="share">
      分享相册
    </button>
  </view>

  <view class="video-section">
    <view class="section-title">婚礼预告片</view>
    <video src="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/video.mp4" poster="https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/5.jpeg" controls autoplay="{{false}}" style="width: 100%; height: 200px; border-radius: 10px;"></video>
  </view>
</view>
css 复制代码 
/* gallery.wxss */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.gallery-item {
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.gallery-item image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover image {
  transform: scale(1.05);
}

.gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(167, 109, 139, 0.8);
  color: white;
  padding: 5px 10px;
  font-size: 14px;
  text-align: center;
}

.share-section {
  text-align: center;
  margin: 30px 0;
}

.share-btn {
  background: #a76d8b;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 12px 25px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.share-btn image {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.video-section {
  margin: 30px 0;
}

.section-title {
  font-size: 18px;
  color: #a76d8b;
  margin-bottom: 15px;
  font-weight: 600;
  text-align: center;
}

.video-container {
  height: 200px;
  background: #f5f5f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a76d8b;
  font-weight: bold;
  overflow: hidden;
  position: relative;
}

.video-play-btn {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(167, 109, 139, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.video-play-btn::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 20px solid white;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

guestbook

xml 复制代码 
<view class="container">
  <view class="page-header">
    <view class="page-title">宾客留言</view>
  </view>

  <view class="messages">
    <view class="messages fade-in">
      <view class="message-item">
        <view class="message-header">
          <view class="avatar">王</view>
          <view>
            <h3>王明</h3>
            <p>2小时前</p>
          </view>
        </view>
        <p>祝你们新婚快乐，永浴爱河！期待参加你们的婚礼！</p>
      </view>

      <view class="message-item">
        <view class="message-header">
          <view class="avatar">李</view>
          <view>
            <h3>李芳</h3>
            <p>昨天</p>
          </view>
        </view>
        <p>从大学看到你们走到现在，真的很感动！要永远幸福哦！</p>
      </view>

      <view class="message-item">
        <view class="message-header">
          <view class="avatar">张</view>
          <view>
            <h3>张涛</h3>
            <p>2天前</p>
          </view>
        </view>
        <p>恭喜兄弟抱得美人归！祝你们白头偕老，早生贵子！</p>
      </view>
    </view>
  </view>

  <view class="message-form">
    <view class="form-title">留下您的祝福</view>
    <view class="form-group">
      <input class="form-input" placeholder="您的姓名" value="{{name}}" bindinput="bindNameInput" />
    </view>
    <view class="form-group">
      <textarea class="form-textarea" placeholder="写下您的祝福..." value="{{content}}" bindinput="bindContentInput"></textarea>
    </view>
    <button class="submit-btn" bindtap="submitMessage">提交祝福</button>
  </view>

  <view class="attendance-form">
    <view class="form-title">出席确认</view>
    <radio-group bindchange="radioChange">
      <label class="radio-item">
        <radio value="1" checked="{{attendance === 1}}" color="#a76d8b" /> 我将出席婚礼
      </label>
      <label class="radio-item">
        <radio value="2" checked="{{attendance === 2}}" color="#a76d8b" /> 很遗憾无法出席
      </label>
    </radio-group>

    <view wx:if="{{attendance === 1}}" class="attendance-detail">
      <view class="form-group">
        <input class="form-input" placeholder="出席人数" value="{{attendeeCount}}" bindinput="bindAttendeeInput" />
      </view>
      <view class="form-group">
        <input class="form-input" placeholder="联系方式" value="{{contact}}" bindinput="bindContactInput" />
      </view>
    </view>

    <button class="submit-btn" bindtap="submitAttendance">确认出席</button>
  </view>
</view>
css 复制代码 
/* guestbook.wxss */
.messages {
  margin: 20px 0;
}

.message-item {
  background: white;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px rgba(167, 109, 139, 0.1);
}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8d7e4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #a76d8b;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
}

.message-name {
  font-weight: bold;
  font-size: 16px;
  color: #5a3a4c;
}

.message-time {
  font-size: 12px;
  color: #888;
}

.message-content {
  font-size: 16px;
  line-height: 1.6;
  color: #5a3a4c;
}

.message-form {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.form-title {
  font-size: 18px;
  color: #a76d8b;
  margin-bottom: 15px;
  font-weight: 600;
}

.form-group {
  margin-bottom: 15px;
}

.form-input {
  height: 44px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e8d0da;
  border-radius: 8px;
  font-size: 16px;
  color: #5a3a4c;
  background: #fff;
  padding: 0 15px;
}

.form-textarea {
  height: 100px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e8d0da;
  border-radius: 8px;
  font-size: 16px;
  color: #5a3a4c;
  background: #fff;
  padding: 12px 15px;
}

.submit-btn {
  background: #a76d8b;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  text-align: center;
}

.attendance-form {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.radio-item {
  display: block;
  margin: 12px 0;
  font-size: 16px;
  color: #5a3a4c;
}

.radio-item radio {
  margin-right: 8px;
}

.attendance-detail {
  margin: 15px 0;
  padding-top: 10px;
  border-top: 1px dashed #e8d0da;
}

源码获取（含本文全部页面代码与图片资源）

gitee.com/wang-yanhui...

源码获取（含本文全部页面代码与图片资源）

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
培根芝士2 分钟前
Electron将视频文件单独打包成asar并调用
前端·javascript·electron
德育处主任2 分钟前
p5.js 3D模型（model）入门指南
前端·前端框架·canvas
小小小小宇10 分钟前
React hook的执行顺序
前端
curdcv_po24 分钟前
🔥🔥🔥结合 vue 或 react，去写three.js
前端·react.js·three.js
gongzemin34 分钟前
使用Node.js开发微信第三方平台后台
微信小程序·node.js·express
猫头_1 小时前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
天生我材必有用_吴用1 小时前
网页接入弹窗客服功能的完整实现（Vue3 + WebSocket预备方案）
前端
海拥1 小时前
8 Ball Pool：在浏览器里打一局酣畅淋漓的桌球！
前端
Cache技术分享1 小时前
148. Java Lambda 表达式 - 捕获局部变量
前端·后端
明长歌1 小时前
【javascript】Reflect学习笔记
javascript·笔记·学习
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）04Coze 开源了，送上保姆级私有化部署方案【建议收藏】05腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07KGG转MP3工具|非KGM文件|解密音频08coze 开源版本地部署及踩过的坑【喂饭级教程】09【手把手攻略】国家育儿补贴正式开领！一键算清你能拿多少钱？附补贴领取计算器10VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)