微信小程序开发 day08、day09 - 模糊态、圆角、默认插槽、歌曲播放、歌词解析、声词同步、进度条同步、正则匹配

一、day08 - 模糊态、圆角、默认插槽、

1、实现下图效果

• ① 背景图是通过主图进行模糊的效果
• ② 主图圆角

 


   


/* pages/home-lsp/index.wxss */
.bg-imgage, .bg-cover {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.bg-cover {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(50px);
}
.music-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}
.music-imgage {
  border-radius: 10rpx;
}

2、小程序里面有插槽、具名插槽，但是没有默认插槽，那么如何实现默认插槽呢？

image.png

3、小程序里面，如何实现横向滚动的tab页面？

image.png

• 借助 【swiper】组件即可

4、如何实现下面的布局？

image.png

• 借助【flex】布局

二、day09 歌曲播放、歌词解析、声词同步、进度条同步

1、对于占满屏幕，不具备滚动效果的页面，如何对元素进行合理的布局？

image.png

• 【核心思路】可以根据屏幕高宽比，动态决定页面元素，比如上图中短屏幕手机，可以将歌词隐藏不展示，从而美化布局。
• 【比例】iPhone X系列高宽比大于2，iphone 6高宽比 1.77

2、对于下面歌词结构，如何正确取得每句歌词的【时间、歌词】？

{"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":7,"lyric":"[00:00.000] 作词 : 唐恬\n[00:00.576] 作曲 : 钱雷\n[00:01.152] 编曲 : 钱雷\n[00:01.728] 制作人 : 钱雷\n[00:02.304] 吉他 : 高飞\n[00:02.880] 人声录音 : 利伟明\n[00:03.456] 人声录音室 : 雅旺录音室\n[00:04.33]Vocal edite：汝文博@SBMS Beijing\n[00:04.49]混音&母带：周天澈@Studio 21A\n[00:04.63]词版权管理方：北京梦织音传媒有限公司\n[00:04.78]曲版权管理方：索尼音乐版权代理（北京）有限公司\n[00:04.92]录音作品及MV版权：EAS MUSIC LTD\n[00:05.07]出品监制：霍锦 卢泓宇\n[00:22.29]都 是勇敢的\n[00:28.50]你额头的伤口 你的 不同 你犯的错\n[00:36.96]都 不必隐藏\n[00:43.20]你破旧的玩偶 你的 面具 你的自我\n[00:51.46]\n[00:51.76]他们说 要带着光 驯服每一头怪兽\n[00:58.65]他们说 要缝好你的伤 没有人爱小丑\n[01:05.98]为何孤独 不可 光荣\n[01:09.25]人只有不完美 值得歌颂\n[01:13.52]谁说污泥满身的不算英雄\n[01:20.50]\n[01:20.80]爱你孤身走暗巷\n[01:22.88]爱你不跪的模样\n[01:24.61]爱你对峙过绝望\n[01:26.41]不肯哭一场\n[01:28.05]\n[01:28.35]爱你破烂的衣裳\n[01:30.11]却敢堵命运的枪\n[01:31.95]爱你和我那么像\n[01:33.83]缺口都一样\n[01:35.23]\n[01:35.53]去吗？配吗？这褴褛的披风\n[01:39.43]战吗？战啊！以最卑微的梦\n[01:43.08]致那黑夜中的呜咽与怒吼\n[01:50.35]谁说站在光里的才算英雄\n[02:08.41]\n[02:08.71]他们说 要戒了你的狂 就像擦掉了污垢\n[02:16.25]他们说 要顺台阶而上 而代价是低头\n[02:23.33]那就让我 不可 乘风\n[02:26.59]你一样骄傲着 那种孤勇\n[02:31.07]谁说对弈平凡的不算英雄\n[02:38.05]\n[02:38.35]爱你孤身走暗巷\n[02:40.29]爱你不跪的模样\n[02:42.10]爱你对峙过绝望\n[02:43.85]不肯哭一场\n[02:45.92]\n[02:45.92]爱你破烂的衣裳\n[02:47.62]却敢堵命运的枪\n[02:49.43]爱你和我那么像\n[02:51.37]缺口都一样\n[02:52.86]\n[02:53.16]去吗？配吗？这褴褛的披风\n[02:56.85]战吗？战啊！以最卑微的梦\n[03:00.55]致那黑夜中的呜咽与怒吼\n[03:07.82]谁说站在光里的才算英雄\n[03:12.25]\n[03:12.55]你的斑驳 与众不同\n[03:19.89]你的沉默 震耳欲聋 You Are The Hero\n[03:26.14]\n[03:26.44]爱你孤身走暗巷\n[03:28.27]爱你不跪的模样\n[03:30.09]爱你对峙过绝望\n[03:31.94]不肯哭一场 (You Are The Hero)\n[03:33.45]\n[03:33.75]爱你来自于蛮荒\n[03:35.75]一生不借谁的光\n[03:37.43]你将造你的城邦\n[03:39.25]在废墟之上\n[03:40.72]\n[03:41.02]去吗？去啊！以最卑微的梦\n[03:44.85]战吗？战啊！以最孤高的梦\n[03:48.54]致那黑夜中的呜咽与怒吼\n[03:55.81]谁说站在光里的才算英雄\n"},"klyric":{"version":0,"lyric":""},"tlyric":{"version":0,"lyric":""},"code":200}

• 【借助正则表达式】字符串匹配利器

// 正则(regular)表达式(expression): 字符串匹配利器

// [00:58.65]
const timeRegExp = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/

export function parseLyric(lyricString) {
  const lyricStrings = lyricString.split("\n")

  const lyricInfos = []
  for (const lineString of lyricStrings) {
    // [00:58.65]他们说 要缝好你的伤 没有人爱小丑
    const timeResult = timeRegExp.exec(lineString)
    if (!timeResult) continue
    // 1.获取时间
    const minute = timeResult[1] * 60 * 1000
    const second = timeResult[2] * 1000
    const millsecondTime = timeResult[3]
    const millsecond = millsecondTime.length === 2 ? millsecondTime * 10: millsecondTime * 1
    const time = minute + second + millsecond

    // 2.获取歌词文
    const text = lineString.replace(timeRegExp, "")
    lyricInfos.push({ time, text })
  }

  return lyricInfos
}

3、如何实现歌词逐渐填充效果？【跳过，用到再研究吧】

image.png

• 实现方案