专栏首页iKcamp微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染

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

§ 详情 - 数据渲染

本文配套视频地址: 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
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    § 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中...

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

    详情 - 功能完善 本文配套视频地址: https://v.qq.com/x/page/f0555nfdi14.html 开始前请把 ch4-3 分支...

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

    增加 下一篇 的功能,我们需要在视图中绑定一个事件,来触发代码中的响应函数,此函数会调用接口,返回下一篇文章内容数据。

    iKcamp
  • 【实战】我背着女朋友,用 Python 偷偷抓取了她的行踪

    有时候女朋友一个人在外面玩耍,问她在哪个地方,就是不告诉我。但是,你又很想知道女朋友的「位置」,这该如何是好?

    昱良
  • Python3 isinstance()

    isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type()。

    py3study
  • 你应该这个姿势学习php(3)

    1、ob_start() 开启文件缓存 2、ob_get_contents() 得到缓存中的内存 3、ob_get_length() 得到缓冲区的长度 4、ob...

    思梦php
  • 你应该这个姿势学习php(3)

    输出缓冲区的内容,如果你想获取缓冲区的内容要在这个函数之前使用ob_get_contents(),不然数据将会被清空

    思梦php
  • 从一次TSN相关协议实现中了解以太网MAC地址的含义

    在本公众号的前面文章中,曾经提到过,TSN(Time Sensitive Networking,TSN)和TTE(Time-Triggered Ethernet...

    网络交换FPGA
  • Python使用K-means聚类算法进行分类案例一则

    K-means算法是经典的基于划分的聚类方法,是十大经典数据挖掘算法之一,其基本思想是:以空间中k个点为中心进行聚类,对最靠近它们的对象归类。通过迭代的方法,逐...

    Python小屋屋主
  • 算法效率分析基础

    版权声明:本文为博主原创文章,转载请注明博客地址: https://blog.csdn.ne...

    zy010101

扫码关注云+社区

领取腾讯云代金券