微信小程序——云音乐界面

news2025/11/4 11:53:25

文章目录

  • 第一章 开发前的准备
    • 一、项目展示
    • 二、项目分析
    • 三、项目初始化
  • 第二章 标签页切换
    • 一、任务分析
    • 二、常用组件介绍
    • 三、编写页面结构和样式
  • 第三章 音乐推荐
    • 一、任务分析
    • 二、组件介绍
    • 三、编写音乐推荐页面结构和样式

第一章 开发前的准备

一、项目展示

  • 音乐小程序项目效果展示
  • 音乐推荐页面展示
    在这里插入图片描述
  • 播放器展示
    在这里插入图片描述
  • 播放列表展示
    在这里插入图片描述

二、项目分析

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

在这里插入图片描述

  • 音乐小程序项目目录结构
标签功能
app.js应用程序的逻辑文件
app.json应用程序的配置文件
pages/index/index.jsindex页面的逻辑文件
pages/index/index.jsonindex页面的配置文件
pages/index/index.wxssindex页面的样式文件

三、项目初始化

  • 开发者工具创建空白项目：
    在这里插入图片描述
    在这里插入图片描述
  • 修改app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述

  • 删除index.wxml、index.wxss里的内容使其成为一个空白的页面
    在这里插入图片描述

第二章 标签页切换

一、任务分析

  • 标签页和页面（info.wxml、play.wxml、palylist.wxml）结构图：
    在这里插入图片描述

二、常用组件介绍

  • swiper常用属性：
可选值说明默认
indicator-dotsBoolean是否显示面板指示点，默认为false
indicator-colorColor指示点颜色，默认为rgba(0,0,0,.3)
indicator-active-colorColor当前选中的指示点颜色，默认为#000000
autoplayBoolean是否自动切换，默认为false
currentNumber当前所在滑块的index，默认为0
current-item-idString当前所在滑块的item-id（不能同时指定current）
intervalNumber自动切换时间间隔（毫秒），默认为5000
durationNumber滑动动画时长（毫秒），默认为500
circularBoolean是否采用衔接滑动，默认为false
verticalBoolean滑动方向是否为纵向，默认为false
bindchangeEventHandlecurrent改变时会触发change事件
  • 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>

在这里插入图片描述

三、编写页面结构和样式

  • 在pages/index/index.wxml编写页面和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>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>

在这里插入图片描述

  • 在pages/index/index.wxss编写页面样式和tab导航栏样式
page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;

}

.tab {
  display: flex;
}

