微信小程序音樂(lè)播放器,leancloud后端支持,體驗(yàn)小程序數(shù)據(jù)綁定,Promise較為優(yōu)雅解決回調(diào)

go4it 發(fā)布于2019-08-20 16:31 / 2621人閱讀

摘要：初窺添加音樂(lè)到收藏最近列表歌詞滾動(dòng)從一個(gè)開(kāi)始微信開(kāi)發(fā)者工具生成目錄如下主頁(yè)日志頁(yè)面工具大體為每一個(gè)即是一個(gè)頁(yè)面文件，每個(gè)頁(yè)面有一個(gè)文件規(guī)定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。

初窺

todo:

[ ] 添加音樂(lè)到收藏（最近）列表

[ ] 歌詞滾動(dòng)

從一個(gè)hello world開(kāi)始

微信開(kāi)發(fā)者工具生成目錄如下：

.
|-- app.js
|-- app.json
|-- app.wxss
|-- pages     
|   |-- index   # 主頁(yè)
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   `-- log # 日志頁(yè)面
|   |   |-- log.js
|   |   |-- log.json
|   |   |-- log.wxml
|   |   `-- log.wxss
`-- utils       # 工具
    `-- util.js

大體為:
每一個(gè)page即是一個(gè)頁(yè)面文件，每個(gè)頁(yè)面有一個(gè)js/wxml/wxss/json文件規(guī)定：描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。

全局下同路，為公共的邏輯，樣式，配置

與html不同:用view text navigator 代替 div span a

開(kāi)發(fā)者文檔走馬觀花

app.json: 注冊(cè)pages window tabBar networkTimeout

組件說(shuō)明

*.js: 作為邏輯層與wxml交互有著豐富的
網(wǎng)絡(luò)，
媒體，
文件，
數(shù)據(jù)緩存，
位置，
設(shè)備，
界面...的api

官方文檔

*.wxml: 數(shù)據(jù)驅(qū)動(dòng)的視圖層 + 微信提供了大量的組件表單導(dǎo)航媒體 ...

官方組件不夠,weui來(lái)湊

weui為小程序提供了 weui.wxcss 但大多是造官方組件的輪子

這里精選,也算是補(bǔ)充兩個(gè)常用組件

對(duì)于小程序沒(méi)有DOM操作不熟悉mvvm思想的同學(xué) 是個(gè)很好的入門(mén)

navbar



            
                
                    
                        {{item}}
                    
                
                
            
            
                選項(xiàng)一的內(nèi)容
                選項(xiàng)二的內(nèi)容
                選項(xiàng)三的內(nèi)容

block渲染data里面的四個(gè)tabs,slider為激活tab選項(xiàng)時(shí)候的表現(xiàn)，panel為內(nèi)容面板

//js
var sliderWidth = 96; // 需要設(shè)置slider的寬度，用于計(jì)算中間位置
Page({
    data: {
        tabs: ["選項(xiàng)一", "選項(xiàng)二", "選項(xiàng)三"],
        activeIndex: 1,
        sliderOffset: 0,
        sliderLeft: 0
    },
    onLoad: function () {
        var that = this;
        wx.getSystemInfo({
            success: function(res) {
                that.setData({
                    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
                    sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
                });
            }
        });
    },
    tabClick: function (e) {
        this.setData({
            sliderOffset: e.currentTarget.offsetLeft,
            activeIndex: e.currentTarget.id
        });
    }
});

了解mvvm思想的同學(xué)不難看出通過(guò)tabs數(shù)組渲染出來(lái)選項(xiàng)后每次點(diǎn)擊獲取id 然后通過(guò)設(shè)置hidden顯示或隱藏

searchbar

        
            
                
                    
                    
                    
                        
                    
                
                
                    
                    搜索
                
            
            取消
        
        
            
                
                    實(shí)時(shí)搜索文本

一個(gè)input輸入框+一個(gè)搜索label+一個(gè)清楚內(nèi)容的icon + 取消按鈕

Page({
    data: {
        inputShowed: false,
        inputVal: ""
    },
    showInput: function () {
        this.setData({
            inputShowed: true
        });
    },
    hideInput: function () {
        this.setData({
            inputVal: "",
            inputShowed: false
        });
    },
    clearInput: function () {
        this.setData({
            inputVal: ""
        });
    },
    inputTyping: function (e) {
        this.setData({
            inputVal: e.detail.value
        });
    }
});

