微信小程序通过模板语法实现页面渲染以及动态功能
数据绑定
普通数据绑定
将json格式通过数据名来将数据显示在页面上
- 在页面的js文件中编写Page方法,Page方法中编写data属性,data属性中添加json数据
Page({ //方法
data: { //属性
msg:"hello", //字符串类型
num:1000 //数字类型
isGril:false, //bool类型
person:{ //对象Object类型
age:12, //对象属性
height:180,
weight:160,
name:"富婆"
}
}
}
)
- 在wxml文件中添加view标签, 用两个花括号包裹数据名
<view>{{msg}}</view>
<view>{{num}}</view>
<view>是否是女孩{{isGril}}</view>
<!-- 对象类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 在标签的属性使用
页面上只能显示自定义属性几个字
打开调试器的wxml页面里面的data属性带有数值
注意: 数据名用双引号包裹
-->
<view data-num="{{num}}">自定义属性</view>
<!-- 使用bool类型充当属性,选择框
checkbox是选择框,默认是不选中,true是选中
""与{}之间一顶不能有空格,会导致识别失败
-->
<view>
<checkbox ></checkbox>
<checkbox checked="true"></checkbox> <!--选中-->
<checkbox checked="{{isGril}}"></checkbox>
</view>
简单的运算(表达式)
在{{}}中添加表达式
表达式:数字运算、字符串拼接、逻辑运算、三元表达式
<!-- 数值运算 -->
<view>{{1+1}}</view>
<!-- 字符串拼接 -->
<view>{{"a"+"b"}}</view>
<!-- 三元运算符 -->
<view>{{11%2==0 ? '偶数' : '奇数'}}</view>
列表渲染(循环)
语句:if else 、switch 、 do while 、for
数组和对象循环
数组列表循环
wx:for="{{数组或对象}}" 数组的名称
wx:for-item="循环项的名称" 数组的项的值
wx:for-index="循环项的索引" 数组的索引值,相当于数组下标''
一般情况下, wx:for-item=“item” 和wx:for-index="index"可以省略不写,小程序会默认把循环项的名称和索引的名称定为 item 和 index
array: [1, 2, 3, 4, 5], //数值数组
list:[ //对象数组
{
id:1,
name:"孙悟空"
},
{
id:2,
name:"八戒"
}
]
<!-- 数组列表循环
wx:for="{{数组或对象}}" 数组的名称
wx:for-item="循环项的名称" 数组的项的值
wx:for-index="循环项的索引" 数组的索引值,相当于数组下标
-->
<view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index">
<!-- 数组下标 -->
索引: {{index}}
<!-- 数组值,list是数组,item是值,是Object对象,需要.属性 -->
值: {{item.name}}
</view>
</view>
<!-- array是数组,{{index}}表示下标, {{item}}表示数组值 -->
<view wx:for="{{array}}"> {{index}}+{{item}} </view>
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值?有如下选择
<!-- wx:key="唯一的值" 用来提高列表渲染性能
wx:key 绑定一个普通的字符串的时候,那么这个字符串的名称 肯定是循环数组中的对象中 的唯一属性
-->
<!--
wx:key="*this" 表示数组是一个普通数组 *this表示循环项
-->
<view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
>
<!-- 数组下标 -->
索引: {{index}}
<!-- 数组值,list是数组,item是值,是Object对象,需要.属性 -->
值: {{item.name}}
</view>
</view>
<!-- array是数组,{{index}}表示下标, {{item}}表示数组值 -->
<view wx:for="{{array}}" wx:key="*this"> {{index}} </view>
对象列表循环
wx:for="{{对象}}"
wx:for-item="对象值"
wx:for-index="对象属性"
页面.js
Page({ //方法
data: { //属性
person:{ //对象Object类型
age:12, //对象属性
height:180,
weight:160,
name:"富婆"
}
}
}
)
页面.wxml
<!-- 对象列表循环 -->
<view>
<view wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{key}}
值:{{value}}
</view>
</view>
block标签
- 占位符标签
- 写代码的时候能看到
- 页面渲染 显示的时候不显示
将view改成block
<!-- block标签 -->
<view>
<block wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{key}}
值:{{value}}
</block>
</view>
block标签类似文本框,不存在换行
view标签,一个数据在一行
控制台中,block标签内不显示标签,只显示数据
条件渲染
wx:if
在框架中,使⽤ wx:if="{{condition}}"
来判断是否需要渲染该代码块:
后期可以把true/false改成bool类型变量,
<!-- 条件渲染 -->
<!-- wx:if={{true/false}} -->
<view>
<view>wx:if</view>
<!-- 显示在页面上 -->
<view wx:if="{{true}}">显示</view>
<!-- 页面上不显示 -->
<view wx:if="{{false}}">隐藏</view>
</view>
<!-- if elif else 用法 -->
<view>
<view>if elif else</view>
<!-- 不显示 -->
<view wx:if="{{false}}">1</view>
<!-- 不显示 -->
<view wx:elif="{{false}}">2</view>
<!-- 显示 -->
<view wx:else>3</view>
</view>
wx:if 是把标签从页面结构移除,看下图控制台的wxml页面结构输出, 性能消耗大
hidden
类似 wx:if,但是不涉及页面结构移动,只是样式上的改变
hidden属性不能和display 样式一起使用,会产生混乱
<!-- hidden-->
<!-- 在标签上直接加上属性hidden,标签内部的内容就不显示了 -->
<view hidden>hidden</view>
<!-- hidden="{{true}}" true标签内容不显示,false标签内容显示 -->
<view hidden="{{false}}">hidden</view>
什么场景下用哪个(if/hidden)
1当标签不是频繁的切换显示优先使用 wx :if直接把标签从页面结构给移除掉,性能损耗大
2当标签频繁的切换显示的时候优先使用hidden通过添加样式的方式来切换显示
频繁切换⽤ hidden
不常使⽤, ⽤ wx:if