如果你還想要 從0到1 和 從1到2 的細致的話，那么對不起，本文沒有。

展示效果

回顧一下從1到2中最后的小作業，請確保你已經完成了如展示效果中的 列表頁面，這里有 6 個數據內容哦，而且 將post-item抽取成了 template。

展示頁

準備

為了更好更流暢的學習這部分內容，請確保已經閱讀過先導篇： 從0 到1：初學者入門Demo、從1到2：初學者入門Demo內容列表頁面。本文將一改 從0 到1 中風格，不再細枝末節的闡述，只寫重要內容。

PS： 背景音樂基礎內容知識，請大家 閱讀 社區極速文檔的 音樂播放控制API章節內容。這部分有一個完整利用 8 個API 設計的完整Demo，音樂控制，相當優雅精美哦！看一下效果的展示吧（注意：gif 展示效果，沒有聲音，其實快進和快退是有效果的呢！）

PPPPS：該文是由從1到2而來的內容詳情頁，直接閱讀可能帶來身體的不適，足夠強大的人，隨意哈！

內容詳情頁

在 從1 到2 中，我們快速構建了一個內容詳情頁pages/index/post-detail/post-detail，當點擊文與字簡介內容的主體部分或是輪播圖子項時，onPostTap 事件會攜帶一個 postId 參數到詳情頁。postId 是聯接文與字簡介內容和構建其對應詳情頁的唯一紐帶。

本文沒廢話，直接上代碼，具體的實現，大家自己來吧，如果你學習了從0到1、從1到2以及音樂播放控制API的內容，這簡直不能再容易了。難道不是嗎？（如果你有足夠的時間，請將getHttpData、postHttpData抽取到 util.js 中吧，就像官方給的 quickstart項目那樣）

請記得兩句話：先骨架（wxml），再穿衣服（wxss），最后搞個小動作（js）；布局時，先整體，再局部。

post-detail.wxml 代碼

<view class="post-container">
  <image class="post-img" src="{{isPlaying?postData.music.coverImg:postData.headImgSrc}}"></image>
  <image catchtap="onMusicTap" class="audio" src="/imgs/music/music-{{isPlaying?'stop':'start'}}.png"></image>
  <view class="post-author-date">
    <image class="post-avatar" src="{{postData.avatar}}"></image>
    <text class="post-author">{{postData.author}}</text>
    <text class="const-text">發表于</text>
    <text class="post-date">{{postData.dateTime}}</text>
  </view>
  <text class="post-title">{{postData.title}}</text>
  <view class="post-collection-share">
    <!-- 使用條件渲染實現一個圖標的選擇：會存在一個局部渲染的過程 -->
    <image catchtap="onShareTap" class="post-share" src="/imgs/icon/share.png"></image>
    <image catchtap="onCollectionTap" class="post-collection" src="/imgs/icon/collection{{collected?'':'-anti'}}.png"></image>
  </view>
  <view class="horizon"></view>
  <text class="post-content">{{postData.detail}}</text>
</view>

post-detail.wxss 代碼

.post-container {
  display: flex;
  flex-direction: column;
}

.post-img {
  width: 100%;
  height: 450rpx;
}

.audio {
    width: 110rpx;
    height: 102rpx;
    position: absolute;
    top: 180rpx;
    left: 50%;
    margin-left: -51rpx;
    opacity: 0.6;
}

.post-author-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 0 0 30rpx;
}

.post-avatar {
  width: 64rpx;
  height: 64rpx;
}

.post-author {
  font-size: 26rpx;
  font-weight: 300;
  margin-left: 20rpx;
  color: #666;
}

.const-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}


.post-date {
  font-size: 24rpx;
  margin-left: 30rpx;
  color: #999;
}

.post-title {
  margin-left: 40rpx;
  font-size: 42rpx;
  font-weight: 700;
  margin-top: 30rpx;
  margin-bottom: 20rpx;
  letter-spacing: 2px;
  color: #4b556c;
}

.post-collection-share {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
}

.post-collection-share image{
  width: 80rpx;
  height: 80rpx;
  margin-left: 30rpx;
}

.horizon {
  position: relative;
  width: 90%;
  height: 2rpx;
  background-color: #e5e5e5;
  margin: 0 auto;
  top: -60rpx;
  z-index: -99;
}

.post-content {
  color: #666;
  margin: 20rpx 30rpx 0;
  line-height: 44rpx;
  letter-spacing: 2px;
  font-size: 30rpx;
}

post-detail.js 代碼