input上面有一層label 通過(guò)Page里面狀態(tài)的改變而操作其wxml狀態(tài)的改變

不難體會(huì)到：小程序和Vue的思想還是挺接近的

站在巨人的肩膀上--云音樂(lè)api

---獲取云音樂(lè)api

巨人的源github項(xiàng)目

在此我將他部署到leancloud上

即可在線訪問(wèn)，免去煩人的本地localhost啟動(dòng),在線url

http://neteasemusic.leanapp.cn

調(diào)用例子:

http://neteasemusic.leanapp.c...海闊天空

http://neteasemusic.leanapp.c...

具體參考api

詳細(xì)文檔

一切具備只欠東風(fēng)

生成目錄
本文講解核心內(nèi)容音樂(lè)的播放，讀者可自己實(shí)現(xiàn)其余頁(yè)面。

.
|-- app.js
|-- app.json
|-- app.wxss
|-- common.js #公用js
|-- images #存放項(xiàng)目圖片
|-- style
| ? |-- weui.wxss ? # 引入weui樣式 ?萬(wàn)一你自己不想寫(xiě)css樣式呢
|-- pages
| ? |-- find ? # 發(fā)現(xiàn)音樂(lè)
| ? | ? |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
| ? |--my ? # 我的音樂(lè)
| ? | ? |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
| ? |--now? # 正在播放
| ? | ? |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
| ? |--account ? # 賬號(hào)
| ? | ? |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |-- index   # 主頁(yè)
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   `-- log # 日志頁(yè)面
`-- utils       # 工具
    `-- util.js

請(qǐng)先在在app.json中注冊(cè)頁(yè)面，設(shè)置navigation，配置tabbar

{
  "pages":[
    "pages/find/index",
    "pages/my/index",
    "pages/now/index",
    "pages/account/index",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#D43C33",
    "navigationBarTitleText": "網(wǎng)易云音樂(lè)",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#FBFCFD"
  },
  "tabBar": {
    "backgroundColor":"#2A2C2E",
    "color": "#a7a7a7",
     "selectedColor": "#ffffff",
    "list": [{
      "iconPath":"./images/find.png",
      "selectedIconPath":"./images/find1.png",
      "pagePath":"pages/find/index",
      "text": "發(fā)現(xiàn)音樂(lè)"
    }, {
      "iconPath":"./images/my.png",
      "selectedIconPath":"./images/my1.png",
      "pagePath": "pages/my/index",
      "text": "我的音樂(lè)"
    }, {
      "iconPath":"./images/now.png",
      "selectedIconPath":"./images/now1.png",
      "pagePath": "pages/now/index",
      "text": "正在播放"
    }, {
      "iconPath":"./images/account.png",
      "selectedIconPath":"./images/account1.png",
      "pagePath": "pages/account/index",
      "text": "賬號(hào)"
    }]
  }
}

發(fā)現(xiàn)音樂(lè)

布局分為搜索框,navbar,swiper滑動(dòng)，三列，以及兩行三列構(gòu)成

tips:小程序中flex布局基本無(wú)兼容性問(wèn)題，可大膽使用

前三個(gè)可用上文提到的組件和小程序swiper組件快速完成，

對(duì)于搜索功能

我們?cè)谒阉鱥nput上綁定一個(gè)inputTyping事件，這樣每次鍵入完畢都可以得到結(jié)果，然后我們直接請(qǐng)求api

    //index.js
//獲取應(yīng)用實(shí)例
// 個(gè)人網(wǎng)易云音樂(lè) ID  66919655
var app = getApp()
Page({
    data: {
        searchReault: []
    },
 ? ?//綁定事件
 ? ?inputTyping: function (e) {
        let that = this
        console.log(e.detail)
        this.setData({
            inputVal: e.detail.value
        });
        wx.request({
            url: "http://neteasemusic.leanapp.cn/search",
            data: {
                keywords: e.detail.value
            },
            method: "GET",
            success: function (res) {
                let temp = []
                if(!res.data.result.songs){
                    return ;
                }
 ? ? ? ? ? ? ? ?//遍歷數(shù)據(jù)
 ? ? ? ? ? ? ? ?res.data.result.songs.forEach((song, index) => {
                    temp.push({
                        id: song.id,
                        name: song.name,
                        mp3Url: song.mp3Url,
                        picUrl: song.album.picUrl,
                        singer: song.artists[0].name
                    })
 ? ? ? ? ? ? ? ? ? ?//設(shè)置數(shù)據(jù)
 ? ? ? ? ? ? ? ? ? that.setData({
                        searchReault: temp
                    })
                })
                // 存入搜索的結(jié)果進(jìn)緩存
                wx.setStorage({
                    key:"searchReault",
                    data:temp
                })
            }
        })
    }
});

data里面的searchReault數(shù)組存入搜索結(jié)果，發(fā)起一個(gè)wx.request,用GET方式傳入?yún)?shù)，組織好json后設(shè)置data，然后將搜索結(jié)果存入本地緩存

wxml渲染searchReault:

并且自定義data屬性，navigator的打開(kāi)方式為tab切換open-type="switchTab" ，綁定一個(gè)tonow事件bindtap="tonow"


    
       
          {{item.name}}
               {{item.singer}}

在tonow事件中,獲取當(dāng)前的歌曲

    tonow: function (event) {
        let songData = {
            id: event.currentTarget.dataset.id,
            name: event.currentTarget.dataset.name,
            mp3Url: event.currentTarget.dataset.songurl,
            picUrl: event.currentTarget.dataset.picurl,
            singer: event.currentTarget.dataset.singer
        }
        // 將當(dāng)前點(diǎn)擊的歌曲保存在緩存中
        wx.setStorageSync("clickdata", songData)
        wx.switchTab({
            url: "../now/index"
        })
    }

正在播放

布局：歌曲封面，滑動(dòng)條上下為操作按鈕，
封面在采用圓角,rotate,transition既可以
滑動(dòng)快進(jìn):在滑動(dòng)條上綁定事件 slider3change

//滑動(dòng) 歌曲快進(jìn)
function sliderToseek(e, cb) {
  wx.getBackgroundAudioPlayerState({
    success: function (res) {
      var dataUrl = res.dataUrl
      var duration = res.duration
      let val = e.detail.value
      let cal = val * duration / 100
      cb && cb(dataUrl, cal);
    }
  })
}
//分隔 在page中調(diào)用
  slider3change: function (e) {
    sliderToseek(e, function (dataUrl, cal) {
      wx.playBackgroundAudio({
        dataUrl: dataUrl
      })
      wx.seekBackgroundAudio({
        position: cal
      })
    })
  },

一個(gè)自定義的sliderToseek函數(shù):

參數(shù)e 可以獲取滑動(dòng)的值，獲取正在播放的音樂(lè)信息成功后執(zhí)行回調(diào)函數(shù)1->播放回調(diào)函數(shù)2->跳到指定位置;
拆分歌詞：
在api中得到的歌詞："[00:00.00] 作曲 : 黃家駒 [00:01.00] 作詞 : 黃家駒 [00:18.580]今天我寒夜里看雪飄過(guò) [00:25.050]懷著冷卻了的心窩漂遠(yuǎn)方 [00:30.990]風(fēng)雨里追趕 "
在page外定義函數(shù)：

以]劃分?jǐn)?shù)組第二部分就是歌詞內(nèi)容:item.split("]")[1] 第一部分即為對(duì)應(yīng)的時(shí)間:item.split("]")[0]

// 獲取歌詞
function getlyric(id,cb) {
  console.log("id:",id)
  let url = `http://neteasemusic.leanapp.cn/lyric`
  wx.request({
    url: url,
    data: {
      id: id
    },
    method: "GET", // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    // header: {}, // 設(shè)置請(qǐng)求的 header
    success: function (res) {
      // success
    
      if (!res.data.lrc.lyric) return false;
     
      let lyric = res.data.lrc.lyric
     
      let timearr = lyric.split("[")
      let obj = {}
      let lyricArr=[]
      // seek 為鍵  歌詞為value
      timearr.forEach((item) => {
        let key = parseInt(item.split("]")[0].split(":")[0]) * 60 + parseInt(item.split("]")[0].split(":")[1])
        let val = item.split("]")[1]
        
        obj[key] = val
      })
      for(let key in obj){
        // obj[key] = obj[key].split("
")[0]
        lyricArr.push(obj[key])
      }
      cb&&cb(obj,lyricArr)
    },
    fail: function (res) {
      // fail
    },
    complete: function (res) {
      // complete
    }
  })
}

