微信小程序模板语法(数据绑定显示)

微信小程序通过模板语法实现页面渲染以及动态功能

数据绑定

普通数据绑定
将json格式通过数据名来将数据显示在页面上

1. 在页面的js文件中编写Page方法,Page方法中编写data属性,data属性中添加json数据

Page({  //方法
  data: {   //属性
    msg:"hello",   //字符串类型
    num:1000       //数字类型
    isGril:false,  //bool类型
    person:{   //对象Object类型
      age:12,         //对象属性
      height:180,
      weight:160,
      name:"富婆"
    }
  }
  }
)  

2. 在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标签

1. 占位符标签
2. 写代码的时候能看到
3. 页面渲染 显示的时候不显示

将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