🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
🐳博客主页：​苏凉.py的博客​ 🌐系列专栏：小程序开发基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂

文章目录

条件渲染

wx:if

在小程序中为了显示不同的信息段，我们可以通过条件渲染来显示，满足条件则显示页面，不满足则隐藏。
配合​​​wx:elif​​​和​​wx：else​​来使用

语法：​​wx:if="{{}}"​​

实例：
添加三个​​​view​​组件

<view>男</view>
<view>女</view>
<view>未知</view>

在js文件中的data中定义一个数据

【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式_原力计划


为wxml中的三个​​view​​组件添加条件渲染语句

<view wx:if="{{gender == 1}}">男</view>
<view wx:elif="{{gender == 2}}">女</view>
<view wx:else>未知</view>

这时在小程序内就只显示条件满足gender为1的​​view​​组件了。

【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式_原力计划_02

结合block使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个​​block​​​标签将多个组件包装起来，并在​​block​​标签上使用wx:if 控制属性。

<block wx:if="{{gametype == 1}}">
<view>英雄联盟</view>
<view>QQ飞车</view>
<view>地下城</view>
</block>

<block wx:else="{{gametype == 2}}">
<view>王者荣耀</view>
<view>原神</view>
<view>和平精英</view>
</block>

<block wx:else>
<view>其他</view>
</block>

【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式_小程序_03


​​block​​并非是一个组件，而是一个包裹性质的容器，它不会再页面上渲染出来。

hidden隐藏元素

上面我们说了可以用​​wx:if​​来显示和隐藏元素，hidden同样也可以控制显示和隐藏元素。

语法：​​hidden=”{{}}“​​条件为true则隐藏，否则显示。

<view hidden="{{true}}">苏凉</view>

wx:if 和 hidden的区别

1.运行方式不同

  • ​​wx:if​​ 以动态创建和移除元素的方式，控制元素的展示与隐藏
  • ​​hidden​​ 以切换样式的方式( display: none/block;)，控制元素的显示与隐藏

    • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式_小程序_04

2.何时使用？

  • 在我们需要频繁切换显示与隐藏时，建议使用​​hidden​​
  • 在我们条件比较复杂时，建议使用​​wx:if​​​配合​​wx:elif​​​和​​wx:else​​来使用。

列表渲染

wx:for

通过​​wx:for​​​可以根据指定的数组，循环渲染重复的组件结构。
同时使用index来显示当前索引，使用item来显示当前项

实例：

<view wx:for="{{arr1}}">
这是第{{index+1}}个角色，TA是{{item}}。
</view>

【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式_原力计划_05

index索引项从0开始

手动指定索引和当前项的变量名

  • 使用​​wx:for-index​​可以指定当前循环项的索引的变量名
  • 使用​​wx:for-item​​可以指定当前项的变量名

实例：

<view wx:for="{{arr1}}" wx:for-index="num" wx:for-item="acter">
这是第{{num+1}}个角色，TA是{{acter}}。
</view>

wx:key 的使用

小程序在实现列表渲染时，建议为渲染出来的列表项指定唯一的 key值，从而提高渲染的效率。
实例：
wxml：

<view wx:for="{{arr2}}" wx:key="id">{{item.name}}</view>

js：

【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式_小程序_06


如果列表中没有设定key值，那我们也可以将默认的index来作为我们的key值。

wxss模板样式

wxss是什么

wxss (weixin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

wxss和css的关系

wXSS 具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。
与CSS相比，WXSS扩展的特性有:

  • rpx尺寸单位
  • @import样式导入

同时wxss和css都有通用的选择器和通用的样式规则。

rpx单位

rpx ( responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx实现原理

rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)。

  • 在较小的设备上，1rpx所代表的宽度较小
  • 在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。