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

一、项目效果展示

• 音乐推荐页面展示
  

• 播放器展示
  

• 播放列表展示
  

二、项目结构

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

1.tab导航栏
2.content内容区
3.player音乐播放器控件

• 开发者工具创建空白项目：

• 新建项目 —— 设置项目名称和路径 —— 选择你注册的AppID —— 不使用云服务 —— 选择JavaScript基础模板 —— 点击确定创建项目

• 修改app.json

{
   
  "pages":[
    "pages/index1/index1",
    "pages/index1/info",
    "pages/index1/play",
    "pages/index1/playlist",
    "pages/index/index",
    "pages/header/header",
    "pages/footer/footer",
    "pages/logs/logs"
  ],
  "window":{
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• 在index1中编写顶部tab导航栏、中部content内容区页面和底部player音乐播放栏
• 在info中编写音乐推荐页面
• 在play中编写播放器页面
• 在playlist中编写播放列表页面
  

三、项目实现

（一）index1

• index1.wxml代码：

<view class="tab">
    <view class="tab-item {
    {item==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
    <view class="tab-item  {
    {item==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
    <view class="tab-item  {
    {item==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content" style="color: #ffffff;">
    <swiper current="{
    {item}}" bindchange="changeTab">
        <swiper-item>
            <include src="./info"></include>
        </swiper-item>
        <swiper-item>
            <include src="./play"></include>
        </swiper-item>
        <swiper-item>
            <include src="./playlist"></include>
        </swiper-item>
    </swiper>

</view>
<view class="player">
    <image src="{
    {play.coverImage}}"></image>
    <view class="player-info">
        <view>{
  {play.title}}</view>
        <view class="player-info-auth">{
  {play.singer}}</view>
    </view>
    <view class="player-controls">
        <image src="../images/01.png"></image>
        <image wx:if="{
    { state=='paused' }}" src="../images/02.png" bindtap="play"></image>
        <image wx:if="{
    { state=='running' }}" src="../images/02stop.png" bindtap="pause"></image>
        <image src="../images/03.png" bindtap="next"></image>
    </view>
</view>

• 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;