微信小程序视图层语法基础

WXML

• WXML的全称是WeiXin Markup Language（微信标记语言），类似于HTML也是一种使用<标签>和</标签>来构建页面结构的语言
• WXML具有数据绑定、列表渲染、条件渲染、模板、事件和引用的能力。

小程序视图层数据绑定语法

1.数据绑定——作用于页面内容

• 在WXML页面中可以使用双花括号{ {变量名}}的形式表示动态数据

//wxml
<view>{
   
   {msg}}</view>

//js
Page({
  data: {
    msg: '你好！'
  }
})

2.数据绑定——作用于组件属性

• 组件的属性也可以使用动态数据，例如组件的id、class等属性值

//wxml
<view id='{
   
   {id}}'>测试</view>

//js
Page({
  data: {
    id: 'myView'
  }
})

3.数据绑定——作用于控制组件

• 控制属性也可以使用动态数据，但必须在引号内

//wxml
<view wx:if='{
   
   {condition}}'>测试</view>

//js
Page({
  data: {
     condition: false
  }
})

4.数据绑定——关键字绑定

• 如果直接在引号内写布尔值也必须用双花括号括起来
• 注意不可以去掉双花括号直接写成wx:if=‘false’，此时false会被认为是一个字符串，转换为布尔值后表示true。

<view wx:if='{
   
   {false}}'>测试1</view>
<view wx:if='{
   
   {true}}'>测试2</view>

5.数据绑定——运算绑定

双花括号内部还可以进行简单的运算，支持的运算方式包括

• 三元运算
• 算数运算
• 逻辑判断
• 字符串运算
• 数据路径运算

<!--WXML页面代码-->
<view>{
   
   {object.key1}} {
   
   {array[1]}}</view> <!--显示的结果是：Hello 2019-->

//JS文件代码
Page({
    data: {
      object: {
        key1: 'Hello ',
        key2: 'Goodbye '
      },
      array: ['2018', '2019', '2020']
    }
})

<!--WXML页面代码-->
<view> {
   
   {'你好'+name}}</view> <!--显示的结果是：你好小程序-->

//JS文件代码
Page({
    data: {
      name : '小程序'
    }
})

<!--WXML页面代码-->
<view wx:if="{
   
   {x > 5}}">该组件将被显示</view>
 
//JS文件代码
Page({
    data: {
      x : 99
    }
})

<!--WXML页面代码-->
<view> {
   
   {a + b}} + {
   
   {c}} + d </view> <!--显示的结果是3+3+d-->

//JS文件代码
Page({
    data: {
      a : 1, b : 2, c : 3
    }
})

<!--WXML页面代码-->
<view hidden='{
   
   {result ? true : false}}'>该组件将被隐藏</view>

//JS文件代码
Page({
    data: {
      result : false
    }
})

6.数据绑定——组合绑定

• 可以在双花括号内直接进行变量和值的组合，构成新的对象或者数组
• 也可以使用…符号将对象内容展开显示
• 如果对象中元素的key和value名称相同，可以省略表达
• 如果存在相同的key名称，后者会覆盖前者的内容

<!--WXML页面代码-->
<view wx:for='{
   
   {[1,2,x,4]}}'>{
   
   {item}}</view> <!--最终组合成数组[1, 2, 3, 4]。-->
//JS文件代码
Page({
    data: {
      x : 3
    }
})

<!--WXML页面代码-->

//JS文件代码
Page({
    data: {
      value1 : 'admin',
      value2 : '123456'
    }
})

<!--WXML页面代码-->
<template is="test" data="{
   
   {…student, gender: 2}}"></template>
//代码最终会组合出一个对象：{ stuID : '123', stuName : '张三', gender: 2}

//JS文件代码
Page({
    data: {
        student : {
            stuID : '123',
            stuName : '张三'
        }
    }
})

<!--WXML页面代码-->
<template is="test" data="{
   
   {x, y}}"></template> 
<!--{
   
   {x:x, y:y}}的简写形式-->

//JS文件代码
Page({
    data: {
        x : '123',
        y : '456'
    }
})