.tab-item {
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

在这里插入图片描述

  • 添加页面info.wxml、playlist.wxml、play.wxml文件
    在这里插入图片描述
  • 实现标签页切换，通过滚动事件切换页面效果
<!-- 标签页标题 -->
<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>
<!-- 内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <include src="info.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="play.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml"></include>
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

在这里插入图片描述

  • 滚动事件
    // tab切换
    changeTab: function(e) {
      this.setData({
        tab: e.detail.current
      })
    },

在这里插入图片描述

  • 通过滚动事件切换页面
    在这里插入图片描述

第三章 音乐推荐

一、任务分析

  • 音乐推荐页面结构图
    在这里插入图片描述

二、组件介绍

  • scroll-view组件的属性及说明
可选值说明默认
scroll-xBoolean允许横向滚动，默认为false
scroll-yBoolean允许纵向滚动，默认为false
scroll-topNumber / String设置竖向滚动条的位置
scroll-leftNumber / String设置横向滚动条的位置
bindscrolltoupperEventHandle滚动到顶部/左边时触发的事件
bindscrolltolowerEventHandle滚动到底部/右边时触发的事件
scroll-with-animationBoolean滚动到顶部/左边时触发的事件
scroll-into-viewString设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）
bindscrollEventHandle滚动时触发的事件

三、编写音乐推荐页面结构和样式

  • 在info.wxml里实现内容区域滚动和轮播图
<!-- 内容滚动区域 -->
<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>
</scroll-view>

.content-info {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 轮播图 */

.content-info-slide {
  height: 302rpx;
  margin-bottom: 20px;
}

.content-info-slide image {
  width: 100%;
  height: 100%;
}

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • 在info.html里实现功能按钮
<!-- 功能按钮 -->
  <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.wxml里编写底部播放器

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/79769.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

.net开发安卓入门 - Notification（通知）

.net开发安卓入门 - Notification（通知）

.net开发安卓入门 - Notification&#xff08;通知&#xff09;通知的布局创建通知通道创建和发布通知我的样例效果图代码资源文件常见问题一切代码都准备就绪了&#xff0c;为什么就是不提示消息内容呢&#xff1f;为什么我的通知不是弹出式的同系列文章推荐通知的布局 创建通…
阅读更多...
yolov7运行自己的VOC格式数据集

yolov7运行自己的VOC格式数据集

yolov7运行VOC格式数据集测试开发环境使用自己的VOC格式数据集训练修改配置文件yolov7.yaml修改配置文件voc.yamlVOC格式数据集转换COCO格式开始训练重头开始fine-trainBUG常见报错1常见报错2成功训练网络评价指标可视化测试开发环境 去官网下载yolov7的权重文件&#xff0c;放…
阅读更多...
async/await

async/await

理解async函数就要先理解generator (生成器)函数,因为async是generator函数的语法糖。 Generator函数 Generator 函数是 ES6 提供的一种异步编程解决方案&#xff0c;可以先理解为一个状态机&#xff0c;封装了多个内部状态&#xff0c;执行Generator函数返回一个遍历器对象&…
阅读更多...
【ChatGPT 中文版插件】无需注册体验 ChatGPT 的攻略

【ChatGPT 中文版插件】无需注册体验 ChatGPT 的攻略

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…
阅读更多...
假设检验介绍

假设检验介绍

数据科学是一个不断发展的领域&#xff0c;近年来越来越受欢迎。数据科学的一个重要组成部分是假设检验的使用&#xff0c;它可用于从数据中得出结论并做出明智的决策。 什么是假设检验&#xff1f; 假设检验是数据科学中常用的方法&#xff0c;用于评估关于总体参数的假设的有…
阅读更多...
前端超级实用的Visual Studio Code插件

前端超级实用的Visual Studio Code插件

前端超级实用的Visual Studio Code插件1、Bracket Pair Colorizer&#xff1a;可以把不同嵌套层级的各种类型的括号&#xff0c;用不同的颜色标注出来2、Auto Close Tag:自动闭合HTML标签3、Auto Rename Tag:自动关闭标签&#xff0c;在开始标记的结束括号中键入后&#xff0c;…
阅读更多...
2022年浙大城市学院新生程序设计竞赛（同步赛）D. Cutting with Lines Ⅰ(线段分割 离散化+并查集 补写法)

2022年浙大城市学院新生程序设计竞赛（同步赛）D. Cutting with Lines Ⅰ(线段分割 离散化+并查集 补写法)

题目 二维平面&#xff0c;左下角(0,0)右上角(n,m)(1<n,m<1e6)的一块矩形&#xff0c; q(q<2e3)次线段切割操作&#xff0c;操作分四种&#xff1a; ai 1 x&#xff0c;表示切割(x,m)到(x,m-ai)这条竖直线段(0<x<n,1<ai<1e6) ai 2 x&#xff0c;表示切…
阅读更多...
【车载开发系列】UDS诊断---诊断设备在线（$0x3E）

【车载开发系列】UDS诊断---诊断设备在线（$0x3E）

【车载开发系列】UDS诊断—诊断设备在线&#xff08;$0x3E&#xff09; 一.概念定义 此服务用于向ECU指示诊断工具在线。当其他UDS服务不存在时&#xff0c;为防止ECU自动转入默认会话模式并停止通信&#xff0c;必须使用此服务。建议以功能寻址的方式发送该指令它唯一的功能…
阅读更多...
解决编译 Visual Studio 工程时报 NuGet Package Restore Failed

解决编译 Visual Studio 工程时报 NuGet Package Restore Failed

背景 域渗透的过程中会用到很多 .Net 工具。但是官方仓库没有直接发布的二进制包&#xff0c;那么就需要我们自己手动编译。这些工具又有很多会选择做 NuGet 依赖。如果本地配置不对&#xff0c;就会导致编译失败。 接下来我们就讨论一下怎么解决这个问题。 现象 我们以 AD…
阅读更多...
【Vue 快速入门系列】ref、props、mixin、插件使用、样式混合解决方案合集

【Vue 快速入门系列】ref、props、mixin、插件使用、样式混合解决方案合集

文章目录前言一、ref属性的使用二、props配置三、mixin混合语法1.简介2.使用方法3.注意点4.结合实例使用①全局混入②局部混入四、插件的使用1.插件语法①定义插件②引入插件并使用2.上手插件五、样式混合问题前言 在前面介绍到了Vue的一些基本概念与如何使用Vue&#xff0c;并…
阅读更多...
ARM64（M1版）Mac运行MAA以及AzurLaneAutoScript自动化打明日方舟和碧蓝航线

ARM64（M1版）Mac运行MAA以及AzurLaneAutoScript自动化打明日方舟和碧蓝航线

前言 首先感谢Github上面MAA以及AzurLaneAutoScript的开发组&#xff0c;让我们有工具可用。 再感谢吕明珠LmeSzinc 和binss 大佬&#xff0c;他们的教程让我受益良多。 能看到这篇教程的&#xff0c;想必都拥有M1或者M2芯片的Mac电脑&#xff0c;因为新芯片不能安装双系统所…
阅读更多...
RabbitMQ：安装配置

RabbitMQ：安装配置

一般来说&#xff0c;安装分为两种方式&#xff1a;1. 下载 RabbitMQ 源文件&#xff0c;解压源文件之后进行安装。2. 通过 brew 命令安装。在这里&#xff0c;推荐使用 brew 来安装&#xff0c;非常强大的 Mac 端包管理工具。 ~ 本篇内容包括&#xff1a;Mac 安装 RabbitMQ、M…
阅读更多...
SSM网上在线水果店商城超市网站平台

SSM网上在线水果店商城超市网站平台

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 该项目为前后台项目&#xff0c;分为普通用户与管理员两种角色&#xff0c;前台普通用户登录&#xff0c;后台管理员登录&#xff1b; 管理员角…
阅读更多...
【数电实验】组合逻辑电路

【数电实验】组合逻辑电路

实验三 触发器及其应用 一 实验目的 1 了解触发器的触发方式&#xff08;上升沿触发、下降沿出发&#xff09;及其触发特点&#xff1b; 2 测试常用触发器的逻辑功能&#xff1b; 3 掌握用触发器设计同步时序逻辑电路的方法。 二 实验内容 1 测试双D触发器74HC74的逻辑功能…
阅读更多...
cmu 445 poject 1笔记

cmu 445 poject 1笔记

文章目录cmu 445 poject 1笔记Extendible hashingLRU-KBufferPool Managercmu 445 poject 1笔记 2022年的任务 https://15445.courses.cs.cmu.edu/fall2022/project1/ extendible hashinglru-kbufferpool manger 本文不写代码&#xff0c;只记录遇到的一些思维盲点 Extendible …
阅读更多...
SpringCloud02:微服务架构rest模拟环境搭建

SpringCloud02:微服务架构rest模拟环境搭建

微服务架构rest模拟环境搭建Rest环境搭建&#xff1a;服务提供者springcloud主模块pom.xmlspringcloud-api模块springcloud-provider-dept-8001服务提供模块配置相关Rest环境服务消费者Java编写Rest环境搭建&#xff1a;服务提供者 springcloud主模块pom.xml <?xml versi…
阅读更多...
让我们看看xargs做了什么事情？

让我们看看xargs做了什么事情？

说到xargs，不得不提到 find 和 grep ，当然了少不了管道 | find 和 grep我经常会搞混掉这两个功能很相似的命令的用法，总是会记不太住怎么用，也借此文章加深一下记忆。 find ./xx/xx/ -name abc.v grep -r abc ./* // -r 表示整个目录查找 一般我们会使用find…
阅读更多...
[附源码]计算机毕业设计基于Java酒店管理系统Springboot程序

[附源码]计算机毕业设计基于Java酒店管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
Python Open3D点云配准点对点，点对面ICP(Iterative Closest Point）

Python Open3D点云配准点对点，点对面ICP(Iterative Closest Point）

Python Open3D点云配准 ICP(Iterative Closest Point&#xff09; 这篇博客将介绍 迭代最近点配准算法(Iterative Closest Point, ICP) 。多年来&#xff0c;它一直是研究和工业中几何注册的支柱。输入是两个点云和一个初始变换&#xff0c;该变换大致将源点云与目标点云对齐。…
阅读更多...
g++多文件编译

g++多文件编译

g windows 多文件编译 文章目录g windows 多文件编译Examplescenario 1scenario 2方法一 使用 先编译&#xff0c;再连接方法二 直接编译 生成结果文件visual code 配置 tasks.json问题 undefined reference to std::__cxx11::basic_string<char, std::charg编译单个文件时&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023