- 效果图
-
右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击按钮暂停音乐
-
页面中,显示新娘和新郎的头像、姓名、以及婚礼时间和地点
3.1 页面布局(pages/index/index.wxml)
邀请函
张三
新郎
李四
新娘
我们诚邀您来参加我们的婚礼
事件:2020年12月30日
地点:北京市海淀区XX路XX酒店
3.2 样式文件(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;
}
.player>image:last-child{
width: 28rpx; height: 80rpx; margin-left: -5px;
}
@keyframes musicRotate{
from{transform:rotate(0deg);}
to{transform: rotate(360deg);}
}
/* 播放暂停 */
.player-play>image:first-child{
animation-play-state: running;
}
.player-play>image:last-child{
animation: musicStart 0.2s linear forwards;
}
.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 ;
}
.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: 45vw;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;
}
3.3 功能逻辑文件(pagese/index/index.js)
Page({
/**
- 页面的初始数据
*/
bgm:null,
music_url:‘http://music.163.com/song/media/outer/url?id=419485661.mp3’,
music_coverImgUrl:‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2727026051,3456690252&fm=15&gp=0.jpg’,
data: {
isPlayingMusic:false,
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
},
/**
- 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
this.bgm=wx.getBackgroundAudioManager()
// this.bgm.title=‘marry me’
// this.bgm.epname=‘wedding’
// this.bgm.singer=‘singer’
总结
笔者之前工作是在金融公司可能并不是特别追求技术,而笔者又是喜欢追求技术的人,所以格格不入,只能把目标放在互联网大厂了。也希望大家都去敢于尝试和追逐自己的梦想!
BATJ大厂Android高频面试题
觉得有收获的记得点赞,关注+收藏哦!你们的点赞就是我的动力!
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
和追逐自己的梦想!
BATJ大厂Android高频面试题
[外链图片转存中…(img-3yQulTyY-1715265980551)]
[外链图片转存中…(img-1lfSictX-1715265980551)]
[外链图片转存中…(img-4OqOtbfl-1715265980552)]
[外链图片转存中…(img-U52UZCFS-1715265980552)]
觉得有收获的记得点赞,关注+收藏哦!你们的点赞就是我的动力!
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!