在page中調(diào)用:傳入歌曲ID(上文我們已經(jīng)存入緩存，在緩存中取出即可),和將其設(shè)置在data的回調(diào)

  getlyric(id,function(data, lyricArr){
           that.setData({
             lyricobj:data,
             lyricArr:lyricArr
           })
         })

wxml進(jìn)行渲染：



  
      

         {{item}}

添加歌曲：

我的可以在本地緩存中添加兩個(gè)key入對(duì)應(yīng)的信息

like:我的喜歡

recent:最近

選擇事件

  radioChange: function(e) {
    console.log("radio發(fā)生change事件，攜帶value值為：", e.detail.value)
    this.setData({
      percent:"100%"
    })
  },
  //radio發(fā)生change事件，攜帶value值為： like
  //radio發(fā)生change事件，攜帶value值為： recent

點(diǎn)擊添加按鈕，向上呼出選項(xiàng)，將當(dāng)前播放的歌曲設(shè)置到對(duì)應(yīng)的數(shù)組即可

進(jìn)行當(dāng)前歌曲的播放:
頁(yè)面onshow的時(shí)候，獲取本地緩存的信息，在success的回調(diào)中，設(shè)置到data,以供頁(yè)面解析，而后在獲取歌詞的函數(shù)中也進(jìn)行一次回調(diào)，設(shè)置歌詞，
播放本地音樂(lè)，播放成功之后，在success的回調(diào)中，獲取正在播放的音樂(lè)信息，包括該歌曲的總時(shí)長(zhǎng)，再進(jìn)行設(shè)置。

