微信小程序——婚礼邀请函

目的

1.掌握小程序>微信小程序的开发技术，包括页面布局、交互设计、数据存储等。

2.学会运用小程序>微信小程序的各种组件和 API，实现个性化的婚礼邀请函功能。

3.通过制作婚礼邀请函小程序，提升创意设计和用户体验优化的能力。

4.了解如何在小程序中整合多媒体资源，如图片、音乐、视频等，以增强邀请函的吸引力。

5.能够将小程序发布上线，与亲朋好友分享幸福时刻，同时熟悉小程序的发布流程和审核要求。

流程

确定婚礼邀请函小程序的功能需求，如展示新人照片、婚礼时间地点、RSVP 功能、地图导航等。规划小程序的页面结构和交互流程，确保用户能够方便地浏览和操作。

界面设计：制作精美的页面布局，包括首页、婚礼详情页、RSVP 页面等。可以使用小程序>微信小程序提供的组件，如视图容器（view）、图片（image）、文本（text）等，进行页面搭建。

测试与优化：在开发过程中进行多次测试，确保小程序的功能正常、界面美观、交互流畅。检查兼容性问题，确保小程序在不同设备和操作系统上都能正常运行。根据测试结果进行优化，修复漏洞和改进用户体验。

代码架构

对应代码

index.wxml

<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play"><image src="/images/music_icon.png" /><image src="/images/music_play.png" />
</view>
<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png" />
<!-- 内容区域 -->
<view class="content"><!-- 顶部GIF图片 --><image class="content-gif" src="/images/save_the_date.gif" /><!-- 标题 --><view class="content-title">邀请函</view><!-- 新郎和新娘的合照 --><view class="content-avatar"><image src="/images/avatar.png" /></view><!-- 新娘和新郎的名字 --><view class="content-info"><view class="content-name" bindtap="callGroom"><image src="/images/tel.png" /><view>张三石</view><view>新郎</view></view><view class="content-wedding"><image src="/images/wedding.png"></image></view><view class="content-name" bindtap="callBride"><image src="/images/tel.png" /><view>张三石的爱人</view><view>新娘</view></view></view><!-- 婚礼信息 --><view class="content-address"><view>我们诚邀您来参加我们的婚礼</view><view>时间：未来的某一天</view><view>地点：花海圆满酒店</view></view>
</view>

index.wxss

/* 音乐播放图标 */.player {position: fixed;top: 20rpx;right: 20rpx;/* 提高堆叠顺序 */z-index: 1;
}.player > image:first-child {width: 80rpx;height: 80rpx;/* 为唱片图标设置旋转动画 */animation: musicRotate 3s linear infinite;
}@keyframes musicRotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}.player > image:last-child {width: 28rpx;height: 80rpx;margin-left: -5px;
}/* 播放状态 class为.player-play */.player-play > image:first-child {animation-play-state: running;
}.player-play > image:last-child {animation: musicStart 0.2s linear forwards;
}/* 暂停状态 class为.player-pause */.player-pause > image:first-child {animation-play-state: paused;
}.player-pause > image:last-child {animation: musicStop 0.2s linear forwards;
}@keyframes musicStart {from {transform: rotate(0deg);}to {transform: rotate(20deg);}
}@keyframes musicStop {from {transform: rotate(20deg);}to {transform: rotate(0deg);}
}/* 背景图 */.bg {width: 100vw;height: 100vh;
}/* 内容区域 */.content {width: 100vw;height: 100vh;position: fixed;display: flex;flex-direction: column;align-items: center;
}/* 顶部gif图 */.content-gif {width: 19vh;height: 18.6vh;margin-bottom: 1.5vh;
}/* 标题 */.content-title {font-size: 5vh;color: #ff4c91;text-align: center;margin-bottom: 2.5vh;
}/* 头像 */.content-avatar image {width: 24vh;height: 24vh;border: 3px solid #ff4c91;border-radius: 50%;
}/* 新郎新娘信息 */.content-info {width: 55vw;text-align: center;margin-top: 4vh;display: flex;align-items: center;
}.content-name {color: #ff4c91;font-size: 2.7vh;line-height: 4.5vh;font-weight: bold;position: relative;
}.content-name > image {width: 2.6vh;height: 2.6vh;border: 1px solid #ff4c91;border-radius: 50%;position: absolute;top: -1vh;right: -3.6vh;
}.content-wedding {flex: 1;
}.content-wedding > image {width: 5.5vh;height: 5.5vh;margin-left: 20rpx;
}/* 婚礼信息 */.content-address {margin-top: 5vh;color: #ec5f89;font-size: 2.5vh;font-weight: bold;text-align: center;line-height: 4.5vh;
}.content-address view:first-child {font-size: 3vh;padding-bottom: 2vh;
}

map.wxml

<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markertap" />

map.wxss

map {width: 100vw;height: 100vh;
}

picture.wxml

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular><swiper-item wx:for="{{imgUrls}}" wx:key="*this"><image src="{{item}}" mode="aspectFill" /></swiper-item>
</swiper>

picture.wxss

swiper {height: 100vh;
}image {width: 100vw;height: 100vh;
}

腾讯视频插件，需要注册企业微信公众号（需要花钱），才可以使用，仅学习使用可忽略

video.wxml

<view class="video-list" wx:for="{{movieList}}" wx:key="user"><view class="video-title">标题：{{item.title}}</view><view class="video-time">时间：{{formatData(item.create_time)}}</view><video src="{{item.src}}" objectFit="fill"></video> 
</view>
<view class="video-list"><view class="video-title">标题：腾讯视频插件演示</view><view class="video-time">时间：2019-1-1 10:11:12</view><txv-video vid="y0371c5p9cc" playerid="txv1"></txv-video>
</view>
<wxs module="formatData">module.exports = function(timestamp) {var date = getDate(timestamp)var y = date.getFullYear()var m = date.getMonth() + 1var d = date.getDate()var h = date.getHours()var i = date.getMinutes()var s = date.getSeconds()return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s}
</wxs>

vide.wxss

.video-list {box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);margin: 10rpx 25rpx;padding: 20rpx;border-radius: 10rpx;margin-bottom: 30rpx;background: #fff;
}.video-title {font-size: 35rpx;color: #333;
}.video-time {font-size: 13px;color: #979797;
}.video-list video {width: 100%;margin-top: 20rpx;
}

配置文件

project.config.json

{"description": "项目配置文件","packOptions": {"ignore": [],"include": []},"setting": {"urlCheck": false,"es6": true,"enhance": false,"postcss": true,"preloadBackgroundData": false,"minified": true,"newFeature": true,"coverView": true,"nodeModules": false,"autoAudits": false,"showShadowRootInWxmlPanel": true,"scopeDataCheck": false,"uglifyFileName": false,"checkInvalidKey": true,"checkSiteMap": true,"uploadWithSourceMap": true,"compileHotReLoad": false,"useMultiFrameRuntime": true,"useApiHook": true,"useApiHostProcess": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""},"enableEngineNative": false,"bundle": false,"useIsolateContext": true,"useCompilerModule": true,"userConfirmedUseCompilerModuleSwitch": false,"userConfirmedBundleSwitch": false,"packNpmManually": false,"packNpmRelationList": [],"minifyWXSS": true},"compileType": "miniprogram","libVersion": "2.14.1","appid": "wx0298165ccea56bb4","projectname": "invitation","condition": {},"editorSetting": {"tabIndent": "insertSpaces","tabSize": 2}
}

效果截图