1. Toy模板网首页
  2. > Toy博客

音乐小程序项目

9月前 作者：xizaizhao 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了音乐小程序项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

 如今微信小程序已经成为我们日常生活中不可或缺的‘介质’，如我们的出行、购物、餐饮、社交、娱乐等活动的小程序已经因有尽有，相比于去安装一个app人们自然更加倾向于在微信中去直接访问某个小程序，而且我们的小程序极为方便的为用户提供服务；

一、学习目标

  • 掌握swiper组件、scroll-view组件的使用
  • 掌握image的使用
  • 掌握音频API的使用
  • 掌握slider组件的使用

二、学习任务

开发前准备

项目展示

  • 音乐小程序项目效果展示：

音乐小程序项目

项目分析

  • 音乐小程序项目页面结构图
  1. tab导航栏
  2. content内容区
  3. player音乐播放控件

音乐小程序项目

  • 音乐小程序项目目录结构：
    音乐小程序项目
    音乐小程序项目

项目初始化

开发者工具创建空白项目

音乐小程序项目

  • 创建文件

音乐小程序项目

"pages": [
        "pages/index/index",
        "pages/test/index",
        "pages/test/swiper",
        "pages/test/test"
    ],
  • 更改标题为音乐
    音乐小程序项目 
{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "音乐",
  "navigationBarTextStyle": "black"
}

任务1：标签页切换

任务分析

  • 标签页和页面（info.wxml、play.wxml、palylist.wxml)结构图：
    音乐小程序项目
  • swiper编写滑动页面结构：
    音乐小程序项目 
<swiper>
  <swiper-item style="background:#ccc">0</swiper-item>
  <swiper-item style="background:#ddd">1</swiper-item>
  <swiper-item style="background:#eee">2</swiper-item>
</swiper>

前导知识

  • swiper组件常用属性：
    音乐小程序项目
    音乐小程序项目
  • swiper组件编写滑动页面结构：
    音乐小程序项目 
<swiper current-item-id="c">
  <swiper-item item-id="a" style="background:#ccc">0</swiper-item>
  <swiper-item item-id="b" style="background:#ddd">1</swiper-item>
  <swiper-item item-id="c" style="background:#eee">2</swiper-item>
</swiper>

  • swiper组件编写滑动页面结构-inder.wxml：

  • swiper组件编写滑动页面结构-index.wxss:

image{
	width:100%;
}
  • include主要用途：
  1. 将代码拆分到多个文件中，可以更方便地查找代码。
  2. 将代码公共部分抽取出来。通过外部文件引入。
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

  • 音乐小程序项目页面结构图：
    1.tab导航栏
    2.content内容区
    3.player音乐播放控件
    音乐小程序项目

  • 音乐小程序基础页面和样式：
    音乐小程序项目

<!-- 标签页标题 -->
<view class="tab">
	<view class="tab-item">音乐推荐</view>
</view>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>
  • 音乐小程序基础页面样式：
    音乐小程序项目 
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>

编写页面结构和样式

  • 音乐小程序基础页面和样式：
    音乐小程序项目 
page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
  • 音乐小程序基础页面和样式-tab导航的样式：
    音乐小程序项目 
.tab {
  display: flex;
}

.tab-item {
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
  • 音乐小程序基础页面样式-tab导航效果：
    音乐小程序项目
  • 编写页面info.wxml、page.wxml、play.wxml文件：
<view style="background:#ddd; color:#000; height:100%"> play </view>
<view style="background:#ccc; color:#000;height:100%">infi</view>
<view style="background:#eee;color:#000; height:100%>playlist</view>
  • 单击导航栏选项卡实现标签页切换：
    音乐小程序项目 
 <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>

音乐小程序项目

.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}
  • 通过滚动事件切换页面效果：
    音乐小程序项目 
<swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <!-- 内容滚动区域 -->
      <scroll-view class="content-info" scroll-y>
        <!-- 轮播图 -->
        <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
          <swiper-item>
            <image src="/images/banner.jpg" />
          </swiper-item>
          <swiper-item>
            <image src="/images/banner.jpg" />
          </swiper-item>
          <swiper-item>
            <image src="/images/banner.jpg" />
          </swiper-item>
        </swiper>

音乐小程序项目

.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

实现标签页切换

  • 通过滚动事件切换页面效果：
    音乐小程序项目

任务2：音乐推荐

任务分析

  • 音乐推荐页面结构图：音乐小程序项目
  • scroll-view组件的属性及说明：
    音乐小程序项目
    音乐小程序项目
  • scroll-view实践对象：
