视图层
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合WXML
,可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
条件渲染
在微信小程序框架中, 我们使用 wx:if="{{boolean}}"
来进行判断是否要渲染该代码块, 当然也有我们习惯的的 wx:elif="{{boolean}}
, wx:else
接下来让我们来做下代码演示.
wx:if使用
index.wxml
<view>
<text class='title'>条件渲染</text>
<switch checked='{{wxif.flag}}' bindtap='switchClick'/>
<text class='block'>switch的选中情况</text>
<text wx:if="{{wxif.flag}}">选中</text>
<text wx:else>未选中</text>
</view>
index.js
data: {
"条件渲染专用":"",
wxif:{
flag : true,
}
},
switchClick :function(){
this.setData({
'wxif.flag': !this.data.wxif.flag
});
}
运行效果
block wx:if
这没什么好说的, 我们在学wx:for
的时候也用过给个例子
<view>
<text class='title'>条件渲染</text>
<switch checked='{{wxif.flag}}' bindtap='switchClick' />
<text class='block'>switch的选中情况</text>
<block wx:if="{{wxif.flag}}">
<text class='test'>选中</text>
</block>
<block wx:else>
<text class='test'>未选中</text>
</block>
</view>
运行效果
wx:if 与 hidden 的区别
因为 wx:if 之中的模板也可能包含数据绑定,所有当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
这个我也不多说什么了, 总的来说若是切换频繁,而且希望实时性更高用hide好, 切换少而且实时性低,用wx:if
好, 但并不是说wx:if
不行只是说他更合适用于低切换的地方