§详情-数据渲染本文视频地址：https://v.qq.com/x/page/x0555...开始之前，请将ch4-2分支下的code/目录导入到微信开发工具中。本节我们将开始详细的接口调用、数据加载和视图渲染过程。Step1.引入一些公共工具库，修改detail.js：'usestrict';importutilfrom'../../utils/index';importconfigfrom'../../utils/config';//WxParseHtmlFormater用于将内容文本解析到小程序视图中/lib/htmlFormater';letapp=getApp();Page({});Step2.修改detail.js页面初始化时，请求接口，加载详细数据Page({onLoad(option){/**function`onLoad`会在页面初始化时加载运行，其内部的`option`是路由跳转后的参数对象。*我们从`option`中解析出文章参数`contentId`，然后通过封装调用`util``request`函数来获取`mock`数据。*/让id=option.contentId||0;这个.init(id);},init(contentId){if(contentId){this.requestDetail(contentId).then(data=>{util.log(data)})}},requestDetail(contentId){returnutil.request({url:'detail',mock:true,data:{source:1}}).then(res=>{returnres})}})run之后我们看看控制台输出的数据，是不是很清楚！Step3.接下来渲染页眉数据并修改requestDetail函数，并添加日期格式化方法，达到我们想要的效果，然后返回数据Page({//此处省略部分代码requestDetail(contentId){returnutil.request({url:'detail',mock:true,data:{source:1}}).then(res=>{letformateUpdateTime=this.formateTime(res.data.lastUpdateTime)//格式化后res.data.formateUpdateTime=formateUpdateTime返回res.data})},formateTime(timeStr=''){让年=timeStr.slice(0,4),月=timeStr.slice(5,7),日=timeStr.slice(8,10);返回`${year}/${month}/${day}`；}})现在我们已经拿到了后台返回的数据，并处理了一些数据标准下一步，我们将返回的数据同步到Model层（即数据对象）。我们添加configPageData函数来处理数据同步到data的逻辑：this.configPageData(data)})}},configPageData(data){if(data){//同步数据到Model层，如果model层数据发生变化，view层会自动渲染this.setData({detailData:data});//设置标题lettitle=this.data.detailData.title||config.defaultBarTitlewx.setNavigationBarTitle({title:title})}}})因为页面的标题随着文章的变化而变化，我们需要动态设置。这里我们调用设计小程序自带的方法wx.setNavigationBarTitle({title:'Title'})修改viewdetail.wxml的headclass="info"内容：{{detailData.title}}{{detailData.author}}<文本类="info-desc-datefr">{{detailData.formateUpdateTime}}第四步调用解析parse接口返回的content字段（文本内容），返回明细数据后，我们已经过滤了部分数据，现在修改detail.js中的init函数，增加对文章文本的处理：articleRevert(){//this.data.detailData是我们之前通过setData设置的响应数据lethtmlContent=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',html内容,这个,0);第一个参数article很重要，在WxParse中，我们传入当前对象this，当解析变量htmlContent时，会将解析后的数据赋值给当前对象，命名为article所以在解析文章数据的时候，数据article已经存在于当前环境上下文中，可以直接在detail.wxml中引用：修改this.data.article中的detail.wxml引用我们的文章文本数据：viewclass="content">再看页面效果，文章已经正常显示了，但是我们还是需要优化样式，例如添加一些行高、文字间距、字体大小和颜色、图像居中等。修改样式文件detail.wxss，增加以下样式.wrapper.content{padding:036rpx;底部填充：40rpx；行高：56rpx；颜色：#333；字体大小：36rpx；溢出：隐藏；word-wrap:break-word}.wrapper.content.langs_cn,.wrapper.content.para.translate{font-size:32rpx;颜色：#666}.wrapper.content.langs_cn,.wrapper.content.langs_en,.wrapper.content.para,.wrapper.content.wxParse-p{margin:44rpx0}.wrapper.contentimage{最大宽度：100%；垂直对齐：顶部}.wrapper.content.tip{颜色：#999；字体大小：28rpx；文本对齐：居中；高度：28rpx；line-height:28rpx}.wrapper.content.tip-icon{vertical-align:top;右边距：8rpx；宽度：26rpx；高度：26rpx；边框：1px实心#999；边界半径：6rpx；box-sizing:border-box}.wrapper.content.tip-icon.selected{边框：无；背景：url(https://n1image.hjfile.cn/mh/2017/06/12/20703f295b7b3ee4f5fe077c4e464283.png)00不重复；背景大小：包含}iKcamp官网：http://www.ikcamp.com访问官网阅读全速免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》包括：文章、视频、源码iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东上架。com和当当网。【11月11日】上海iKcamp最新活动报名地址：http://www.huodongxing.com/ev...以及“天天练英语”小程序总榜第四名的研发团队及排行榜首先在教育类别中，面对面交流。
