案例: 运动打卡：音乐播放页面

来自CloudWiki
跳转至： 导航， 搜索

成品图

播放页.png

使用WeUI组件库

在 app.json 中添加下面这段代码

"useExtendedLib": {

   "kbone": true,

   "weui": true

}

页面配置见index.json

使用iconfont

在iconfont新建项目并下载到本地

将压缩包中的 iconfont.css 改成 iconfont.wxss ,然后除了 demo.css 和 demo_index.html 外全部复制到 common 下的 iconfont 文件夹

然后在 app.wxss 中加上

@import "./common/iconfont/iconfont.wxss";

index页面

index.wxml 

  <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>

index.wxss 

 /* 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;
}

index.wxss 

// 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() //停止播放
    }
})

status.wxml 

{
  "usingComponents": {
    "mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon",
    "status-bar": "../../components/status-bar/status-bar"
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}

status组件

status-bar.wxml 

<view 
    class="status-bar" 
    style="{{'height:'+(statusBarHeight)+';'+('background-color:'+(bgColor)+';')}}"
>
	<slot></slot>
</view>

status-bar.wxss 

.status-bar {
  width: 750rpx;
  height: 20px;
}
.fixed {
  position: fixed;
  top: 0;
}

status-bar.js 

var statusBarHeight = wx.getSystemInfoSync().statusBarHeight + 'px'
Component({
  properties:{
    bgColor:String
  },
  data:{
    return:{
      statusBarHeight: statusBarHeight
    }
  }
})

status-bar.json 

{
  "usingComponents": {},
  "component": true
}
取自“http://www.openbrains.net/mediawiki/index.php?title=案例:_运动打卡：音乐播放页面&oldid=18517”