onShow: function () {
    var that = this;
    console.log("正在播放 is on show")
    // 獲取緩存
    wx.getStorage({
      key: "clickdata",
      success: function (res) {
        var value = res.data
        var id =  value.id
        if (value) {
          // 設(shè)置到data
          that.setData({
            id:id,
            name: value.name,
            src: value.mp3Url,
            poster: value.picUrl,
            author: value.singer
          })
         getlyric(id,function(data, lyricArr){
           that.setData({
             lyricobj:data,
             lyricArr:lyricArr
           })
         }) 
        }
        let url = that.data.src || value.mp3Url;
        // 播放
        wx.playBackgroundAudio({
          dataUrl: value.mp3Url,
          title: value.name,
          coverImgUrl: value.picUrl,
          success: function () {
            wx.hideLoading()
             console.log("url",url)
             setTimeout(function(){
                wx.getBackgroundAudioPlayerState({
                  success: function (res) {
                    var tempduration = res.duration
                    console.log("get bg success", tempduration, res)
                    // 設(shè)置時(shí)長(zhǎng)
                    that.setData({
                      sumduration: tempduration
                    })
                  },
                  complete: function (res) {
                    console.log(" get bg complete:", res)
                  }
                })
             },1000)
          },
          complete:function(){
            // 獲取正在播放的信息
            console.log("play",url)
         
          }
        })
      }
    })
},

這樣我們不知不覺(jué)進(jìn)入多個(gè)回調(diào)嵌套的問(wèn)題

代碼優(yōu)化，使用Promise,較為優(yōu)雅地解決回調(diào)

小程序暫時(shí)不支持async await

在 common.js 中為小程序提供的api上裹上一層Promise，并且通過(guò)module.exports = operation暴露出去

const operation = {
    getMusicData: function () {
        return new Promise((resolve, reject) => {
            wx.getBackgroundAudioPlayerState({
                success: function (res) {
                    resolve(res);
                },
                fail: function (err) {
                    reject(err);
                }
            })
        })
    },
    // 播放音樂(lè) 參數(shù):url title 圖片url
    playMusic: function (url, title, pic) {
        return new Promise((resolve, reject) => {
            wx.playBackgroundAudio({
                dataUrl: url,
                title: title,
                coverImgUrl: pic,
                success: function () {
                    resolve(true)
                },
                fail: function () {
                    reject(new Error("播放錯(cuò)誤"));
                }
            })
        })
    },
    asyncGetStorage: function (key) {
        return new Promise((resolve, reject) => {
            wx.getStorage({
                key: key,
                success: function (res) {
                    resolve(res.data)
                },
                fail: function (err) {
                    reject(err)
                }
            })
        })
    },
    getlyric: function (id) {
        return new Promise((resolve, reject) => {
            console.log("id:", id)
            let url = `http://neteasemusic.leanapp.cn/lyric`
            wx.request({
                url: url,
                data: {
                    id: id
                },
                method: "GET", // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                // header: {}, // 設(shè)置請(qǐng)求的 header
                success: function (res) {
                    // success
                    if (!res.data.lrc.lyric) return false;
                    let lyric = res.data.lrc.lyric
                    let timearr = lyric.split("[")
                    let obj = {}
                    let lyricArr = []
                    // seek 為鍵  歌詞為value
                    timearr.forEach((item) => {
                        let key = parseInt(item.split("]")[0].split(":")[0]) * 60 + parseInt(item.split("]")[0].split(":")[1])
                        let val = item.split("]")[1]
                        obj[key] = val
                    })
                    for (let key in obj) {
                        // obj[key] = obj[key].split("
")[0]
                        lyricArr.push(obj[key])
                    }
                    // cb && cb(obj, lyricArr)
                    resolve(lyricArr)
                },
                fail: function (err) {
                    reject(err)
                },
                complete: function (res) {
                    // complete
                }
            })
        })
    }
}
module.exports = operation

