微信小程式教學第四章第二節（含視訊）：小程式中級實戰教程：詳情-檢視渲染

iKcamp發表於2017-11-01
微信小程式

§ 詳情 - 資料渲染

本文配套視訊地址：
v.qq.com/x/page/x055…

開始前請把 ch4-2 分支中的 code/ 目錄匯入微信開發工具
這一節中，我們開始詳情的介面呼叫、資料載入和檢視渲染過程。


Step 1. 引入公用的一些工具庫，修改 detail.js：

'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({

});複製程式碼


Step 2. 修改 detail.js 在頁面初始化時候，請求介面，載入詳情資料

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
    })
  }
})複製程式碼


執行之後，我們檢視下控制檯輸出的資料，是不是很清晰！

Step 3. 接著，把頁面頭部資料渲染出來

修改 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" 內容： 

<view class="info">
    <view class="info-title">{{ detailData.title }}</view>
    <view class="info-desc cf">
        <text class="info-desc-author fl">{{ detailData.author }}</text>
        <text class="info-desc-date fr">{{ detailData.formateUpdateTime}}</text>
    </view>
    <view class="info-line under-line"></view>
</view>複製程式碼


Step 4. 呼叫 parse 解析介面返回的 content 欄位（文字內容）

當詳情資料返回後，我們已經對部分資料進行了過濾處理，現在修改 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，引用我們的文章正文資料： 

<!-- 先引入解析模板  -->
<import src="../../lib/wxParse/wxParse.wxml"/>

<!-- 修改文章正文節點  -->
<view class="content">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>複製程式碼


再看下頁面效果，文章已經正常的顯示了，但我們還需要優化下樣式，比如增加一些行高、文字間距、字型大小顏色、圖片居中等。修改樣式檔案 detail.wxss，增加 以下樣式 

.wrapper .content {
  padding: 0 36rpx;
  padding-bottom: 40rpx;
  line-height: 56rpx;
  color: #333;
  font-size: 36rpx;
  overflow: hidden;
  word-wrap: break-word
}

.wrapper .content .langs_cn,.wrapper .content .para.translate {
  font-size: 32rpx;
  color: #666
}

.wrapper .content .langs_cn,.wrapper .content .langs_en,.wrapper .content .para,.wrapper .content .wxParse-p {
  margin: 44rpx 0
}

.wrapper .content image {
  max-width: 100%;
  vertical-align: top
}

.wrapper .content .tip {
  color: #999;
  font-size: 28rpx;
  text-align: center;
  height: 28rpx;
  line-height: 28rpx
}

.wrapper .content .tip-icon {
  vertical-align: top;
  margin-right: 8rpx;
  width: 26rpx;
  height: 26rpx;
  border: 1px solid #999;
  border-radius: 6rpx;
  box-sizing: border-box
}

.wrapper .content .tip-icon.selected {
  border: none;
  background: url(https://n1image.hjfile.cn/mh/2017/06/12/20703f295b7b3ee4f5fe077c4e464283.png) 0 0 no-repeat;
  background-size: contain
}複製程式碼

iKcamp官網：www.ikcamp.com

訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程式｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視訊、原始碼

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

【11月11號】上海iKcamp最新活動

報名地址：www.huodongxing.com/event/54099…

與“天天練口語”小程式總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。

相關文章