1.在pages.json 添加如下行
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app x"
}
},
{
"path": "pages/musicplayer/musicplayer",
"style": {
"navigationBarTitleText": ""
}
}
],
"globalStyle": {
"navigationStyle": "custom",
"backgroundColorContent": "@backgroundColorContent",
"backgroundColor": "@backgroundColor",
"backgroundTextStyle": "@backgroundTextStyle"
},
"uniIdRouter": {} }
2.创建动态状态栏组件 方便复用
<script setup lang="uts">
</script>
<template>
<viewstyle="{
height: uni.getWindowInfo().statusBarHeight + 'px',
width:'100%',
}"
/>
</template>
3.创建index.nvue 文件
<template>
<view class="index-tabbar">
<AI-StatusBar></AI-StatusBar>
<view @tap="onMusicPlayer" style="margin-bottom: 20rpx;flex-direction: row;align-items: center;padding: 0 20rpx;">
<view style="flex-direction: row;align-items: center;flex: 1;">
<view style="border-radius: 50%;width: 80rpx;height: 80rpx;background: #409EFF;"></view>
<view style="margin-left: 20rpx;">
<text style="font-size: 28rpx;">遗忘之前 - 徐佳莹</text>
</view>
</view>
<view style="flex-direction: row;align-items: center;">
<view style="width: 50rpx;height: 50rpx;background-color: #0eb100;"></view>
<view style="margin-left: 20rpx;width: 50rpx;height: 50rpx;background-color: #0eb100;"></view>
</view>
</view>
</view> </template>
<script setup lang="uts">
const onMusicPlayer = ()=>{
uni.openDialogPage({
url:'/pages/musicplayer/musicplayer',
animationType:'slide-in-bottom'
})
}
</script>
<style>
.logo {
height: 100px;
width: 100px;
margin: 100px auto 25px auto;
}
.title {
font-size: 18px;
color: #8f8f94;
text-align: center;
} </style>
4.创建 musicplayer.nvue 文件
<template>
<view @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" class="music-player"
style="background: #fff;">
<AI-StatusBar></AI-StatusBar>
<view style="flex: 1;padding: 20rpx;align-items: center;flex-direction: column;">
<view class="top">
<view style="width: 40rpx;height: 40rpx;">
<image style="width: 100%;height: 100%;" src="/static/musicplayer/down.png"></image>
</view>
<view class="top-center">
<text>绿色</text>
<text style="color: #999;font-size: 26rpx;">陈雪凝</text>
</view>
<view style="width: 50rpx;height: 50rpx;">
<image style="width: 100%;height: 100%;" src="/static/musicplayer/share.png"></image>
</view>
</view>
<view class="shimmer-view" style="justify-content: center;flex-direction: column;align-items: center;">
<view class="shimmer-obj"></view>
<view class="shimmer-obj-2"></view>
<view style="width: 80%;height: 80%;border-radius: 50%;background-color: #fff;"></view>
</view>
<view class="musicplayer"
style="flex: 1;width: 100%;overflow: hidden; transition-duration: 0.3s;flex-direction: column;align-items: center;">
<text v-for="(line,index) in lrcList" style="
height: 50rpx;line-height: 50rpx;
transition-duration: 0.3s; " :style="{'font-size':currentIndex === index?'32rpx':'26rpx'}">
{{line.text}}
</text>
</view>
<view
style="margin: 20rpx 0;width: 85%;flex-direction: row;justify-content: space-between;align-items: center;">
<view style="width: 80rpx;height: 80rpx;background-color: #999;" v-for="item in 6"></view>
</view>
<slider style="width: 85%;" :max="10" :value="1" :step="0.1" :block-size="20"></slider>
<view
style="width: 85%;margin: 10rpx 0;flex-direction: row;justify-content: space-between;align-items: center;">
<text style="color: #999;font-size: 24rpx;">00:00</text>
<text style="color: #999;font-size: 24rpx;">40:00</text>
</view>
<view
style="margin: 40rpx 0;width: 85%;flex-direction: row;justify-content: space-between;align-items: center;">
<view style="width: 60rpx;height: 60rpx;background-color: #999;"></view>
<view style="width: 80rpx;height: 80rpx;background-color: #999;"></view>
<view style="width: 120rpx;height: 120rpx;background-color: #999;" @tap="togglePause"></view>
<view style="width: 80rpx;height: 80rpx;background-color: #999;"></view>
<view style="width: 60rpx;height: 60rpx;background-color: #999;"></view>
</view>
</view>
</view>
</template>
<script setup>
type lrcType = {
time : number,
text : string
}
const bgAudioManager = uni.getBackgroundAudioManager();
const progressValue = ref(20)
const currentInstance = getCurrentInstance()
const currentPage = currentInstance?.proxy?.$page
const startY = ref(0)
const currentY = ref(0)
const isPaused = ref<boolean>(true)
const playerC = ref(0)
const currentIndex = ref(0);
const lrcList = ref<lrcType[]>([
{ time: 0, text: '说不痛苦那是假的' },
{ time: 5, text: '毕竟我的心也是肉做的' },
{ time: 10, text: '你离开时我心里的彩虹' },
{ time: 15, text: '就变成灰色' },
{ time: 20, text: '说很快活那是假的' },
{ time: 25, text: '如果我真的没那么爱过' },
{ time: 30, text: '爱着一个没有灵魂的人' },
{ time: 35, text: '世界都是黑色' },
])
const togglePause = () => {
if (isPaused.value == true) {
bgAudioManager.play()
} else {
bgAudioManager.pause()
}
}
const getFlexNodeInfo = () => {
uni.createSelectorQuery().select('.musicplayer').boundingClientRect().exec((ret) => {
console.log(ret)
})
}
const onTouchStart = (e : TouchEvent) => {
startY.value = e.touches[0].clientY
}
const onTouchMove = (e : TouchEvent) => {
currentY.value = e.touches[0].clientY
}
const onTouchEnd = () => {
const distance = currentY.value - startY.value
if (distance > 50) { // 下滑超过50px触发关闭
// 执行关闭抽屉的操作
uni.closeDialogPage({
dialogPage: currentPage
})
}
}
bgAudioManager.onPlay(() => {
isPaused.value = false
})
bgAudioManager.onPause(() => {
isPaused.value = true
})
bgAudioManager.onError((err) => {
console.log(err)
})
bgAudioManager.onEnded(() => {
isPaused.value = true
})
bgAudioManager.onTimeUpdate(() => {
});
onReady(() => {
console.log("onReady")
nextTick(() => {
console.log("onReady-nextTick")
getFlexNodeInfo()
})
})
onLoad(() => {
bgAudioManager.title = "绿色"
bgAudioManager.coverImgUrl = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png"
bgAudioManager.singer = "陈雪凝";
bgAudioManager.src = "https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3"
}) </script>
<style>
.shimmer-view {
position: relative;
overflow: hidden;
margin-top: 100rpx;
height: 560rpx;
border-radius: 50%;
width: 560rpx;
background: #000;
border: 6px solid #f8f8f8;
}
.shimmer-obj {
position: absolute;
width: 50%;
height: 50%;
border-radius: 50% 50% 50% 50%;
background-color: #fff;
right: -20rpx;
bottom: 0;
transform: rotate(120deg);
opacity: 0.2;
}
.shimmer-obj-2 {
position: absolute;
width: 50%;
height: 50%;
border-radius: 50% 50% 50% 50%;
background-color: #fff;
left: -20rpx;
top: 0;
transform: rotate(120deg);
opacity: 0.2;
}
.music-player {
height: 100%;
width: 100%;
}
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
.top-center {
display: flex;
flex-direction: column;
align-items: center;
} </style>
5.开启mumu模拟器 并连接真机
6.进入index页面 点击tabbar栏 转入 musicplayer 页面
6.此时观察 onReady生命周期 输出内容 内容是空数组
