音乐小程序

Pluto.291

已于 2022-12-22 15:27:30 修改

阅读量368

点赞数

文章标签：微信小程序

于 2022-12-22 15:24:16 首次发布

本文链接：https://blog.csdn.net/qq_55678282/article/details/128405822

版权

本文详述了如何使用微信小程序开发音乐应用，涵盖了swiper、scroll-view、image和slider组件的运用，以及音频API的使用。从项目初始化、页面布局到播放器逻辑代码，包括音乐推荐、播放器设计和播放列表控制，逐步解析音乐小程序的各个关键部分。

摘要由CSDN通过智能技术生成

一、学习目标

1.掌握swiper组件、scroll-view组件的使用

2.掌握image组件的使用

3.掌握slider组件的使用

4.掌握音频API的使用

二、项目展示

1.音乐小程序项目展示

2.音乐小程序目录结构

标签	功能
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
pages/index/index.js	index页面的逻辑文件
pages/index/index.json	index页面的配置文件
pages/index/index.wxss	index页面的样式文件
pages/index/index.wxml	应用程序的配置文件
pages/index/info.wxml	index页面的结构文件
pages/index/play.wxml	播放器标签页的结构文件
images	图片文件

项目初始化，新建一个项目

三、音乐推荐

1.标签页和页面结构图

在这里插入图片描述

2.在pages/index/index.wxml中实现基础页面和样式

页面

	<!-- 标签页标题 -->
    <view class="tab">
      <view class="tab-item">音乐推荐</view>
       …
     </view>
    <!-- 内容区域 -->
    <view class="content"></view>
    <!-- 底部播放器 -->
    <view class="player"></view>

tab导航栏

<!-- 标签页标题 -->
<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>