微信小程序教学第四章第二节（含视频）：小程序中级实战教程：详情-视图渲染

摘要：详情数据渲染本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们开始详情的接口调用数据加载和视图渲染过程。

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

开始前请把 ch4-2 分支中的 code/ 目录导入微信开发工具  
这一节中，我们开始详情的接口调用、数据加载和视图渲染过程。

"use strict";

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

// WxParse HtmlFormater 用来解析 content 文本为小程序视图
import WxParse from "../../lib/wxParse/wxParse";
// 把 html 转为化标准安全的格式
import HtmlFormater from "../../lib/htmlFormater";

let app = getApp();
Page({

});

Page({
  onLoad (option) {
    /*
    * 函数 `onLoad` 会在页面初始化时候加载运行，其内部的 `option` 是路由跳转过来后的参数对象。
    * 我们从 `option` 中解析出文章参数 `contendId`，然后通过调用 `util` 中封装好的 `request` 函数来获取 `mock` 数据。 
    */ 
    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
    })
  }
})

运行之后，我们查看下控制台输出的数据，是不是很清晰！

修改 requestDetail 函数，并增加日期格式化的方法，达到我们想要的效果，然后重新返回数据

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}`;
  }
}）

现在我们已经获取到了后端返回的数据，并且已经把部分数据标准处理过。下一步，我们把返回的数据同步到 Model 层中（也就是 data 对象中）
我们增加 configPageData 函数，用它来处理数据同步到 data的逻辑：

Page({
  data: {
    detailData: {

    }
  },
  init (contentId) {
    if(contentId) {
      this.requestDetail(contentId)
          .then(data => {
              this.configPageData(data)
          })
    }
  },
  configPageData(data){
    if (data) {
        // 同步数据到 Model 层，Model 层数据发生变化的话，视图层会自动渲染
        this.setData({
            detailData: data
        });
        //设置标题
        let title = this.data.detailData.title || config.defaultBarTitle
        wx.setNavigationBarTitle({
            title: title
        })
    }
  }
})

因为页面的标题是随着文章变化的，所以需要我们动态设置，这里我们调用了小程序自带的方法来设计

wx.setNavigationBarTitle({
  title: "标题"
})

修改视图 detail.wxml 的头部 class="info" 内容：

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

当详情数据返回后，我们已经对部分数据进行了过滤处理，现在修改 detail.js 中的 init 函数，增加对文章正文的处理：

    articleRevert () {
      // this.data.detailData 是之前我们通过 setData 设置的响应数据
      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)
          })
          //调用wxparse
          .then(()=>{
            this.articleRevert()
          })
      }
    },

注意看上面的 articleRevert 函数，变量 htmlContent 指向文章的正文数据，当其传入到组件 WxParse 后，同时带入了 5 个参数

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

第一个参数 article 很重要，在 WxParse 中，我们传入了当前对象 this，当变量 htmlContent 解析之后，会把解析后的数据赋值给当前对象，并命名为 article

所以当文章数据解析后，当前环境上下文中已经存在了数据 article，可以直接在 detail.wxml 中引用：

this.data.article

修改 detail.wxml，引用我们的文章正文数据：