微信小程序實戰-音樂播放器

時間 2019-11-09

標籤微信程序實戰音樂播放简体版

原文原文鏈接

最近學習微信小程序，本身作了一個音樂播放器。整個過程學習下來感受微信小程序對於前端的同窗來講仍是很容易掌握的，可是有一些知識點仍是要記錄一下。前端

演示

目錄結構

發送網絡請求須要在後臺配置

我使用的是open api，主要用到的接口有：android

音樂電臺接口：api.apiopen.top/musicBroadc…
音樂電臺詳情接口： api.apiopen.top/musicBroadc…
音樂詳情接口： api.apiopen.top/musicDetail…
音樂排行榜接口： api.apiopen.top/musicRankin…
音樂排行榜詳情接口： api.apiopen.top/musicRankin…
音樂搜索接口： api.apiopen.top/searchMusic…

發送網絡請求時須要在微信小程序後臺配置一下本身合法域名，要否則髮網絡請求的時候會報錯。git

進到小程序後臺找到開發github

二級選項卡選擇開發設置spring

拉到下面有一個服務器域名，在request合法域名中配置本身的api路徑。json

另外在小程序裏使用request方法不存在跨域的問題，由於微信小程序的作法是由他們的後臺訪問咱們的後臺，因此實際的「跨域問題」已經在咱們的小程序與微信後臺交流的時候解決了。小程序

頁面跳轉時參數的傳遞和接收

傳遞參數的方式有兩種：後端

在wxml中使用navigator跳轉url傳遞參數
在wxml中綁定事件後，經過data-name="姓名"的方式傳遞

第一種方式

發送參數：微信小程序

<navigator url="../../pages/user?name={{name}}"></navigator>
複製代碼

接收參數：api

onLoad: function (options) {
    var name = options.name;
}
複製代碼

第二種方式

發送參數：

<view bindtap="click" data-name={{name}}"></view> 複製代碼

接收參數：

clickMe: function(event) {
    var name = event.currentTarget.dataset.name;
}
複製代碼

wxs模塊

WXS 代碼能夠編寫在 wxml 文件中的標籤內，或以 .wxs 爲後綴名的文件內。

使用wxs的場景主要是對一些數據有一些複雜的處理時，例如我在寫排行榜頁面時有一個顏色值的處理，應爲後端接口返回的是顏色值是 0xFFFFFF，因此我須要降這個值轉化爲#FFFFFF這種形式的，下面是個人wxs文件：

//hexColor.wxs
var hexColor = function(color) {
  return !!color && color.replace('0x', '#');
}
module.exports = hexColor;
複製代碼

使用也很簡單

<wxs src="../../utils/hexColor.wxs" module="hexColor" />
<view  data-color="{{hexColor(item.bg_color)}}">
    ...
</view>
複製代碼

組件化開發

在小程序中也可使用組件，組件的使用分三步：

第一步：建立組件

建立組件時最重要的一步就是在json文件中寫明

{
    component: true
}
複製代碼

例如：

第二步：編寫組件代碼

這一步很簡單，只須要按你的功能寫代碼就行了。

第三步：使用組件

使用組件時要在使用組件的那個頁面的json配置文件裏添加使用聲明

{
  "usingComponents": {
    "component": "../component/component"
  }
}
複製代碼

而後直接使用就能夠了。

全局變量

微信小程序的全局變量是寫在app.js的globalData上的

使用時須要在頁面中獲取app實例

//引入app實例
const app = getApp();
//使用
app.globalData.playState,
複製代碼

開發者工具bug

我要實現的功能就是頁面切換時同步播放器的狀態。

pageLifetimes就是組件所在頁面的生命週期。

可是我在開發過程當中發現了一個開發者工具的bug，就是pageLifetimes在開發者工具中不會觸發，可是在android真機調試的時候就會觸發。

跨層級通訊

這是我在開發中遇到的比較棘手的問題，就是一個列表頁面點擊了某首歌曲，這個時候我要通知播放器組件切換音樂，這就涉及到了跨層級通訊，目前個人解決辦法是利用發佈-訂閱模式來實現這個功能。

class PubSub{
  constructor(props){
    this.handlers = {};
    this.instance = undefined;
  }
  /**
   * 單例模式
   */
  static getInstance() {
    if (this.instance === undefined) {
      this.instance = new PubSub();
    }
    return this.instance;
  }
  /**
   * 訂閱事件
   */
  on(eventType, handler) {
    //p判斷事件名稱是否在handler中，防止重複添加
    if (!(eventType in this.handlers)) {
      this.handlers[eventType] = [];
    }
    //將毀回調放處處理隊列中
    this.handlers[eventType].push(handler);
    return this;
  }
  /** 
   * 觸發事件(發佈事件)
   */
  emit(eventType) {
    //取出傳遞過來的參數
    var handlerArgs = Array.prototype.slice.call(arguments, 1);
    //循環執行對應事件的處理函數
    for (var i = 0; i < this.handlers[eventType].length; i++) {
      this.handlers[eventType][i].apply(this, handlerArgs);
    }
    return this;
  }
  /**
   * 刪除訂閱事件
   */
  off(eventType, handler) {
    var currentEvent = this.handlers[eventType];
    var len = 0;
    if (currentEvent) {
      len = currentEvent.length;
      for (var i = len - 1; i >= 0; i--) {
        if (currentEvent[i] === handler) {
          currentEvent.splice(i, 1);
        }
      }
    }
    return this;
  }
}

export default PubSub.getInstance();
複製代碼