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

小程序 0

一、界面设计

  1. 首页：

    • 精美的婚礼主题背景图，可能是新人的婚纱照或浪漫的插画。
    • 温馨的欢迎语，如 “欢迎参加我们的婚礼”。
    • 一个 “打开邀请函” 的按钮，引导用户进入邀请函详情页面。

  2. 邀请函详情页面：

    • 顶部展示新人的照片和名字，以及婚礼日期和地点。
    • 一段浪漫的爱情故事或致辞，讲述新人的相遇相知和对未来的期待。
    • 婚礼流程介绍，包括仪式时间、婚宴时间、节目安排等。
    • 地图导航，提供婚礼地点的位置信息和导航链接。
    • RSVP（请回复）按钮，让宾客可以方便地回复是否参加婚礼。

二、功能实现

  1. 数据存储与获取：

    • 可以将婚礼信息存储在小程序的本地缓存或使用云开发数据库，以便在不同页面之间共享数据。
    • 如果需要动态更新婚礼信息，可以通过网络请求从服务器获取最新数据。

  2. 页面导航：

    • 在首页设置按钮点击事件，跳转到邀请函详情页面。
    • 在邀请函详情页面可以设置返回首页的按钮或链接。

  3. 地图导航：

    • 使用小程序的地图组件，展示婚礼地点的位置，并提供导航链接，方便宾客前往婚礼现场。
    • 可以调用第三方地图导航 API，如腾讯地图、百度地图等，实现更精准的导航功能。

  4. RSVP 功能：

    • 点击 RSVP 按钮，弹出一个表单，让宾客填写姓名、联系方式、参加人数等信息。
    • 将宾客的回复信息存储在本地或发送到服务器，以便新人统计参加人数。

目的

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() + 1    var 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  }}

效果截图

也许您对下面的内容还感兴趣：