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

chenatu 發(fā)布于2019-08-20 13:56 / 416人閱讀

摘要：項(xiàng)目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼，更多關(guān)于小程序的內(nèi)容可見微信小程序開發(fā)文檔小程序框架結(jié)構(gòu)微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。

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

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

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

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

搭建node中間層

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

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

首先在node層對后端發(fā)起http請求：

// http.js
var formatURL = require("./formatURL.js");
var http = require("http");
const POSThttp = function(request) {
  return new Promise((resolve, reject) => {
    let body = "";
    // http模塊拿到真實(shí)后臺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請求的參數(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)動畫屬性
    rotateFlag: false, // 控制專輯圖片旋轉(zhuǎn)
  }

生命周期函數(shù)

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

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

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

微信小程序并不支持css3自定義的動畫，因此我采用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請求，基本用法類似于$.ajax()，傳入回調(diào)函數(shù)。

wx.request({
      method: "POST",
      url: "http://127.0.0.1:3000", //訪問node端后臺借口
      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");
      }
    });

最后上源碼：wx-audio，歡迎star、歡迎fork、歡迎PR。
最后祝大家雞年大吉吧！

GPU云服務(wù)器云服務(wù)器 java寫一個(gè)音樂類 js代碼音樂播放器手機(jī)播放音樂代碼寫一個(gè)python程序

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81327.html

發(fā)表評論

登陸后可評論

0條評論

chenatu

男|高級講師

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

TA的文章

HostWebis：便宜服務(wù)器/可選美國和法國機(jī)房/100Mbps不限流量/$34刀/月起，10Gb

閱讀 3310·2021-09-30 09:54
push主機(jī)是什么-什么是push技術(shù)？

閱讀 3808·2021-09-22 15:01
開源早讀課周刊（第5期）：Facebook的開源欣欣向榮

閱讀 3116·2021-08-27 16:19
CSS浮動float

閱讀 2580·2019-08-29 18:39
移動端overflow失效問題

閱讀 2167·2019-08-29 14:09
Docker學(xué)習(xí)（一）docker的相關(guān)概念

閱讀 636·2019-08-26 10:23
用 canvas 的 getImageData 做點(diǎn)有趣的事

閱讀 1345·2019-08-23 12:01
一個(gè) VUE 組件：實(shí)現(xiàn)子元素 scroll 父元素容器不跟隨滾動（兼容PC、移動端）

閱讀 1876·2019-08-22 13:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

前端知識庫 - 收藏集 - 掘金

前端知識庫 - 收藏集 - 掘金

指尖一點(diǎn)歌聲來--微信小程序之仿網(wǎng)易云音樂心得

Vue 實(shí)現(xiàn)的音樂項(xiàng)目 music app 知識點(diǎn)總結(jié)分享

css3 動畫總結(jié)

發(fā)表評論

0條評論

chenatu

男|高級講師

TA的文章

HostWebis：便宜服務(wù)器/可選美國和法國機(jī)房/100Mbps不限流量/$34刀/月起，10Gb

push主機(jī)是什么-什么是push技術(shù)？

開源早讀課周刊（第5期）：Facebook的開源欣欣向榮

CSS浮動float

移動端overflow失效問題

Docker學(xué)習(xí)（一）docker的相關(guān)概念

用 canvas 的 getImageData 做點(diǎn)有趣的事

一個(gè) VUE 組件：實(shí)現(xiàn)子元素 scroll 父元素容器不跟隨滾動（兼容PC、移動端）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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