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

微信小程序云音乐播放器开发指南

原创

已于 2022-12-13 13:14:41 修改 · 3k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2022-12-13 11:30:22 首次发布

本文档详细介绍了微信小程序云音乐播放器的开发过程，从项目结构和新建项目开始，逐步讲解了标签页切换、音乐推荐、播放器实现及播放列表功能的编写，最后展示了各功能页面的效果。

第一章开发准备

一、项目结构

音乐小程序项目页面结构：

tab导航栏

content内容区

player音乐播放器控件

标签	功能
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
pages/index/index.js	index页面的逻辑文件
pages/index/index.json	index页面的配置文件
pages/index/index.wxss	index页面的样式文件

二、新建微信小程序项目

开发者工具创建空白项目，命名为music：

修改app.json，标题导航栏名称改为"音乐"

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

删除index.wxml、index.wxss里的内容使其成为一个空白的页面

第二章标签页切换

一、常用组件介绍

swiper常用属性：

可选值	说明	默认
indicator-dots	Boolean	是否显示面板指示点，默认为false
indicator-color	Color	指示点颜色，默认为rgba(0,0,0,.3)
indicator-active-color	Color	当前选中的指示点颜色，默认为#000000
autoplay	Boolean	是否自动切换，默认为false
current	Number	当前所在滑块的index，默认为0
current-item-id	String	当前所在滑块的item-id（不能同时指定current）
interval	Number	自动切换时间间隔（毫秒），默认为5000
duration	Number	滑动动画时长（毫秒），默认为500
circular	Boolean	是否采用衔接滑动，默认为false
vertical	Boolean	滑动方向是否为纵向，默认为false
vertical	Boolean	滑动方向是否为纵向，默认为false

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="change