<scroll-view scroll-x scroll-y style="height:200px" bindscroll="scroll">
<view style="width:200%;height:400px;background:#ccc"></view>
</scroll-view>
scroll:function(e){
console.log(e.detail)
},
  • scroll-view组件事件对象：
    音乐小程序项目

前导知识

  • scroll-view组件的属性及说明：
    音乐小程序项目

音乐小程序项目

  • scroll-view事件对象：
<scroll-view scoll-x scroll-y style_"height:200px"bindscroll="scroll">
<view style="width:200%;height:400px;background:#ccc"></view>
</scroll-view>
scroll:function(e){
console.log(e.detail)
},

音乐小程序项目

  • scroll-view组件对象参数分析：
    1.scrollLeft:横向滚动条左侧到视图左边的距离。
    2.scrollTop:纵向滚动条上端到视图顶部的距离。
    3.scrollHeight;纵向滚动条在Y轴上最大距离。
    4.scrollWidth:横向滚动条在X轴上最大的滚动距离。
    5.deltaX:横向滚动条的滚动状态。
    6.deltaY:纵向滚动条的状态。
  • image属性及说明：
    音乐小程序项目
  • image组件缩放模式-mode:
    音乐小程序项目
  • image组件9中裁剪模式-mode：
    音乐小程序项目
    音乐小程序项目
  • image组件缩放模式和裁剪模式测试：
    音乐小程序项目

内容区域滚动

  • scroll-view组件：
    音乐小程序项目 
<scroll-view class="content-info" scroll-y>
<view style="background:#eee;height:1000px"></view>
<view>已到达底部</view>
</scroll-view>

轮播图

  • swiper实现轮播图：
    音乐小程序项目 
  <swiper class="content-info-slide" 
  indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" 
  indicator-dots circular autoplay>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
  </swiper>
  • 轮播图效果
    音乐小程序项目

功能按钮

  • flex布局实现功能按钮：
    音乐小程序项目 
  <!-- 功能按钮 -->
  <view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>
    <view>
      <image src="/images/05.png" />
      <text>每日歌曲推荐</text>
    </view>
    <view>
      <image src="/images/06.png" />
      <text>云音乐新歌榜</text>
    </view>
  </view>

音乐小程序项目

.content-info-portal {
  display: flex;
  margin-bottom: 15px;
}

.content-info-portal > view {
  flex: 1;
  font-size: 11pt;
  text-align: center;
}

.content-info-portal image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}
  • 功能按钮效果
    音乐小程序项目

热门音乐

  • flex布局实现页面布局：
    音乐小程序项目 
<!-- 热门音乐 -->
        <view class="content-info-list">
          <view class="list-title">推荐歌曲</view>
          <view class="list-inner">
            <view class="list-item">
              <image src="/images/cover.jpg" />
              <view>紫罗兰</view>
            </view>
            <view class="list-item">
              <image src="/images/cover.jpg" />
              <view>五月之歌</view>
            </view>
            <view class="list-item">
              <image src="/images/cover.jpg" />
              <view>菩提树</view>
            </view>
            <view class="list-item">
              <image src="/images/cover.jpg" />
              <view>欢乐颂</view>
            </view>
            <view class="list-item">
              <image src="/images/cover.jpg" />
              <view>安魂曲</view>
            </view>
            <view class="list-item">
              <image src="/images/cover.jpg" />
              <view>摇篮曲</view>
            </view>
          </view>
        </view>

音乐小程序项目

/* 热门音乐 */

.content-info-list {
  font-size: 11pt;
  margin-bottom: 20rpx;
}

.content-info-list > .list-title {
  margin: 20rpx 35rpx;
}

.content-info-list > .list-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}

.content-info-list > .list-inner > .list-item {
  flex: 1;
}

.content-info-list > .list-inner > .list-item > image {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}

.content-info-list > .list-inner > .list-item > view {
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;

}

  • 实现效果
    音乐小程序项目

  • index页面底部播放

音乐小程序项目

<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>
  <view class="player-controls">
    <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" />
    <!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" />
  </view>
</view>

音乐小程序项目

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}
.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}

.player-info-singer {
  color: #888;
}

.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

音乐小程序项目

任务3：播放器

任务分析

  • 播放器标签页结构图：

音乐小程序项目

  • 播放器的具体功能进行分析：
    1.音乐信息：显示当前播放的曲目的标题和艺术家。
    2.专辑封面：当音乐播放时，专辑封面会顺时针旋转。
    3.播放进度：显示播放进度，调节音乐进度。

