§ 詳情 - 數據渲染
本文配套視頻地址:
https://v.qq.com/x/page/x055550lrvd.html
開始前請把
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官網:http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程:《iKcamp出品|全網最新|微信小程序|基於最新版1.0開發者工具之初中級培訓教程分享》。
包含:文章、視頻、源代碼
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。
【11月11號】上海iKcamp最新活動
報名地址:http://www.huodongxing.com/event/5409924174200
與
“天天練口語”
小程序總榜排名第四、教育類排名第一的研發團隊,面對面溝通交流。