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...

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

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

相关推荐
IT码农-爱吃辣条15 分钟前
Three.js 初级教程大全
开发语言·javascript·three.js
GIS之路20 分钟前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿22 分钟前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴34 分钟前
告别繁琐的类型注解：TypeScript 类型推断完全指南
前端·javascript·typescript
gnip44 分钟前
工程项目中.env 文件原理
前端·javascript
JefferyXZF1 小时前
Next.js Server Actions 详解: 无缝衔接前后端的革命性技术(八)
前端·全栈·next.js
JohnYan2 小时前
工作笔记 - CentOS7环境运行Bun应用
javascript·后端·容器
芜青2 小时前
HTML+CSS：浮动详解
前端·css·html
SchuylerEX3 小时前
第六章 JavaScript 互操（2）.NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷4 小时前
Rubick：基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）07Spring 调试终于不再痛苦了082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09Claude Code VSCode集成开发指南：AI编程助手完整配置10【大模型实战篇】部署GPT-OSS-120B踩得坑（vllm / ollama等推理框架）