• Song source: QQ Music

instructions

  • At present, there is only experience version. If you are interested, you can chat with me privately. I will help you join.
  • Because individual developers can not publish online music play applet, so the development of the applet purpose is to learn applet development;
  • The small program involves that all the song resources come from QQ music, and some API interfaces have been re-encapsulated by myself (I will write another article dedicated to sharing API, please look forward to it).

Editor effect display

  • Because it is compressed to GIF format, the playback speed is accelerated and the image quality is a bit poor

Real machine screenshots

The operation video

  • Recommended page

  • Singer list

  • Major leaderboards

  • Search page

  • Singer Details Page

  • Playlist (chart) details page

  • Player page

  • Share the page

Currently implemented functions

  1. playlist
  2. radio
  3. The songs
  4. MV playback (recently FOUND that QQ Music interface does not return MV data, so this function cannot be displayed temporarily)
  5. Singer list
  6. list
  7. Song and artist search (support fuzzy query)
  8. Recent Search history
  9. Top search terms
  10. Singer Details Page
  11. Playlist details page
  12. Share song
  13. To view comments
  14. The lyrics scroll
  15. Recently Played songs

Now prepare the functionality for implementation

  1. The user login
  2. Private FM
  3. Add like, comment function
  4. How songs play (random, single, loop)
  5. collection
  6. Global Player Component

Project directory

! [Photo description][14]

  1. Comment — Custom component (player component, under development)
  2. Img — Stores images
  3. Gedan, song single page
  4. The index, the home page
  5. Logs – Singer list page
  6. PlaySong — Player page
  7. Rank — Ranking page
  8. Search – search page
  9. Share – share pages
  10. Singer — Singer details page
  11. Top — Playlist details page
  12. App.js — Application logic
  13. App. json– Application configuration
  14. App.wxss — Application common style

Json application configuration file

{
  "pages": [
    "pages/index/index"."pages/logs/logs"."pages/rank/rank"."pages/search/search"."pages/gedan/gedan"."pages/playSong/playSong"."pages/singer/singer"."pages/top/top"."pages/share/share"],// Page path list"requiredBackgroundModes": [
    "audio"],// Need to use the ability in the background, here we use [music play]"window": {
    "backgroundTextStyle": "light"."navigationBarBackgroundColor": "#fff"."navigationBarTitleText": "HMusic"."navigationBarTextStyle": "black"},// global to default window representation"tabBar": {
    "list": [{"pagePath": "pages/index/index"."text": "Recommended"
      },
      {
        "pagePath": "pages/logs/logs"."text": "Singer"
      },
      {
        "pagePath": "pages/rank/rank"."text": "Leaderboard"
      },
      {
        "pagePath": "pages/playSong/playSong"."text": "Player"}]."position": "top"}// The TAB bar is displayed at the bottom by default, according to position, we set it to display at the top}Copy the code

[pageName]. Json is used to specify the Settings of the window when the page is working:

{// Navigation bar background color"navigationBarBackgroundColor": "#fff"// Navigation bar foreground color (white/black only)"navigationBarTextStyle": "black"// Navigation bar text"navigationBarTitleText": "HMusic"// Window background color"backgroundColor": "#fff"// Window view"backgroundTextStyle": "dark"// Whether to enable pull-down refresh"enablePullDownRefresh": false
}
Copy the code

App.js application logic

/ / App function is a global function, is used to create the application object App ({/ / = = = = = = = = = = global data object, can the whole application sharing) = = = = = = = = = = globalData: {... }, / / = = = = = = = = = = application global method = = = = = = = = = = method1 (p1, p2) {... }, method2 (p1, p2) { ... }, // ========== lifecycle method ========== // triggered once when the application startsonLaunch() {... }, // triggered when the application enters the foreground display statusonShow() {... }, // triggered when the application enters the background stateonHide() {... }})Copy the code

Welcome to StarGitHub blog