查看“案例: 运动打卡:音乐播放页面”的源代码
←
案例: 运动打卡:音乐播放页面
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
== 成品图 == [[文件:播放页.png]] == 使用WeUI组件库 == 在 <span style="color:#82a6f5">app.json</span> 中添加下面这段代码 <div style="color:#c7254e;display:inline-block;background:#f9f2f4"> <p> "useExtendedLib": {</p> <p> "kbone": true,</p> <p> "weui": true</p> <p> }</p> </div> <span style="font-size:0.8em">页面配置见index.json</span> == 使用iconfont == 在[https://www.iconfont.cn/ iconfont]新建项目并下载到本地 将压缩包中的 <span style="color:#82a6f5">iconfont.css</span> 改成 <span style="color:#82a6f5">iconfont.wxss</span> ,然后除了 <span style="color:#82a6f5">demo.css</span> 和 <span style="color:#82a6f5">demo_index.html</span> 外全部复制到 <span style="color:#82a6f5">common</span> 下的 <span style="color:#82a6f5">iconfont</span> 文件夹 然后在 <span style="color:#82a6f5">app.wxss</span> 中加上 <span style="color:#c7254e;display:inline-block;background:#f9f2f4"> @import "./common/iconfont/iconfont.wxss"; </span> == index页面 == <span style="color:#82a6f5">index.wxml</span> <nowiki> <view> <status-bar></status-bar> <view class="header"> <mp-icon icon="back" color="#fff" size="{{10}}"></mp-icon> <view class="music-info"> <text class="music-name">{{song.title}}</text> <text>{{song.singer+' >'}}</text> </view> <!-- <mp-icon icon="share" color="#fff" size="{{15}}"></mp-icon> --> <view></view> </view> <view class="main"> <image src="{{song.img}}" class="{{['music-img',(isPlay)?'music-img-playing':'']}}"></image> </view> <view class="control-box"> <view class="control"> <mp-icon icon="like" color="#fff" size="{{20}}"></mp-icon> <mp-icon icon="download" color="#fff" size="{{20}}"></mp-icon> <mp-icon icon="music" color="#fff" size="{{20}}"></mp-icon> <mp-icon icon="comment" color="#fff" size="{{20}}"></mp-icon> <mp-icon icon="more" color="#fff" size="{{20}}"></mp-icon> </view> <view class='slid'> <text class='times'>{{starttime}}</text> <!-- 进度时长 --> <slider bindchange="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" /> <text class='times'>{{duration}}</text> <!-- 总时长 --> </view> <view class="control control-bottom"> <text class="iconfont iconshangyishou"></text> <text class="iconfont iconbofang play" wx:if="{{!isPlay}}" bindtap="listenerButtonPlay"></text> <text class="iconfont iconzanting play" wx:else bindtap="listenerButtonPause"></text> <text class="iconfont iconxiayishou"></text> </view> </view> </view> </nowiki> <span style="color:#82a6f5">index.wxss</span> <nowiki> /* miniprogram/pages/index/index.wxss */ @keyframes playing { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } page { background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%); } .header { width: 650rpx; height: 80rpx; padding: 0 50rpx; display: flex; justify-content: space-between; align-items: center; color: #fff; } .music-info { display: flex; flex-direction: column; align-items: center; font-size: 15rpx; } .music-name { font-size: 25rpx; } .main { width: 750rpx; height: 800rpx; display: flex; justify-content: center; align-items: center; } .music-img { width: 500rpx; height: 500rpx; border-radius: 50%; } .music-img-playing{ animation: playing infinite 10s linear; } .control-box { width: 750rpx; display: flex; flex-direction: column; align-items: center; } .control { display: flex; padding: 0 50rpx; width: 650rpx; justify-content: space-between; align-items: center; } .control text{ color: #fff; font-size: 100rpx; } .control text:active{ color: #f00; } .control .play{ font-size: 140rpx; } .control-bottom{ padding: 0 100rpx; width: 550rpx; margin-top: 50rpx; } .slid { display: flex; align-items: center; color: #fff; margin-top: 50rpx; font-size: 24rpx; } .slid slider { width: 400rpx; margin: 0; margin: 0 35rpx; } </nowiki> <span style="color:#82a6f5">index.wxss</span> <nowiki> // miniprogram/pages/index/index.js const bgMusic = wx.getBackgroundAudioManager() Page({ data: { song: { file: 'https://6d79-mymusic-tha6y-1300908940.tcb.qcloud.la/music/%E5%BF%83%E5%81%9A%E3%81%97/%E5%BF%83%E5%81%9A%E3%81%97%20(%E6%97%A0%E5%BF%83)%20-%20%E5%8F%8C%E7%AC%99.mp3?sign=89a73c9e080e7ab4a4f9cdd94ecd1e30&t=1589691145', img: 'https://6d79-mymusic-tha6y-1300908940.tcb.qcloud.la/music/%E5%BF%83%E5%81%9A%E3%81%97/IMG_7499(20200517-125022).JPG?sign=ac09a374cf4e6bf15dfe471f10dabe5e&t=1589691173', title: '心做し', epname: '心做し', singer:'双笙' }, isPlay: false, //播放开关 starttime: '00:00', //正在播放时长 duration: '04:28'//歌曲的总时长 }, listenerButtonPlay: function () { var that = this bgMusic.title = that.data.song.title bgMusic.epname = that.data.song.epname bgMusic.src = that.data.song.file; bgMusic.onTimeUpdate(() => { var currentTime = parseInt(bgMusic.currentTime); var min = "0" + parseInt(currentTime / 60); var max = parseInt(bgMusic.duration); var sec = currentTime % 60; if (sec < 10) { sec = "0" + sec; }; var starttime = min + ':' + sec; /* 00:00 */ that.setData({ offset: currentTime, starttime: starttime, max: max, changePlay: true }) }) //播放结束 bgMusic.onEnded(() => { that.setData({ starttime: '00:00', isPlay: false, offset: 0 }) console.log("音乐播放结束"); }) bgMusic.play(); that.setData({ isPlay: true, }) }, //暂停播放 listenerButtonPause() { var that = this bgMusic.pause() that.setData({ isPlay: false, }) }, listenerButtonStop() { var that = this bgMusic.stop() }, // 进度条拖拽 sliderChange(e) { var that = this var offset = parseInt(e.detail.value); bgMusic.play(); bgMusic.seek(offset); that.setData({ isPlay: true, }) }, // 页面卸载时停止播放 onUnload() { var that = this that.listenerButtonStop() //停止播放 } }) </nowiki> <span style="color:#82a6f5">status.wxml</span> <nowiki> { "usingComponents": { "mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon", "status-bar": "../../components/status-bar/status-bar" }, "navigationStyle": "custom", "navigationBarTextStyle": "white" } </nowiki> == status组件 == <span style="color:#82a6f5">status-bar.wxml</span> <nowiki><view class="status-bar" style="{{'height:'+(statusBarHeight)+';'+('background-color:'+(bgColor)+';')}}" > <slot></slot> </view> </nowiki> <span style="color:#82a6f5">status-bar.wxss</span> <nowiki> .status-bar { width: 750rpx; height: 20px; } .fixed { position: fixed; top: 0; } </nowiki> <span style="color:#82a6f5">status-bar.js</span> <nowiki> var statusBarHeight = wx.getSystemInfoSync().statusBarHeight + 'px' Component({ properties:{ bgColor:String }, data:{ return:{ statusBarHeight: statusBarHeight } } }) </nowiki> <span style="color:#82a6f5">status-bar.json</span> <nowiki> { "usingComponents": {}, "component": true } </nowiki>
返回至
案例: 运动打卡:音乐播放页面
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息