婚礼邀请函微信小程序首页开发步骤

页面布局分析

首页代码

index.wxml文件代码如下：

<view class="outer"><view class="player" bindtap="play"><image src="../../images/music_icon.png" style="animation-play-state: {{isPlaying}};"></image><image src="../../images/music_play.png" class="player-{{isPlaying=='running'?'play':'pause'}}"></image></view><view class="content"><!-- 顶部的gif图片 --><image class="content-gif" src="../../images/save_the_date.gif"></image><!-- 标题 --><view class="content-title">邀请函</view><view class="content-avatar"><image src="../../images/avatar.png"></image></view><view class="content-info"><!-- 新郎的信息 --><view class="content-name"><image src="/images/tel.png" bindtap="callGroom"></image><view>小张</view><view>新郎</view></view><!-- 放的喜字信息 --><view class="content-wedding"><image src="/images/wedding.png"></image></view><!-- 新娘的信息 --><view class="content-name"><image src="/images/tel.png" bindtap="callBride"></image><view>小李</view><view>新娘</view></view></view><view class="content-address"><view>我们诚邀您来参加我们的婚礼</view><view>时间：2022年12月6日</view><view>地点：四川省泸州市龙马潭区巨洋饭店</view></view></view><image class="bg" src="../../images/bg_1.png"></image>
</view>

index.wxss页面文件如下：

.outer{width: 100vw;height: 100vh;
}
.bg{width: 100%;height: 100%;z-index: 0;
}
.player{position: fixed;z-index: 4;top: 20rpx;right: 20rpx;
}
.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: 20rpx;height: 80rpx;margin-left: -5px;
}
.player-play{/* background: #ff4c91; */animation: musicPlay 1s linear forwards;
}
.player-pause{animation: musicPause 1s linear forwards;
}
@keyframes musicPlay{form{transform: rotate(0deg);}to{transform: rotate(20deg);}
}
@keyframes musicPause{form{transform: rotate(20deg);}
}.content{position: fixed;z-index: 3;width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;}
.content-gif{width: 19vh;height: 18.6vh;margin-bottom: 10rpx;
}
.content-title{font-size: 60rpx;color: #ff4c91;margin-bottom: 10rpx;
}
.content-avatar>image{width: 300rpx;height: 300rpx;border-radius: 50%;border: 3px solid #ff4c91;
}
.content-info{display: flex;flex-direction: row;width: 50vw;align-items: center;margin-top: 20rpx;
}
.content-name{color: #ff4c91;font-size: 2.7vh;font-weight: bold;position: relative;}.content-name>image{width: 30rpx;height: 30rpx;border-radius: 50%;border: 1px solid #ff4c91;position:absolute;top: -1vh;right: -3.6vh;
}
.content-wedding{flex: 1;display: flex;flex-direction: column;align-items: center;}
.content-wedding>image{width: 60rpx;height: 60rpx;
}
.content-address{margin-top: 5vh;font-size: 2.5vh;font-weight: bold;color: #ff4c91;text-align: center;line-height: 4.5vh;
}
.content-address view:first-child{font-size: 3vh;padding-bottom: 2vh;
}

效果图如下：

婚礼邀请函微信小程序首页开发步骤相关推荐

微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
微信小程序从零开始开发步骤（三）
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
微信小程序从零开始开发步骤（二）创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录选中page,右击鼠标,从硬盘打 ...
微信小程序从零开始开发步骤（一）
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,点击 ...
微信小程序git开发步骤和注意事项
微信小程序git开发步骤和注意事项 1.点击版本管理 2.点击设置 3.点击远程添加 4.添加git仓库名称和url地址 5.添加网络认证,自己的GitHub账号 6.剩下的就是操作 7.拉取时特别注 ...
微信小程序从零开始开发步骤（一）搭建开发环境
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...
婚礼邀请函 - 微信小程序+服务端
婚礼邀请函 - 请柬 - 小程序端+服务端+安卓端项目介绍婚礼邀请函效果图项目说明服务端架构:SpringMvc 服务器:阿里云服务域名:pengmaster.com 数据库:在服务器上装 ...
微信小程序开发 “婚礼邀请函” 微信小程序入门可看
成品展示: 5个页面我们来讲解哈(上面地图位置随便定的点) 1.首页开发一开始进来显示首页然后默认开始播放背景音乐,这个背景音乐点击右上角图标可以暂停(有动画),然后点击新郎和新娘文字可以调到 ...
微信小程序从零开始开发步骤
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...

婚礼邀请函微信小程序首页开发步骤

页面布局分析

首页代码

婚礼邀请函微信小程序首页开发步骤相关推荐

最新文章

热门文章