摘要：詳情數(shù)據(jù)渲染本文配套視頻地址開始前請把分支中的目錄導(dǎo)入微信開發(fā)工具這一節(jié)中，我們開始詳情的接口調(diào)用數(shù)據(jù)加載和視圖渲染過程。

本文配套視頻地址：
https://v.qq.com/x/page/x0555...

開始前請把 ch4-2 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具  
這一節(jié)中，我們開始詳情的接口調(diào)用、數(shù)據(jù)加載和視圖渲染過程。

"use strict";

import util from "../../utils/index";
import config from "../../utils/config";

// WxParse HtmlFormater 用來解析 content 文本為小程序視圖
import WxParse from "../../lib/wxParse/wxParse";
// 把 html 轉(zhuǎn)為化標(biāo)準(zhǔn)安全的格式
import HtmlFormater from "../../lib/htmlFormater";

let app = getApp();
Page({

});

Page({
  onLoad (option) {
    /*
    * 函數(shù) `onLoad` 會在頁面初始化時候加載運(yùn)行，其內(nèi)部的 `option` 是路由跳轉(zhuǎn)過來后的參數(shù)對象。
    * 我們從 `option` 中解析出文章參數(shù) `contendId`，然后通過調(diào)用 `util` 中封裝好的 `request` 函數(shù)來獲取 `mock` 數(shù)據(jù)。 
    */ 
    let id = option.contentId || 0;
    this.init(id);
  },
  init (contentId) {
    if (contentId) {
      this.requestDetail(contentId)
          .then(data => {
              util.log(data)
          })
    }
  },
  requestDetail(contentId){
    return util.request({
      url: "detail",
      mock: true,
      data: {
          source: 1
      }
    })
    .then(res => {
      return res
    })
  }
})

運(yùn)行之后，我們查看下控制臺輸出的數(shù)據(jù)，是不是很清晰！

修改 requestDetail 函數(shù)，并增加日期格式化的方法，達(dá)到我們想要的效果，然后重新返回?cái)?shù)據(jù)

Page({
  // 此處省略部分代碼

  requestDetail(contentId){
    return util.request({
      url: "detail",
      mock: true,
      data: {
          source: 1
      }
    })
    .then(res => {
      let formateUpdateTime = this.formateTime(res.data.lastUpdateTime)
      // 格式化后的時間
      res.data.formateUpdateTime = formateUpdateTime
      return res.data
    })
  },
  formateTime (timeStr = "") {
    let year = timeStr.slice(0, 4),
        month = timeStr.slice(5, 7),
        day = timeStr.slice(8, 10);
    return `${year}/${month}/${day}`;
  }
}）

現(xiàn)在我們已經(jīng)獲取到了后端返回的數(shù)據(jù)，并且已經(jīng)把部分?jǐn)?shù)據(jù)標(biāo)準(zhǔn)處理過。下一步，我們把返回的數(shù)據(jù)同步到 Model 層中（也就是 data 對象中）
我們增加 configPageData 函數(shù)，用它來處理數(shù)據(jù)同步到 data的邏輯：

Page({
  data: {
    detailData: {

    }
  },
  init (contentId) {
    if(contentId) {
      this.requestDetail(contentId)
          .then(data => {
              this.configPageData(data)
          })
    }
  },
  configPageData(data){
    if (data) {
        // 同步數(shù)據(jù)到 Model 層，Model 層數(shù)據(jù)發(fā)生變化的話，視圖層會自動渲染
        this.setData({
            detailData: data
        });
        //設(shè)置標(biāo)題
        let title = this.data.detailData.title || config.defaultBarTitle
        wx.setNavigationBarTitle({
            title: title
        })
    }
  }
})

因?yàn)轫撁娴臉?biāo)題是隨著文章變化的，所以需要我們動態(tài)設(shè)置，這里我們調(diào)用了小程序自帶的方法來設(shè)計(jì)

wx.setNavigationBarTitle({
  title: "標(biāo)題"
})

修改視圖 detail.wxml 的頭部 class="info" 內(nèi)容：

    {{ detailData.title }}
    
        {{ detailData.author }}
        {{ detailData.formateUpdateTime}}
    
    

當(dāng)詳情數(shù)據(jù)返回后，我們已經(jīng)對部分?jǐn)?shù)據(jù)進(jìn)行了過濾處理，現(xiàn)在修改 detail.js 中的 init 函數(shù)，增加對文章正文的處理：

    articleRevert () {
      // this.data.detailData 是之前我們通過 setData 設(shè)置的響應(yīng)數(shù)據(jù)
      let htmlContent = this.data.detailData && this.data.detailData.content;
      WxParse.wxParse("article", "html", htmlContent, this, 0);
    },
    init (contentId) {
      if (contentId) {
        this.requestDetail(contentId)
          .then(data => {
            this.configPageData(data)
          })
          //調(diào)用wxparse
          .then(()=>{
            this.articleRevert()
          })
      }
    },

注意看上面的 articleRevert 函數(shù)，變量 htmlContent 指向文章的正文數(shù)據(jù)，當(dāng)其傳入到組件 WxParse 后，同時帶入了 5 個參數(shù)

WxParse.wxParse("article", "html", htmlContent, this, 0);

第一個參數(shù) article 很重要，在 WxParse 中，我們傳入了當(dāng)前對象 this，當(dāng)變量 htmlContent 解析之后，會把解析后的數(shù)據(jù)賦值給當(dāng)前對象，并命名為 article

所以當(dāng)文章數(shù)據(jù)解析后，當(dāng)前環(huán)境上下文中已經(jīng)存在了數(shù)據(jù) article，可以直接在 detail.wxml 中引用：

this.data.article

修改 detail.wxml，引用我們的文章正文數(shù)據(jù)：