<!--WXML页面代码-->
<template is="test" data="{
   
   {…obj, y, z : 3}}"></template> 
//代码最终会组合出一个对象：{x : 1, y : 6, z : 3}

//JS文件代码
Page({
    data: {
        obj : {
           x : 1, 
           y : 2
        }
        y : 6  //这里与第5行存在相同key名称y，将覆盖前者的值
    }
})

小程序视图层条件语句

条件渲染：wx:if

• 在小程序框架中使用 wx:if="{ {condition}}" 来判断是否需要渲染该代码块。

<!--WXML-->
<view wx:if="{
   
   {condition}}">测试组件</view>

//JS
Page({
    data:{
        condition: true
    }
})

• 可以组合使用0-N个wx:elif加上1个wx:else来添加其他条件

<!--WXML-->
<view wx:if="{
   
   {x > 5}}"> A </view>
<view wx:elif="{
   
   {x > 2}}"> B </view>
<view wx:else> C </view>

//JS
Page({
    data:{
          x: 3
    }
})

• 如果要一次性判断多个组件标签，可以使用标签将多个组件包装起来，并在上使用wx:if控制属性。

<!--WXML-->
<block wx:if="{
   
   {true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

条件渲染：wx:if和hidden属性

• wx:if和hidden属性都可以规定组件的显示和隐藏效果

属性	wx:if	hidden
取值	布尔值，true为显示，false为隐藏	布尔值，true为隐藏，false为显示
渲染	wx:if是惰性的，如果初始渲染条件为 false，框架什么也不做，在条件第一次变成true的时候才开始局部渲染	无论条件是true或false，初始就会被渲染，只是简单的控制显示与隐藏
消耗	更高的切换消耗	更高的初始渲染消耗

• 如果需要频繁切换组件，用 hidden 更好；如果在运行时条件很少发生改变则 wx:if 更好。开发者可以根据实际需要自行选择其中一种属性或两种组合使用。

小程序视图层列表循环

列表渲染：wx:for

1. 小程序在组件上使用wx:for属性实现列表渲染，即同一个组件批量出现多次，内容可以不同
2. 原理：使用wx:for绑定一个数组，然后就可以自动用数据中的每个元素依次渲染该组件，形成批量效果
3. 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
4. 列表渲染用于将数组列表中各项数据内容进行重复渲染，可以提高开发效率。
5. 使用场景:为商品展现、购物车、内容收藏等需要重复显示数据内容的页面，页面结构相同，数据内容存储在数组中
6. 可以使用wx:for-item和wx:for-index自定义当前元素和下标的变量名
7. 可以将wx:for用在标签上，以渲染一个包含多节点的结构块，并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染

<!--WXML-->
<view wx:for='{
   
   {array}}'>学生{
   
   {index}}：{
   
   {item}}</view>

<!—运行结果等同于-->
<view>学生0：张三</view>
<view>学生1：李四</view>
<view>学生2：王五</view>

<!—WXML修改后-->
<view wx:for='{
   
   {array}}' wx:for-index='stuID' wx:for-item='stuName'>
      学生{
   
   {stuID}}：{
   
   {stuName}}
</view>

//JS
Page({
    data:{
        array:[ '张三', '李四', '王五']
    }
})

列表渲染：wx：key

• 使用wx:for的示例均会在Console控制台得到一个warning提示，建议使用wx:key属性来提高wx:for的性能表现
  • 当数据改变导致页面被重新渲染时，会自动校正带有key的组件以确保项目被正确排序并且提高列表渲染时的效率
• 这是由于如果列表中的项目位置会动态改变或者有新的项目添加到列表中，有可能会导致列表乱序。如果明确知道该列表是静态或者顺序不重要，可以选择忽略该提示。
• 若要避免乱序的情况或不想看到该提示，可以使用wx:key属性来指定列表中的项目唯一标识符。wx:key 的值以两种形式提供：
  • 1.字符串：代表在wx:for循环数组中的一个项目属性，该属性值需要是列表中唯一的字符串或数字，且不能动态改变。
  • 2.保留关键字 *this：代表在wx:for循环中的项目本身，这种表示需要项目本身是唯一的字符串或者数字