var app = getApp();
Page({
  data: {
    // 從列表項跳轉時攜帶的的 postId ，記錄一下，待用
    currentPostId: "",
    // 通過 postId 獲取的詳情內容
    postData: {},
    // 監控音樂播放狀態，選擇適合的圖片
    isPlaying: false,
    // 當前內容是否收藏
    collected: false
  },
  // 背景音樂的URL
  currentMusicUrl: "",
  // 用于記錄各個收藏狀態的數組，存放的是頁面的postId。比如：["3","0"]
  postsCollected: [],
  onLoad: function (options) {
    let postId = options.postId;
    var that = this;
    // 通過 postId 獲取請內容
    this.getHttpData(postId, "postData", function (data) {
      that.setData({ postData: data });
      that.setData({ currentPostId: postId });
      that.currentMusicUrl = data.music.url;
    });
    // 獲取文章收藏數組，更新收藏狀態
    this.getHttpData("postsCollected", "json", function (data) {
      that.postsCollected = data;
      console.log(data)
      that.setData({ collected: that.postsCollected.indexOf(String(postId)) >= 0 });
    });
    // 若是有背景音樂正在播放的話話，判斷是否是當前頁面的背景音樂，以免在不同詳情頁的播放狀態相互影響
    if (app.globalData.g_currentPostId == postId) {
      this.setData({ isPlaying: app.globalData.g_isPlaying });
    }
    // 初始化時，注冊監聽音樂播放狀態事件
    this.onAudioState();
  },
  // 收藏
  onCollectionTap: function () {
    let collected = !this.data.collected;
    this.setData({ collected: collected });
    wx.showToast({ title: collected ? '收藏成功' : '取消收藏', duration: 1000 });
  },
  // 頁面卸載時，收藏狀態的保存
  onUnload: function () {
    let postId = this.data.currentPostId;
    // 當且僅當以下兩種情況下才執行收藏狀態的更新操作
    // 如果當前頁的的 postId 不在記錄收藏狀態數組中，且當前內容已經被收藏
    // 如果當前頁的的 postId 在記錄收藏狀態數組中，且當前內容已經取消收藏
    if (this.data.collected === (this.postsCollected.indexOf(String(postId)) < 0)) {
      if (this.data.collected) {
        this.postsCollected.push(postId);
      } else {
        this.postsCollected.pop(postId);
      }
      this.postHttpData("postsCollected", this.postsCollected, "json");
    }
  },
  // 點擊播放背景音樂
  onMusicTap: function () {
    // 社區極速文檔的的 音樂播放控制API篇中，有具體基礎內容
    let isPlaying = this.data.isPlaying;
    let music = this.data.postData.music;
    if (isPlaying) {
      // 如果是正在播放，再次點擊的話，暫停播放
      wx.pauseBackgroundAudio();
    } else {
      // 如果是正在暫停，再次點擊的話，開始播放
      wx.playBackgroundAudio({
        dataUrl: music.url,
        title: music.title,
        coverImgUrl: music.coverImg
      });
      // 同時將當前正在播放背景音樂的詳情頁的的 postId 保存到全局變量中（當擁有多個列表頁和詳情頁時間，這是需要的）
      app.globalData.g_currentPostId = this.data.currentPostId;
    }
    // 點擊之后，播放狀態取反（PS：這里和社區極速文檔的的音樂播放控制API篇，使用的方式不同，為了介紹多種解決方案，費盡心機呀！）
    app.globalData.g_isPlaying = !isPlaying;
    this.setData({ isPlaying: !isPlaying });
  },
  // 監聽播放狀態的事件（（PS：這里和社區極速文檔的的音樂播放控制API篇，使用的方式不同，為了介紹多種解決方案，費盡心機呀！））
  onAudioState: function () {
    wx.getBackgroundAudioPlayerState({
      success: (res) => {
        if (res.status !== 2 && this.currentMusicUrl !== res.dataUrl) {
          wx.stopBackgroundAudio();
        }
      }
    })
    wx.onBackgroundAudioPlay(() => {
      app.globalData.g_isPlaying = true;
      if (app.globalData.g_currentPostId == this.data.currentPostId) {
        this.setData({ isPlaying: true });
      }
      console.log('paly');
    });
    wx.onBackgroundAudioPause(() => {
      app.globalData.g_isPlaying = false;
      this.setData({ isPlaying: false });
      console.log('pause');
    });
    wx.onBackgroundAudioStop(() => {
      app.globalData.g_isPlaying = false;
      app.globalData.g_currentPostId = -1;
      this.setData({ isPlaying: false });
      console.log('stop');
    });
  },
  // 從 wxappclub 的 api 中心獲取數據的方法
  // key 表示數據名稱，_type 數據類型，callback 表示請求成功的回調函數
  getHttpData: function (key, _type, callback) {
    wx.request({
      url: 'https://api.wxappclub.com/get',
      data: {
        // 筆者的API中心，提供給各位使用
        "appkey": "eaa7gcwem04j8sak7hm8g88mkftgb26h",
        "key": key,
        "type": _type
      },
      method: 'GET',
      header: {
        'content-type': 'json'
      },
      success: function (res) {
        if (res.data.success) {
          // console.log(res.data.result.value);
          callback(res.data.result.value);
        }
      }
    });
  },
  // 用于提交數據的方法（愛我的話，請不要隨意提交數據。謝謝！！！）
  postHttpData: function (key, value, _type) {
    wx.request({
      url: 'https://api.wxappclub.com/put',
      data: {
        "appkey": "eaa7gcwem04j8sak7hm8g88mkftgb26h",
        "key": key,
        "value": value,
        "type": _type
      },
      method: 'GET',
      header: {
        'content-type': 'json'
      }
    });
  }
})

app.js 代碼（使用到了兩個全局變量）

App({
    globalData:{
        // 將音樂播放的狀態保存到全局變量中，主要解決從詳情頁面A到達列表頁在
        // 到達詳情頁面B時，播放狀態isPlaying紊亂的問題
        g_isPlaying: false,
        // 記錄當前 g_isPlaying 是那個頁面的播放狀態值，與 g_isPlaying 
        // 共同作用。保證不同詳情頁的播放狀態正確
        g_currentPostId: -1
    }
})

辛苦樓主的方式有很多，可以打賞，去專欄點贊，或者是一笑而過…..，或者是說兩句…. 不建議大家收藏，看完就趕緊動手吧！！！