小程序模板網(wǎng)

300行代碼寫一個(gè)音樂播放器小程序及網(wǎng)易云音樂API介紹

發(fā)布時(shí)間：2017-11-27 17:46 所屬欄目：小程序開發(fā)教程

自己寫的渣代碼被segmentfault官方推薦了，所以補(bǔ)發(fā)到自己博客里，還有一些東西需要完善的地方。剛進(jìn)公司不久，因?yàn)楣静块T年后業(yè)務(wù)拓展的關(guān)系，可能在年后會(huì)被分配到公司的微信公眾號(hào)組做小程序相關(guān)的開發(fā)工作，因 ...

 
 
 

自己寫的渣代碼被segmentfault官方推薦了，所以補(bǔ)發(fā)到自己博客里，還有一些東西需要完善的地方。

剛進(jìn)公司不久，因?yàn)楣静块T年后業(yè)務(wù)拓展的關(guān)系，可能在年后會(huì)被分配到公司的微信公眾號(hào)組做小程序相關(guān)的開發(fā)工作，因此寫了個(gè)微信小程序 wx-audio 踩坑。目前還有一些功能沒有寫完：如返回多首歌曲、控制播放時(shí)間等，可能在年后繼續(xù)完成。

項(xiàng)目主要是微信小程序、也用到了node、express等。

時(shí)間來不及了，快上車！

先上一個(gè)運(yùn)行效果吧!

搭建node中間層

最近對(duì)搭建node中間層也有一定的思考，可見我最近剛寫的文章： NodeJS搭建中間層

之所以選擇NodeJS搭建中間層服務(wù)，主要是為了格式化參數(shù)、合并請(qǐng)求、節(jié)省性能方面所考慮的，現(xiàn)今大公司基本都采用node作為微服務(wù)的方式進(jìn)行項(xiàng)目搭建。具體原因分析可自行谷歌或百度。

首先在node層對(duì)后端發(fā)起http請(qǐng)求：

// http.js
var formatURL = require("./formatURL.js");
var http = require("http");
const POSThttp = function(request){
  return new Promise((resolve, reject) => {
    let body = "";
    // http模塊拿到真實(shí)后臺(tái)api的數(shù)據(jù)
    http.get(formatURL(request.body.musicname), function(res){
      res.on("data", (data) => {
        body += data;
      }).on("end", () => {
        // 格式化
        const {
          name,
          audio: musicUrl,
          page,
          album: {
            name: musicName,
            picUrl,
          },
          artists: [{
            name: singer,
          }],
        } = JSON.parse(body).result.songs[0];
        const reply = {
          name,
          picUrl,
          musicUrl,
          page,
          singer,
        };
        resolve(reply);
      });
    });
  });
};
module.exports = POSThttp;

然后與客戶端的交互：

var express = require("express");
var POSThttp = require("./POSThttp.js");
var bodyParser = require("body-parser");
// 使用body-parser解析post請(qǐng)求的參數(shù)，如果沒有，req.body為undefined。
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.post("/", (req, res) => {
  POSThttp(req).then((data) => {
    res.send(data);
  }).catch((err) => {
    res.send(err);
  });
});
app.listen(3000, () => {
  console.log("open wx-audio server successful!")
});

前端部分

主要是歌曲播放控制和交互部分的代碼，更多關(guān)于小程序的內(nèi)容可見 微信小程序 - 開發(fā)文檔 ：

  • 小程序框架結(jié)構(gòu)

微信小程序的入口是根目錄下的app.js、app.json、app.wxss它們分別描述的小程序的主題邏輯和公共配置部分。

在pages/目錄下，每個(gè)文件夾就是一個(gè)頁面。分別包括js文件、wxml文件、wxss文件。它們分別描述數(shù)據(jù)邏輯、靜態(tài)頁面模板和頁面樣式。

  • 數(shù)據(jù)邏輯控制

微信小程序采用類似于React的state控制頁面數(shù)據(jù)邏輯，我們不能使用this.data直接改變狀態(tài)，而是類似于React，使用this.setData()改變頁面數(shù)據(jù)邏輯。

在本項(xiàng)目中定義的如下數(shù)據(jù)邏輯

data: {
  name: '', // 歌曲名稱
  musicUrl: '', // 歌曲鏈接地址
  picUrl: '', // 專輯圖片地址
  page: '', // 網(wǎng)易云音樂的歌曲鏈接
  singer: '', //歌手名稱
  input: '', // 輸入框的內(nèi)容
  transform: '', // 旋轉(zhuǎn)動(dòng)畫屬性
  rotateFlag: false, // 控制專輯圖片旋轉(zhuǎn)
}
  • 生命周期函數(shù)

微信小程序組件有自己的生命周期函數(shù)，也是類似于React，每次通過觸發(fā)一個(gè)鉤子函數(shù)改變狀態(tài)。如：onLoad、onReady函數(shù)等。

詳情可見： 微信小程序-API

  • 中間的轉(zhuǎn)盤部分

微信小程序并不支持css3自定義的動(dòng)畫，因此我采用JS實(shí)現(xiàn)的：