重寫(xiě)一下當(dāng)前歌曲播放事件

onShow: function () {
    let that = this;
    Common.asyncGetStorage("clickdata")//本地緩存
      .then(data => {
        // console.log(data)
        if (!data) return;
        that.setData({
          id: data.id,
          name: data.name,
          src: data.mp3Url,
          poster: data.picUrl,
          author: data.singer
        })
        return Common.playMusic(data.mp3Url,  data.name, data.picUrl);
      })
      .then(status => {
        if(!status) return;
        wx.hideLoading();
        console.log("id,",that.data.id)
        return Common.getlyric(that.data.id)
      })
      .then((lyricArr) => {
        console.log("lyricArr",lyricArr)
        that.setData({
          lyricArr: lyricArr
        })
        return Common.getMusicData()
      })
      .then(data => {
        let tempduration = data.duration
        console.log("get bg success", tempduration, data)
        // 設(shè)置時(shí)長(zhǎng)
        that.setData({
          sumduration: tempduration
        })
      })
},

這樣即可縮減部分代碼。

有幫助可以Star>github源碼

18屆小前端求職中["html/html5", "css/css3", "js/es5/es6", "node"]
1424254461@qq.com

GPU云服務(wù)器云服務(wù)器微信小程序支持webrtc 微信小程序不支持webrtc 微信小程序支持的js 微信小程序是否支持webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/82972.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

go4it

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

新的 Azure AD 漏洞讓黑客在不被發(fā)現(xiàn)的情況下暴力破解密碼

閱讀 1504·2021-10-11 10:59
ucloud，烏蘭察布快捷共享型云主機(jī)測(cè)評(píng) – 基于AMD Rome EPYC2

閱讀 1876·2021-09-09 11:36
前端菜鳥(niǎo)筆記 Day-4 CSS布局

閱讀 1383·2019-08-30 15:55
css比較經(jīng)典的例子

閱讀 1327·2019-08-29 11:20
開(kāi)發(fā)者日?qǐng)?bào) 2019年3月30日

閱讀 3063·2019-08-26 13:39
還不會(huì)正則表達(dá)式？看這篇！

閱讀 1466·2019-08-26 13:37
JSONSERVER接口調(diào)試工具安裝配置

閱讀 1957·2019-08-26 12:11
手挽手帶你學(xué)VUE：一檔 VUE簡(jiǎn)介以及常用內(nèi)部指令

閱讀 1324·2019-08-23 14:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信小程序音樂(lè)播放器,leancloud后端支持,體驗(yàn)小程序數(shù)據(jù)綁定,Promise較為優(yōu)雅解決回調(diào)

相關(guān)文章

微信小程序資源匯總

**300行代碼寫(xiě)一個(gè)音樂(lè)播放器小程序**

**在微信小程序使用音樂(lè)api的方法，以及微信小程序播放背景音樂(lè)失敗的解決方案匯總**

前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

發(fā)表評(píng)論

0條評(píng)論

go4it

男|高級(jí)講師

TA的文章

新的 Azure AD 漏洞讓黑客在不被發(fā)現(xiàn)的情況下暴力破解密碼

ucloud，烏蘭察布快捷共享型云主機(jī)測(cè)評(píng) – 基于AMD Rome EPYC2

前端菜鳥(niǎo)筆記 Day-4 CSS布局

css比較經(jīng)典的例子

開(kāi)發(fā)者日?qǐng)?bào) 2019年3月30日

還不會(huì)正則表達(dá)式？看這篇！

JSONSERVER接口調(diào)試工具安裝配置

手挽手帶你學(xué)VUE：一檔 VUE簡(jiǎn)介以及常用內(nèi)部指令

最新活動(dòng)