【微信小程序开发(从零到一)【婚礼邀请函】制作】——全部代码展示+全部代码的压缩包,专属一个属于自己的一个微信小程序
👨💻个人主页:@开发者-曼亿点
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 曼亿点 原创
👨💻 收录于专栏:微信小程序开发
⭐🅰⭐
微信小程序开发【婚礼邀请函】——运行视频
项目所需的图片链接:http://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 block
var 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文件中编写播放器结构,具体代码如下:
<view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play">
上述代码中,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:"http://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文件中的播放器下面进行编写代码,实现背景图片和内容区域的基本结构,具体内容如下:
邀请函
乔治
新郎
佩奇
新娘
我们诚挚的邀请您来参加我们的婚礼
时间:2024年5月8日
地点:湖南常德
🎶 三、照片页面
本页面采用纵向轮播的方式展示图片,可以通过单击指数面板的圆点进行却换,。要求每个图片都要占满显示区域,滑动屏幕可以显示图片纵向切换;在右侧纵向显示指示点面板。点击圆点可切换显示状态。
在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文件中准备的路径,具体代码如下:
在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文件中编写页面结构,具体代码如下:
<view class="video-list" wx:for="{{movieList}}" wx:key="user">
标题:{{item.title}}
时间:{{item.create_time}}
<video src="{{item.src}}" object-Fit="fill">
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;
}
在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文件中准备一个按钮,具体代码如下:
然后在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">
在pages/map/map.wxss文件中编写页面样式,具体代码如下:
/* pages/map/map.wxss */
map{
width: 100vh;
height: 100vh;
}
在pages/map/map.js文件中编写data和markertap()函数,具体代码如下:
// pages/map/map.js
Page({
/**
* 页面的初始数据
*/
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文件编写页面结构,具体代码如下:
<picker name="num" bindchange="picherChange" value="{{picker.index}}" range="{{picker.arr}}">
参加婚礼人数:{{picker.arr[picker.index]}}
在pages/guest/guest.js文件中编写,具体代码如下:
// pages/guest/guest.js
Page({
/**
* 页面的初始数据
*/
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=/^[一-龥A-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.name
var phone=e.detail.value.phone
if(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;
}
全部代码的压缩包:http://pan.baidu.com/s/1WPEpmGnupdJTvianktTH5w
提取码关注私信博主获得。
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