// 專輯圖片旋轉(zhuǎn)函數(shù)
myRotate: function(){
  rotate++;
  let transform = `transform:rotate(${rotate}deg);`;
  this.setData({
    transform,
  });
  const animation = setTimeout(() => {
    this.myRotate();
  }, 30);
  if (!this.data.rotateFlag) {
    clearTimeout(animation);
  };
  
  
},
// 控制專輯圖片旋轉(zhuǎn)
toggleRotate: function(){
  if (this.data.rotateFlag) {
    this.pauseMusic();
    this.audioCtx.pause();
  } else {
    this.playMusic();
    this.audioCtx.play();
  }
},
// 播放音樂
playMusic: function(){
  this.setData({
    rotateFlag: true,
  });
  this.myRotate();
},
// 暫停播放音樂
pauseMusic: function(){
  this.setData({
    rotateFlag: false,
  });
},
  • 交互部分

微信小程序采用特有的wx.request發(fā)送http請(qǐng)求，基本用法類似于$.ajax()，傳入回調(diào)函數(shù)。

wx.request({
      method: 'POST',
      url: 'http://127.0.0.1:3000', //訪問node端后臺(tái)借口
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        musicname: musicname,
      },
      success: (res) => {
        const {
          name,
          picUrl,
          musicUrl,
          page,
          singer,
        } = res.data;
        this.setData({
          name,
          picUrl,
          musicUrl,
          page,
          singer,
        });
        console.log(this.data);
      },
      error: () => {
        console.log('err');
      }
    });

網(wǎng)易云音樂API介紹

URL

GET http://music.163.com/api/search/get/

參數(shù)

s: 搜索詞
limit: 返回?cái)?shù)量
sub: 意義不明(非必須參數(shù))；取值：false
type: 搜索類型；取值意義

1 單曲
10 專輯
100 歌手
1000 歌單
1002 用戶

返回結(jié)果

如對(duì)下列url發(fā)起get請(qǐng)求：

http://s.music.163.com/search/get/?type=1&limit=5&s=%E5%91%8A%E7%99%BD%E6%B0%94%E7%90%83

返回結(jié)果如圖所示：

{
  "result": {
    "songCount": 2275,
    "songs": [
      {
        "id": 440241144,
        "name": "告白氣球",
        "artists": [
          {
            "id": 1081635,
            "name": "周二珂",
            "picUrl": null
          }
        ],
        "album": {
          "id": 34986028,
          "name": "告白氣球",
          "artist": {
            "id": 0,
            "name": "",
            "picUrl": null
          },
          "picUrl": "http://p1.music.126.net/m3_elKryq_x62UNHJ2NgHg==/109951162807555886.jpg"
        },
        "audio": "http://m2.music.126.net/GvIMZ5ZW0l04xFMVYtTy8g==/18502581673300022.mp3",
        "djProgramId": 0,
        "page": "http://music.163.com/m/song/440241144"
      },
      {
        "id": 434070713,
        "name": "告白氣球 ",
        "artists": [
          {
            "id": 1073042,
            "name": "王進(jìn)",
            "picUrl": null
          }
        ],
        "album": {
          "id": 34801227,
          "name": "告白氣球",
          "artist": {
            "id": 0,
            "name": "",
            "picUrl": null
          },
          "picUrl": "http://p1.music.126.net/cIim8rAhdKV1Up7e9zSFoA==/17647161626137638.jpg"
        },
        "audio": "http://m2.music.126.net/zp5J-qWfkwmBd2pq3pHzCw==/18605935765863165.mp3",
        "djProgramId": 0,
        "page": "http://music.163.com/m/song/434070713"
      },
      {
        "id": 421137034,
        "name": "告白氣球",
        "artists": [
          {
            "id": 1158065,
            "name": "宇西",
            "picUrl": null
          }
        ],
        "album": {
          "id": 34778501,
          "name": "告白氣球（Cover 周杰倫）",
          "artist": {
            "id": 0,
            "name": "",
            "picUrl": null
          },
          "picUrl": "http://p1.music.126.net/tlp3VWVQVe0Je1r-oHn91g==/17666952835430891.jpg"
        },
        "audio": "http://m2.music.126.net/8egvCxWVy4vzk2EJG_dGqg==/3265549609864401.mp3",
        "djProgramId": 0,
        "page": "http://music.163.com/m/song/421137034"
      },
      {
        "id": 429461789,
        "name": "告白氣球",
        "artists": [
          {
            "id": 975714,
            "name": "葉洛洛",
            "picUrl": null
          },
          {
            "id": 12126098,
            "name": "Vk",
            "picUrl": null
          }
        ],
        "album": {
          "id": 34872359,
          "name": "告白氣球",
          "artist": {
            "id": 0,
            "name": "",
            "picUrl": null
          },
          "picUrl": "http://p1.music.126.net/PuNMFpLHzvHw2v0-Zh2b8g==/18244196440128259.jpg"
        },
        "audio": "http://m2.music.126.net/t_qlmZ581WF2MwHmvUavxA==/2946691220790691.mp3",
        "djProgramId": 0,
        "page": "http://music.163.com/m/song/429461789"
      }
    ]
  },
  "code": 200
}

最后上源碼： wx-audio ，歡迎star、歡迎fork、歡迎PR。



易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://m.u-renovate.com/wxmini/doc/course/17966.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×