小程序数据渲染

小程序页面生命周期函数

在页面.js文件中存在onLoad,onReady,onShow,onHide,onUnload生命周期钩子函数

生命周期函数执行顺序

页面完成渲染前的函数onLoad,onReady,onShow顺序如下
条件触发函数onHide,onUnload onHide:监听页面隐藏：如手机后台切换到其他程序。若切换回该程序仅会触发onShow函数，不会重新渲染
onUnload:监听页面卸载：如关闭小程序

小程序页面数据绑定

简单的数据绑定实例

首先在页面.js文件中对象的data属性添加变量a

data: {
    a : "2020LPL季后赛观赛指南"
  },

然后在页面的.wxml文件中使用{{ }} 进行引用即可完成数据绑定

<text class="post-title">{{a}}</text>

使用函数实现数据绑定

在页面.js文件中的onLoad钩子函数中使用setData函数，该函数接受一个对象

onLoad: function (options) {
    this.setData({
      b:"2020LPL季后赛观赛指南"
    })
  },

然后在页面的.wxml文件中使用{{ }} 进行引用即可完成数据绑定

<text class="post-title">{{b}}</text>

setData函数会自动将变量添加至data中

最终效果图如下

数据绑定解析

意义：比起传统的DOM操作，数据绑定能够使变量的引用更简单和灵活，使得变量能随意出现在页面的任何位置
数据绑定使用Mustache语法，{{}}内部的表达式会被当成js表达式执行，如{{a+b}}

数据导入与导出

在页面中，通常会引入其他页面的数据，建议使用es6中的export与import实现，实现流程如下

在需要导出数据的.js文件中导出data

export {
  data
}

在需要导入数据的.js文件中进行导入与使用即可，注意变量名需要与导出时对应

import { data } from '../../data/data.js'
console.log(data)

小程序渲染机制

条件渲染-根据判断条件决定是否显示元素

首先在页面.js文件的data中定义标志位

data: {
    flag: true
  },

然后在页面.wxml中输入判断语法

<text wx:if="{{flag}}" class="post-date">{{date}}</text>

当前标志位为true，该组件显示如下：

也可以使用if-else语法

<image wx:if="{{flag}}" class="post-author" src="{{avatar}}"></image>
<text wx:else class="post-date">{{date}}</text>

列表渲染机制--渲染多组数据

首先在页面.js文件中添加数组数据（模拟后台接受得到的数据），存入onLoad钩子函数中,自定义为posts属性的值

  onLoad: function (options) {
    var content = [{
      date: "Nov 20 2020",
      title: "2020LPL夏季赛季后赛观赛指南",
      imgSrc: "/images/lpl.png",
      avatar: "/images/avatar/5.png",
    },
    {
      date: "Sep 18 2020",
      title: "正是虾肥蟹壮时",
      imgSrc: "/images/post/crab.png",
      avatar: "/images/avatar/1.png",
  }]
    this.setData({
      posts: content
    })
    console.log("onLoad")
  },

然后在页面.wxml中使用block标签，wx:for='{{posts}}'语法进行列表渲染,item.date对变量进行引用。列表渲染建议加上wx:key用于保持排序，提高页面性能

<block wx:for="{{posts}}" wx:for-item="item" wx:for-index="index" wx:key="index">
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="{{item.avatar}}"></image>
      <text class="post-date">{{item.date}}</text>
    </view>
    <text class="post-title">{{item.title}}</text>
    <image class="post-image" src="{{item.imgSrc}}"></image>
  </view>
</block>

得到的效果图如下

注：item与index为默认值，可设置为其他任意值。至此完成小程序数据渲染的学习，整理不易，求多点赞支持～

微信小程序入门3--数据渲染