前导知识

  • audioCtx声名的方式：
varaudioCtx = wx.createlnnerAudioContext();
  • 音频API接口的属性及说明：
    音乐小程序项目
    音乐小程序项目
    音乐小程序项目

音乐小程序项目

  • innerAudioContext案例使用：
onReady：function(){
var audioCtx = wx.createlnnerAudioContext()
audioCtx.src = 'http://……/xx.mp3'
console.log（‘开始播放')
})
……
},
  • slider组件属性及说明：
    音乐小程序项目
    音乐小程序项目
  • slider组件的使用：
<slider bindchanging="sliderChanging" show-value />

sliderChanging:function(e){
console.log(e.detail.value)
  • slider组件的使用：
    音乐小程序项目

定义基础数据

  • 音乐播放列表和音乐状态数据：
    音乐小程序项目 
    // 播放列表数据
    playlist: [{
      id: 1,
      title: '钢琴协奏曲',
      singer: '肖邦',
      src: 'http://localhost:3000/1.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 2,
      title: '奏鸣曲',
      singer: '莫扎特',
      src: 'http://localhost:3000/2.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 3,
      title: '欢乐颂',
      singer: '贝多芬',
      src: 'http://localhost:3000/1.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 4,
      title: '爱之梦',
      singer: '李斯特',
      src: 'http://localhost:3000/2.mp3',
      coverImgUrl: '/images/cover.jpg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

实现音乐播放功能

  • 底部播放器的结构代码：
    音乐小程序项目 
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>
  <view class="player-controls">

音乐小程序项目

/* 底部播放器 */

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

音乐小程序项目

  • 底部播放器暂停/播放按钮控制歌曲：
    音乐小程序项目 
<!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />

play:function(){
this.audioCtx.play()
this.setData({state:'running'})
}
  • 实现播放器切换下一曲歌曲：
    音乐小程序项目 
<!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" />

next：function(){
var index = this.data.playlndex >= this.data.playlist.length- 1 ?
0:this.data.playlndex + 1
this.setMusic(index)
……},

编写播放器页面

  • 播放器页面结构代码：
    音乐小程序项目 
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>

音乐小程序项目

.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

音乐小程序项目

  • 播放器
    音乐小程序项目 
<!-- 播放器 -->
<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>
  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>
  <!-- 显示播放进度和时间 -->
  <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    </view>
    <text>{{play.duration}}</text>
  </view>
</view>

音乐小程序项目

/* 播放器 */

.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.content-play-info > view {
  color: #888;
  font-size: 11pt;
}

音乐小程序项目

  • 编写CSS3动画实现海报的旋转功能：

音乐小程序项目

  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>

音乐小程序项目

/* 显示专辑页面样式 */

.content-play-cover image {
  animation: rotateImage 10s linear infinite;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 1px solid #333;
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

音乐小程序项目

控制播放进度

  • 播放器页面下方的滑块结构：
    音乐小程序项目 
 <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" 
      block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    </view>

音乐小程序项目

/* 播放进度和时间 */

.content-play-progress {
  display: flex;
  align-items: center;
  margin: 0 35rpx;
  font-size: 9pt;
  text-align: center;
}

.content-play-progress > view {
  flex: 1;
}

音乐小程序项目

  • 显示音乐的播放进度：
onReady:function(){
this.audioCtx = wx.createlnnerAudioContext()
var that = this
this.audioCtx.onEnded(function(){
that.next()
})
……
},
  • 控制进度条的长度控制歌曲播放精度：
<slider bindchange="sliderChange"
activeColor="#d33a31"
block-size="12"
backgroundColor="#dadada"
value="{{play.percent}}/>

sliderChange:function(e){
var second = e.detail.value * 
this.ayduoCtx.duration / 100
this.audioCtx.sseek(second)
},

任务4：播放列表

任务分析

  • 控制进度条长度控制歌曲播放进度：
    音乐小程序项目

编写页面结构和样式

  • 控制进度条的长度控制歌曲播放进度：
    音乐小程序项目 
<scroll-view class="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{{playlist}}" wx:key="id" 
  bindtap="change" data-index="{{index}}">
    <image class="playlist-cover" src="{{item.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{{item.title}}</view>
      <view class="playlist-info-singer">{{item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if="{{index==playIndex}}">正在播放</text>
    </view>
  </view>
</scroll-view>
  • 控制进度条的长度控制歌曲播放进度：

音乐小程序项目

/* 播放列表 */

.playlist-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}

音乐小程序项目文章来源地址https://www.toymoban.com/news/detail-482659.html

  • 实现换曲功能：
change:function(e){
this.setMusic(e.currentTarget.dataset.index)
this.play()
},

到了这里，关于音乐小程序项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之网易云音乐的实现-云音乐

    微信小程序之网易云音乐的实现-云音乐

    基本介绍 基本功能都实现了,音乐的上一首下一首播放等,顺便把进度条的拖动播放写了下 主页的 每日推荐界面 写了 ,登录通过账号密码登录 (你也可以自己加一个验证码或者邮箱登录 ) 基于iPhone6(375*667分辨率)开发,后面一些计算都是通过获取当前屏幕下的尺寸来计算的,但是不

    2024年02月10日
    浏览(41)

  • 微信小程序如何判断是否已经订阅某条消息

    判断订阅消息是否已经订阅 res.subscriptionsSetting.itemSettings 返回的是所有订阅消息的对象集合，\\\'accept\\\' 表示用户同意订阅这条消息，\\\'reject\\\' 表示用户拒绝订阅这条消息，\\\'ban\\\' 表示已被后台封禁。

    2024年02月11日
    浏览(65)
  • 微信小程序--音乐播放器

    微信小程序--音乐播放器

    说明： 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时

    2024年02月09日
    浏览(42)

  • 微信小程序音乐播放功能代码

    咱就是话不多说直接上代码，不让亲戚老爷们苦等。 首先，在你的小程序页面的js文件中，定义音乐播放相关的数据和方法： 然后，在你的小程序页面的wxml文件中，添加相关的按钮和状态显示： 最后，在微信开发者工具中预览或真机调试你的小程序，点击对应的按钮即可实

    2024年02月16日
    浏览(37)
  • 音乐小程序项目

    音乐小程序项目

    掌握swiper组件、scroll-view组件的使用 掌握image的使用 掌握音频API的使用 掌握slider组件的使用 项目展示 音乐小程序项目效果展示： 项目分析 音乐小程序项目页面结构图 tab导航栏 content内容区 player音乐播放控件 音乐小程序项目目录结构： 项目初始化 开发者工具创建空白项目

    2024年02月08日
    浏览(40)
  • 基于网易云音乐API的微信小程序——zwhdlb的音乐平台

    基于网易云音乐API的微信小程序——zwhdlb的音乐平台

    最近在学习小程序的开发的过程中，临时想写一个音乐小程序，看到了网易云 提供了后台api程序，这方便我们直接进行音乐小程序的开发不用再从后端开始开发，网易云音乐平时也经常在用，因此想记录一下学习过程 开发工具：微信开发者工具 界面UI组件库用到的是ColorUI

    2023年04月27日
    浏览(46)
  • 微信小程序音乐播放器实践

    微信小程序音乐播放器实践

    1.成品展示： 实现搜索音乐，同步歌词，控制播放等功能 2.设计： 采用微信开发文档中的audio组件的作为代码原型，进行扩展，链接audio | 微信开放文档 (qq.com) 3、具体设计 思维导图 链接：https://pan.baidu.com/s/1whZC2xOP4HvbDMjMPA7pRQ  提取码：ljsb 3.1 播放界面index 3.2 索引界面list

    2024年02月11日
    浏览(41)
  • 微信小程序——【云音乐播放器】

    微信小程序——【云音乐播放器】

    目录 第一章 开发准备 一、项目结构 二、新建微信小程序项目 第二章 标签页切换 一、常用组件介绍 二、编写页面结构和样式 第三章 音乐推荐 一、组件介绍 二、编写音乐推荐页面结构和样式 第四章 播放器 一、任务分析 二、组件介绍 三、实现播放器功能 四、编写播放器

    2024年02月09日
    浏览(43)
  • 音乐播放器微信小程序

    音乐播放器微信小程序

    一：学习目标： 掌握swiper组件、scroll-view组件的使用； 掌握image组件的使用； 掌握slider组件的使用； 掌握音频API的使用；  二：目录： 1. 开发前的准备 1.1 音乐小程序 项目展示 ： 1.1.1： 音乐推荐 界面展示： 1.1.2： 播放器 界面展示： 1.1.3： 播放列表 界面展示： 1.2： 项目

    2024年02月05日
    浏览(69)
  • 创新小程序项目介绍：音乐推荐小程序

    创新小程序项目介绍：音乐推荐小程序

    💂 个人网站:【海拥】【游戏大全】【神级源码资源网】 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】 随着音乐行业的发展和用户对个性化音乐推荐的需求增加，本文将介绍一个创新的小程

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包