§ 详情 - 数据渲染

本文配套视频地址:

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

“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。

微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染的更多相关文章

  1. 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

    详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中 ...

  2. 微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

    § 视图与数据关联 本文配套视频地址: https://v.qq.com/x/page/z0554wyswib.html 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工具 首先 首先 ...

  3. 微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

    iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...

  4. 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

    下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...

  5. 微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善

    详情 - 功能完善 本文配套视频地址: https://v.qq.com/x/page/f0555nfdi14.html 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具 这一节中, ...

  6. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...

  7. 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理

    § 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具 修改 ind ...

  8. 啊哈算法第四章第二节解救小哈Java实现

    package corejava; public class FourTwo { static int m;//(m,n)为几行几列 static int n; static int p;//(p,q ...

  9. 《学习OpenCV》练习题第四章第二题

    #include <highgui.h> #include <cv.h> #pragma comment (lib,"opencv_calib3d231d.lib&q ...

随机推荐

  1. canvas图表(3) - 饼图

    原文地址:canvas图表(3) - 饼图 这几天把canvas图表都优化了下,动画效果更加出色了,可以说很逼近echart了.刚刚写完的饼图,非常好的实现了既定的功能,交互的动画效果也是很棒的. 效 ...

  2. PHP制作API接口

    需要单一入口文件,可以使用autoload来加载 <?php //获取get参数 $m = !empty($_GET['m'])?$_GET['m']:'Index'; $a = !empty( ...

  3. lua table操作实例详解

    lua_gettable lua_getglobal(L, "mytable") <== push mytable lua_pushnumber(L, 1)        & ...

  4. ip地址与整数相互转换

    一.将ip地址转成long数值 将IP地址转化成整数的方法如下: 1.通过String的split方法按.分隔得到4个长度的数组 2.通过左移位操作(<<)给每一段的数字加权,第一段的权为 ...

  5. openstack pike 单机 一键安装 shell

    #openstack pike 单机  centos 一键安装 shell #openstack pike 集群高可用  安装部署 汇总 http://www.cnblogs.com/elvi/p/7 ...

  6. Sonar常见问题分析

    1.Equality tests should not be made with floating point value 代码举例: if (result == num) //result和num均 ...

  7. GO学习——安装编译(1)

    学习网站列表: Golang官网:https://golang.org/ Golang标准库文档:https://golang.org/pkg Golang中文标准库文档:https://studyg ...

  8. hdu 3183 A Magic Lamp RMQ ST 坐标最小值

    hdu 3183 A Magic Lamp RMQ ST 坐标最小值 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3183 题目大意: 从给定的串中挑 ...

  9. HDU 1014 Uniform Generator 欧几里得

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1014 解题思路: 1. 把题目意思读懂后,明白会输入两个数,然后根据题中的公式产生一系列伪随机数,看这 ...

  10. 76、django之内置Admin

    本篇导航: 配置路由 定制Admin Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django ...