WeChat Applet Learn Notes Music Player (Head Tab Tag)

WeChat Applet Learning Notes (3) Music Player (Head Tab Tag)

Components are the basic components of the View Layer (UI), with some basic functions and WeChat style.In fact, components are the encapsulation of HTML5 elements by the development framework.

1. Components

1. Use of components

Content

</Tag Name>

2. Common properties of components

id: The unique identity of the component, similar to the id of HTML
Class: set style class
Style: set inline style
hidden: value false, show component, true hide component, default false
data-*: Used to set any custom property value for a component
bind*/cathc*: events defining components

2. Establishment of Music Player Project

Create a new WeChat applet project, the project structure is shown in the following figure.

In the project, create a new directory "img", copy the image files in the project to the directory, create a new directory "music", and copy music to the directory. Because of the use of the first-time learning component, music playback at this time mainly implements local playback, followed by network music playback.

Create a new directory "musicdemo" under pages, then create a new page named musicdemo.

1.musicdemo.wxml file code

<!--Simple Music Player-->
<!--Outermost Container-->
<view class="wrap">

  <!--Header of page-->
  <view class="header">
    head
  </view>
  <!--End of Header-->

  <!--Main Part of Page-->
  <view class="page-body">
    Main body part
  </view>
  <!--End of body of page-->

  <!--Play component at bottom of page-->
  <view class="footer">
    bottom
  </view>
  <!--End of playback component at bottom of page-->

</view>

2.musicdemo.wxss code

/*==============Global Style Settings========================*/
page{
  background-color: black;
  color: white;
}

/*Outermost Container style*/
.wrap{
  display: flex;/*flex layout*/
  flex-direction: column;/*Arrange elements vertically*/
}


/*==============Header Style Settings=======================*/
.header{
  height: 8vh;
  background-color: blueviolet;/*Temporary use, will eventually be deleted*/
}

/*==============Body Part Style Settings========================*/
.page-body{
  height: 80vh;
  background-color: blue;/*Temporary use, will eventually be deleted*/
}

/*==============Bottom Style Settings=======================*/
.footer{
  height: 12vh;
  background-color: yellowgreen;
}

The layout of the applet mainly uses the flex layout, so in this program, it uses the flex layout, dividing the whole page from top to bottom into three parts, the header is the Tab tag, the middle is the main content area, and the bottom is the playback component.

3.musicdemo.js code

// pages/musicdemo/musicdemo.js
Page({

  /**
   * Initial data for page
   */
  data: {

  },

  /**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle Function -- Listen for page initial rendering complete
   */
  onReady: function () {

  },

  /**
   * Lifecycle Functions--Monitor Page Display
   */
  onShow: function () {

  },

  /**
   * Lifecycle Functions--Listening Page Hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle Functions--Listen for Page Uninstall
   */
  onUnload: function () {

  },

  /**
   * Page Related Event Handler--Listens for user dropdown actions
   */
  onPullDownRefresh: function () {

  },

  /**
   * Handler for bottom-touch events on pages
   */
  onReachBottom: function () {

  },

  /**
   * Users click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})

At this point, the project is completed.

The interface after the applet runs.

3. Design of Page Header

This music player exercise program is divided into three interfaces, the first interface is "Recommended Songs"; the second interface is "Play Interface" to display a rotation animation of song images; and the third interface is "Song List" to display the list of songs currently being played.

These three interfaces, only the middle part is different, the playback components at the head and bottom are unchanged.Therefore, the Tab-like method is used to display the corresponding content when the header's label is clicked.

1.musicdemo.wxml code

<!--Header of Page-->
  <view class="header">
    <view class="tab-item">Recommended song</view>
    <view class="tab-item">Playing</view>
    <view class="tab-item">Song List</view>
  </view>

2. Design and implementation of header tab tag

musicdemo.wxss code

The three tabs are arranged horizontally and are automatically divided into three columns based on the width of the screen.So use the flex layout.The code is as follows:

/*==============Header Style Settings=======================*/
.header{
  display: flex;/*flex Parent Container*/
  flex-direction: row;/*flex Element row arrangement*/
  height: 8vh;
  background-color: blueviolet;/*Temporary use, will eventually be deleted*/
}
.header>.tab-item{
  flex: 1;
  text-align: center;
  /*The following styles achieve vertical centering of flex elements*/
  position: relative;
  height: 100%;
  line-height: 8vh;
  /*Set Bottom Border*/
  border-bottom: 1px solid white;
}

The results are as follows:

From the above image, we don't know which interface we are currently in, so we need to change the color of the label of the current interface to indicate that it is under that interface.Therefore, each Tab tag needs to be dynamically styled. Whether the current Tab tag uses this style or not depends on the current interface, so create the following under musicdemo.js data:

musicdemo.js code

data: {
    /**Page Tab Tag Data */
    tab:0 
  },

The tab value is 0 for the first interface (recommended songs), 1 for the second interface (playing), and 2 for the third interface (song list).

Next, modify the musicdemo.wxml code as follows:

<!--Header of Page-->
  <view class="header">
    <view class="tab-item {{tab==0?'tab-item-active':''}}">Recommended song</view>
    <view class="tab-item {{tab==1?'tab-item-active':''}}"">Playing</view>
    <view class="tab-item {{tab==2?'tab-item-active':''}}"">Song List</view>
  </view>

Based on the value of tab, the tab-item-active class is dynamically added for each tab tag, and the tab-item-active class code is as follows:

/*Set the style when Tab tags are selected*/
.header>.tab-item-active{
  color: red;
  border-bottom: 1px solid red;
}

3. Handle Tab Tab Tag Click Events

Tab tag events are handled using bindtap to bind events for Tab tags. When a tag is clicked, the program needs to know which Tab tag is clicked to change the display.To achieve this effect, write out all the code for the three main sections of the page, decide which to show based on the Tab tag you click, and hide the rest.Therefore, when you click a tag, you need to distinguish which tag is clicked and pass its tab value to the js program.Modify the musicdemo.wxml code as follows:

musicdemo.wxml code

<view class="header">
    <view class="tab-item {{tab==0?'tab-item-active':''}}" data-tab="0" bindtap="changeTab">Recommended song</view>
    <view class="tab-item {{tab==1?'tab-item-active':''}}" data-tab="1" bindtap="changeTab">Playing</view>
    <view class="tab-item {{tab==2?'tab-item-active':''}}" data-tab="2" bindtap="changeTab">Song List</view>
  </view>

data-tab="0" is a custom property used to pass the value of tab to Js code for processing.bindtap="changeTab" is an event bound for a Tab tag.

Next, create three new view s in the page body container of musicdemo.wxml to display the three interfaces.The code is as follows:

<!--Main Part of Page-->
  <view class="page-body">
    <!--Recommended song interface-->
    <view hidden="{{tab!=0}}">
      Recommended song interface
    </view>
    <!--Playing interface-->   
    <view hidden="{{tab!=1}}">
      Playing interface
    </view> 
    <!--Song list interface-->
    <view hidden="{{tab!=2}}">
      Song List Interface
    </view>
  </view>
  <!--End of body of page-->