👨💻个人主页：@开发者-曼亿点
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 曼亿点 原创
👨💻 收录于专栏：微信小程序开发
⭐🅰⭐
微信小程序开发【婚礼邀请函】——运行视频
项目所需的图片链接：https://pan.baidu.com/s/1gk3h8RFsNENzBzB4p5kw-g
提取码：8aon
文章目录
- ⭐🅰⭐
- ⭐前言⭐
- 🎶 一、任务实现分析
- 🎶 二、邀请函界面
- 🎶 三、照片页面
- 🎶 四、美好时光页面
- 🎶 五、婚礼地点页面
- 🎶 宾客信息页面
- 结束语🥇
⭐前言⭐
本项目是一个婚礼邀请函小程序，通过小程序向亲朋好友发送婚礼到场的邀请，相当于传统方式的请帖，他给人带来了不一样便捷的体验感，也更容易受到广大年群体的喜爱，通过电子版的邀请函，邀请来宾见证一对新人的幸福时刻。
本项目分为5个页面组成，分别是邀请函、图片、美好时光、婚礼地点、宾客情况。如下图所示：
1.邀请函页面
2.图片页面
3.美好时光页面
4.婚礼地点页面
5.宾客信息页面
下面对这5个页面的功能进行简要的介绍。
邀请函页面：新娘和新郎的名字、电话、婚礼地点、婚礼时间。
图片页面：新娘和新郎的幸福照。
美好时光页面：采用视频的方式记录一对新人的相爱历程。
婚礼地点页面：通过导航查看婚礼地点的路线。
宾客信息页面：通过婚礼的嘉宾填写个人信息，送一些祝福等。
🎶 一、任务实现分析
（1）页面结构
从上图看出，页面底部都有标签栏，通过点击不同的标签按钮却换到对应的页面。
邀请函页面中：右上角有一个音乐播放按钮，中间是新娘和新郎的合照，合照下面是新娘和新郎的名字，点击旁边的电话图片呼叫。底部是婚礼时间和地点信息。
图片页面中：通过纵向轮播图展示了新人婚纱照片。
美好时光页面中：提供了视频在线播放功能。
婚礼地点页面中：提供了在线地图，点击导航图标可以定位婚礼酒店位置。
宾客信息页面中：提供了一个表单，用于填写宾客信息。
（2）目录结构
| 路径 | 说明 |
|---|---|
| app.js | 应用程序的逻辑文件 |
| app.json | 应用程序的配置文件 |
| app.wxss | 定义公共样式 |
| pages/index | 邀请函页面保存目录 |
| pages/picture | 图片页面保存目录 |
| pages/video | 美好时光页面保存目录 |
| pages/map | 婚礼地点页面保存目录 |
| pages/guesr | 宾客信息页面保存目录 |
| images | 图片文件 |
（3）项目初始化
在微信开发者工具中创建一个空白项目。创建成功后，新建app.json文件，在该文件中定义本案列中的页面和导航栏样式，具体代码如下：
// A code blockvar foo = 'bar';上述代码中，tabBar对象用于配置页面底部的标签，list是一个数组，数组的每个元素是一个标签按钮对象，通过该对象的属可以配置标签栏中的每个标签按钮。
在每个标签打开时，导航栏也需要随之发送改变。下面在每个页面的.json文件中配置页面标题，以pages/index/index.json文件为例，代码如下：
{ "pages": [ "pages/index/index", "pages/guest/guest", "pages/map/map", "pages/vido/vido", "pages/pictrue/pictrue", "pages/logs/logs" ], "tabBar": { "color": "#ccc", "selectedColor": "#ff4c91", "borderStyle":"white", "backgroundColor": "#fff", "list": [{ "pagePath": "pages/index/index", "iconPath": "images/images/invite.png", "selectedIconPath": "images/images/invite.png", "text": "邀请函" }, { "pagePath": "pages/pictrue/pictrue", "iconPath": "images/images/marry.png", "selectedIconPath": "images/images/marry.png", "text": "照片" }, { "pagePath": "pages/vido/vido", "iconPath": "images/images/video.png", "selectedIconPath": "images/images/video.png", "text": "美好时光" }, { "pagePath": "pages/map/map", "iconPath": "images/images/map.png", "selectedIconPath": "images/images/map.png", "text": "订婚地点" }, { "pagePath": "pages/guest/guest", "iconPath": "images/images/guest.png", "selectedIconPath": "images/images/guest.png", "text": "宾客信息" } ] }, "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "邀请函", "navigationBarBackgroundColor": "#ff4c91", "enablePullDownRefresh": false }, }完成配置文件的编写后，在app.wxss文件中定义公共样式，具体代码如下：
{ "usingComponents": { }, "navigationBarTitleText": "邀请函"}完成配置文件的编写后，在app.wxss文件定义公共样式，具体代码如下：
page{font-family: Arial, Helvetica, sans-serif;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}🎶 二、邀请函界面
打开婚礼邀请函小程序后，首页进入到邀请函页面，在页面的右上角有一个背景音乐播放器按钮，用于控制音乐播放器状态，点击按钮播放音乐，再次点击停止音乐。在邀请函页面，显示新娘和新郎的头像，姓名，以及婚礼时间和地点，让宾客可以马上了解相关信息。
（1）背景音乐播放
在pages/index/index.wxml文件中编写播放器结构，具体代码如下：
<!--index.wxml--><view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play"><image src="/images/images/music_icon.png"/><image src="/images/images/music_play.png"/></view>上述代码中，isPlayMusic变量表示当前是否正在播放音乐，用于通过判断播放状态来改变class的值。music_icon.png是黑胶唱片图标，music_play.png是唱臂图标。
在pages/index/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(0deeg);} to{transform: rotate(360deg);}}.player > image:last-child{ width: 28rpx; height: 80rpx; margin-left: -5px;}/* 播放器的播放和暂停效果 */.player-play > image:first-child{ animation-play-state: running;}.player-play > image:last-child{ animation: musicStart 0.2s linear forwards;}.player-play > image:first-child{ animation-play-state: paused;}.player-play > 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;}.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: 3rpx solid #ff4c91; border-radius: 50%;}/* 新郎新郎电话区 */.content-info{ width:45vh; text-align: center; margin-top: 4vh; display: flex; align-items: center;}.content-wedding{ flex: 1;}.content-wedding>image{ width:5.5vh; height:5.5vh; margin-left: 20rpx;}.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-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;}上述代码中，提高堆叠顺序从而防止播放器图标被.content容器所覆盖在下面，还有唱片图标设置了旋转动画。
在pages/index.index.js文件的data中定义isPlayingMusic，具体代码如下：
data: { isPlayingMusic:false,}然后在pages/index/index.js文件中编写背景音频播放代码和一键拨号功能，具体代码如下：
Page({ data: { isPlayingMusic:false, bgm:null, music_url:"https://nf-sycdn.kuwo.cn/523a03e11876357f6d600598a2609ee2/6640cb27/resource/n2/32/26/1627466358.mp3?from=vip", music_coverImgUrl:"image/banner.jpg", onReady:function(){ // 创建getBackgroundAudioManager 实例对象(接口播放音频) this.bgm=wx.getBackgroundAudioManager() // 音频标题 this.bgm.title = "marry me" // 专辑封面 this.bgm.epname = "wedding" // 歌手名 this.bgm.singer = "singer" // 专辑封面 this.bgm.coverImgUrl = this.music_coverImgUrl this.bgmoncanplay(()=>{ this.bgm.pause() }) // 指定音频的数据源 this.bgm.src = this.music_url } }, // 播放器的单击事件 play:function(e){ // 执行暂停或播放操作,如果值为true则暂停，值为 false则播放 if(this.data.isPlayingMusic){ this.bgm.pause() }else{ this.bgm.play() } this.setData({ //将data中的isPlayingMusic赋值给它 isPlayingMusic: !this.data.isPlayingMusic }) }, //实现拨打电话功能 callGroom:function(){ wx.makePhoneCall({ phoneNumber: '15138726924', }) }, callBride:function(){ wx.makePhoneCall({ phoneNumber: '18236347304', }) },})保存上述代码后，测试播放器的播放和暂停功能已经实现。
（2）页面结构和样式
在pages/index/index.wxml文件中的播放器下面进行编写代码，实现背景图片和内容区域的基本结构，具体内容如下：
<!-- 背景图 --><image class="bg" src="/images/images/bg_1.png"></image><!-- 内容区域 --><view class="content"><!-- 顶部的gif图片 --><image class="content-gif" src="/images/images/save_the_date.gif"></image><!-- 标题 --><view class="content-titile">邀请函</view><!-- 合照 --><view class="content-avatar"><image src="/images/images/avatar.png"></image></view><!-- 名字 --><view class="content-info"><view class="content-name"bindtap="callGroom"><image src="/images/images/tel.png"></image><view>乔治</view><view>新郎</view></view><view class="content-wedding"><image src="/images/images/wedding.png"></image></view><view class="content-name" bindtap="callBride"><image src="/images/images/tel.png"></image><view>佩奇</view><view>新娘</view></view></view><view class="content-address"> <view>我们诚挚的邀请您来参加我们的婚礼</view><view>时间：2024年5月8日</view><view>地点：湖南常德</view></view></view>🎶 三、照片页面
本页面采用纵向轮播的方式展示图片，可以通过单击指数面板的圆点进行却换，。要求每个图片都要占满显示区域，滑动屏幕可以显示图片纵向切换；在右侧纵向显示指示点面板。点击圆点可切换显示状态。
在page/picture/picture.js文件中准备的路径，具体代码如下：
data: { imgUrls:[ '/images/images/timg1.jpg', '/images/images/timg2.jpg', '/images/images/timg3.jpg', '/images/images/timg4.jpg', ] }在page/picture/picture.wxml文件中准备的路径，具体代码如下：
<!--pages/pictrue/pictrue.wxml--><!--pages/photo/photo.wxml--><!-- 照片轮播图 --><swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots="true" autoplay="true" interval="3000" duration="1000" vertical="true" circular="true"> <swiper-item> <image src="/images/images/timg1.jpg" /> </swiper-item> <swiper-item> <image src="/images/images/timg2.jpg" /> </swiper-item> <swiper-item> <image src="/images/images/timg3.jpg" /> </swiper-item> <swiper-item> <image src="/images/images/timg4.jpg" /> </swiper-item></swiper>在page/picture/picture.wxss文件中编写样式，具体代码如下：
/* pages/pictrue/pictrue.wxss */swiper{ height: 100vh;}image{ width: 100vw; height: 100vh;}🎶 四、美好时光页面
该页面采用视频方式来记录一对新人的难忘时光。在小程序中播放视频有两种方式实现，方法1是使用vido组件，另外一种是使用腾讯视频插件。本案例采用前者。
（1）编写页面结构的样式：
data: { movieList:[{ create_time:"2024-5-20 10：14：43", title:"海边顺拍", src:"http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/lh5B36MyVY61V_Iqwvp7I_jpLE6g" },{ create_time:"2024-5-20 10：14：43", title:"勿忘安心", src:"http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/lkXpoTgcfRNFrhwkeaeGWGZ1r8uu" }, { create_time:"2024-5-20 10：14：43", title:"点滴记忆", src:"http://qnm.hunliji.com/bLRuhXGuv29K4zOuKdjdlZJ_9WE=/lqlkGiHppwT5ikkYZfVr-tGhhR33" } ] },在pages/video/video.wxml文件中编写页面结构，具体代码如下：
<!--pages/vido/vido.wxml--><view class="video-list" wx:for="{{movieList}}" wx:key="user"><view class="video-title">标题：{{item.title}}</view><view class="video-time"> 时间：{{item.create_time}}</view><video src="{{item.src}}" object-Fit="fill"></video></view><wxs module="formmatData">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.getSecondes() return y+'-'+m+'-'+d+'-'+h+':'+i+':'+s;}</wxs>在pages/video/video.wxss文件中编写页面样式，具体代码如下：
/* pages/vido/vido.wxss */.video-list{ box-shadow: 0 8rpx 17rpx 0 rgb(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: 13rpx; color: #979797;}.video-list video{ width: 100%; margin-top: 20rpx;}🎶 五、婚礼地点页面
该页面会显示婚礼地点的地图，单击导航图标可以定位酒店的位置、查看路线。本案例针对婚礼地点页面的实现细节进行分析：拾取到婚礼举办酒店的经纬度坐标，利用map组件显示地图，并用婚礼地点放置markers覆盖物标记，单击蓝色图标点，通过wx.openLoacation()调用微信内置地图查看位置。
（1）微信内置地图和定位
小程序提供了打开微信内置地图的API和定位用户的API，需要用户授权才能使用，也就是会自动提示用户“ 是否同意获取您的位置”，同意后即可获取。下面演示两个API的使用。首先在pages/map/map.wxml文件中准备一个按钮，具体代码如下：
<button bindtap="buttonTap"> 查看我的位置</button>然后在pages/map/map.js文件编写代码：
buttonTap:function(){ wx.getLocation({ type:"gcj02", success:function(res){ wx:openLocation({ latitude:res.latitude, longitude:res.longitude }) } })},（2）编写婚礼地点页面
在pages/map/map/.wxml文件中编写页面结构，具体代码如下：
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markertap"></map>在pages/map/map.wxss文件中编写页面样式，具体代码如下：
/* pages/map/map.wxss */map{ width: 100vh; height: 100vh;}在pages/map/map.js文件中编写data和markertap()函数，具体代码如下：
// pages/map/map.jsPage({ /** * 页面的初始数据 */ data: {latitude:29.034552,longitude:111.6928724,makers:[{ iconpath:'/images/images/navi.png', id:0, latitude:29.034552 , longitude:111.6928724, width:50, height:50}],markertap:function(){ wx.openLocation({ latitude: this.data.latitude, longitude: this.data.longitude, name:"豪气酒店", address:湖南常德 })} },🎶 宾客信息页面
该页面提供了一个表单，用于填写来宾的信息，包括姓名，手机号码、参加婚礼人数、祝福语。案例整对宾客信息页面的功能需求进行分析：为页面添加背景图片；当姓名手机号码所在文件文本框中失去焦点时，触发失去焦点事件bindblur;对本文内容进行正则表达式的验证，格式错误会给出友好的提示信息；单击num(参加婚礼的人数)时，从底部弹出一个选择器，可以对人数进行选择；单击submit提交按钮，获取form表单数据，提交成功后会给出成功的提示，利用小程序中模板消息体制，发送回复通知。
（1）编写页面结构和样式
在pages/guest/guest.wxml文件编写页面结构，具体代码如下：
<!--pages/guest/guest.wxml--><image class="bg" src="/images/images/bj_2.png"></image><form bindsubmit="formSubmit" report-submit=""><view class="content"><view><input name="name" bindblur="nameChange" placeholder-class="phcolor" placeholder="请输入你的名字" /></view><view><input name="phone" bindblur="nameChange" placeholder-class="phcolor" placeholder="请输入你的手机号" /></view><view><picker name="num" bindchange="picherChange" value="{{picker.index}}" range="{{picker.arr}}">参加婚礼人数：{{picker.arr[picker.index]}}</picker></view><view><input name="name" placeholder-class="phcolor"placeholder="请输入你的祝福"/></view><button form-type="submit">提交</button></view></form>在pages/guest/guest.js文件中编写，具体代码如下：
// pages/guest/guest.jsPage({ /** * 页面的初始数据 */ data: { picker:{ arr:['0','1','2','3','4','5','6'], index:1 } },pickerChange:function(e){this.setData({ 'picker.index':e.detail.value})},// 验证姓名nameChange:function(e){ this.checkName(e.detail.value)},// 验证手机号phoneChange:function(e){ this.checkPhone(e.detail.value)},// checkName()方法checkName:function(data){ var reg=/^[/u4E00-/u9FA5A-Za-z]+$/;return this.checkName(data,reg,'姓名输入错误')},// checkPhone()方法checkPhone:function(data){ var reg=/^(((13)|(15)|(17)|(18))/d{9})$/;return this.checkPhone(data,reg,'手机号码输入有误！')},// check()方法check:function(data,reg,errMsg){ if(!reg.test(data)){ wx.showToast({ title:errMsg, icon:'none', duration:1500 }) } return true},formSubmit:function(e){var name=e.detail.value.namevar phone=e.detail.value.phoneif(this.checkName(name)&&this.checkPhone(phone)){ //在此处可编写代码将e.detail.value提交到服务器 wx.showToast({ title: '提交成功', icon:"success", duration:1500 })}},在pages/guest/guest.wxss文件中编写，具体代码如下：
/* pages/guest/guest.wxss */.bg{ width: 100vw; height: 100vh;}.content{ width: 80vw; position: fixed; left: 10vw; bottom: 6vh;}.content>view{ font-size: 2.8vh; border: 1rpx solid #ff4c91; border-radius: 10rpx; padding: 1.5vh 40rpx; margin-bottom: 1.5vh; color:#ff4c91 ;}.content button{font-size: 3vh;height: 7.5vh;line-height: 7.5vh;background-color: #ff4c91;color: #fff;}.content picker{padding: 0.7vh 0;}.content phcolor{color: #ff4c91;}全部代码的压缩包：https://pan.baidu.com/s/1WPEpmGnupdJTvianktTH5w
提取码关注私信博主获得。
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
