微信小程序开发之——婚礼邀请函-邀请函页面(4,腾讯android面试题目
李四
新娘
我们诚邀您来参加我们的婚礼
事件: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: 1
00vh;
}
.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’
// this.bgm.coverImgUrl=this.music_coverImgUrl
// this.bgm.onCanplay(()=>{
// this.bgm.pause()
// })
// this.bgm.src=this.music_url
},
/**
- 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
- 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
gm.coverImgUrl=this.music_coverImgUrl
// this.bgm.onCanplay(()=>{
// this.bgm.pause()
// })
// this.bgm.src=this.music_url
},
/**
- 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
- 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
微信小程序开发之——婚礼邀请函-邀请函页面(4,腾讯android面试题目相关推荐
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)...
很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...
- 微信小程序开发之——比较数字大小-页面样式(2.3)
一 概述 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式.WXSS具有CSS大部分特性,并在CSS基础上做了一些扩充和修改. 二 选择器 2.1 概述 W ...
- 微信小程序开发之——婚礼邀请函-项目展示(4.1)
一 概述 项目页面组成 项目中使用到的API及组件 二 项目页面组成 2.1 项目整体预览 2.2 项目页面组成 本项目共有5个页面组成,分别是邀请函.照片.美好时光.婚礼地点.宾客信息 邀请函 邀请 ...
- 微信小程序开发之——婚礼邀请函-美好时光页面(4.5)
一 概述 "美好时光"页面任务说明 video组件和腾讯视频插件介绍 "美好时光"页面功能开发 "美好时光"页面效果图 二 "美好 ...
- 微信小程序开发之——婚礼邀请函-邀请函页面(4.3)
一 概述 "邀请函"页面说明 婚礼邀请函功能开发 效果图 二 "邀请函"页面说明 右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击 ...
- 微信小程序开发之——婚礼邀请函-项目初始化(4.2)
一 概述 tabBar组件介绍 项目初始化 项目目录结构说明 二 tabBar组件介绍 2.1 常用属性表 属性 说明 color 未选择时,底部导航文字的颜色 selectedColor 选中时,底 ...
- 微信小程序开发之——婚礼邀请函-照片页面(4.4)
一 概述 "照片"页面任务说明 "照片"页面功能开发 效果图 二 "照片"页面任务说明 每一张轮播的图片都占满显示区域,滑动屏幕可以实现图片 ...
- 微信小程序开发之——婚礼邀请函-邀请函页面(4,android应用案例开发大全第2版
} @keyframes musicRotate{ from{transform:rotate(0deg);} to{transform: rotate(360deg);} } /* 播放暂停 */ ...
最新文章
- 构建iOS稳定应用架构时方案选择的思考,主要涉及工程结构,数据流思想和代码规范...
- Vue013_ vue组件化编码
- CV与IP:基础,经典以及最近发展
- ZZULIOJ 1118: 数列有序
- 04_使用Influxdb自带函数查询
- position:搜索框显示历史浏览记录
- 仓库管理员怎样做台账_仓库主管岗位职责
- Visual Studio2017 数据库架构比较
- c++中sort()及qsort()的使用方法总结
- 首席建筑师之光线追踪教程
- 统计矩形中的正方形和长方形
- Android之Intent详解
- 硬盘分区格式GPT与MBR无损互相转换而不破坏硬盘存储资料
- 展会中,你做得够好么?
- 镜子中的 Google
- 失去池子的笑果文化越来越不好笑了
- 计算机没有检查到您的u盾,Win10检测不到U盾怎么办?
- 机器学习数学基础——群论
- JAVA中创建线程的三种方法及比较
- 真实生活的记录:我三年的外企生涯(9) 出处:天涯虚拟社区