歌词组件的设计与实现

首先需要实现的就是，在点击封面的时候，可以显示歌词页面，即在封面的时候会有一个点击事件

一、点击事件控制元素是否显示

定义组件过程、引用（略）
在封面上定义点击事件bindtap="onChangeLyricShow"
在脚本中我们定义一个全局bool变量，判断当前是歌词还是封面。
在事件中进行取反数据绑定

 onChangeLyricShow(){
   
    this.setData({
   
      isLyricShow:!this.data.isLyricShow
    })

并隐藏之前一个组件，使用次数多的用hiddenhidden="{ {isLyricShow}}"
,组件中也是用对应的事件进行取反操作。隐藏与封面相反

<bs-lyric   isLyricShow="{
   {!isLyricShow}}" bindtap="onChangeLyricShow"/>

在组件中响应变量变化

定义他的类型和数值。并在前端响应相应隐藏
<scroll-view hidden="{ {isLyricShow}}"> 歌词 </scroll-view>

二、歌词显示

在当前歌曲加载成功后在显示歌词，因为不需要一显示就加载歌词。
所以在加载完封面之类的首要显示内容在请求单词

首先当前是从云函数中请求我们的歌词资源

app.router('lyric',async(ctx,next)=>{
   
  ctx.body=await rp(URL+`/lyric?id=${
     event.musicId}`).then((res)=>{
   
     return res
   })
})

请求后在页面请求调用

判断当前歌词的情况，并进行字符串装换。
在前台将我们的绑定数据进行传送，传递给组件lyric="{ {lyric}}"

在组件中接受，并通过属性监听器来监听数据
observers:{ lyric(lrc){ console.log(lrc) } },

解析歌词

在获取到资源的情况下，将我们的歌词逐行解析，显示在桌面上

 _parseLyric(sLyric){
   
      //通过每一行的换行，取到每一行的歌词
      let line=sLyric.split('\n')
      let _lrcList=[