微信模板语法

微信模板语法

标签

• 标签
  1. text标签相当于html中的span标签（行内）
  2. view 相当于div标签
  3. checkbox 标签复选框标签
     • 属性
       1. checked属性：控制默认状态（布尔值）checked=“{{true}}”
       2. disabled属性：是否禁用（布尔值）```disabled="{{false}}"
  4. block标签：写代码时候存在的，页面渲染后会移除掉
     • 使用场景：当你需要渲染某些数据是，不想额外的嵌套标签时使用

微信属性

• 数据绑定

  1. 在js文件里的data中写入数据

     Page({
       /**页面的初始数据 */
       data: {
         msg:"Hello",
         num:1000,
         isCheck:true
       },
      })
     

  2. 在wxml文件中渲染data中的数据<view>{{msg}}</view>
  3. 属性绑定<checkbox checked="{{isChecked}}"></checkbox>

• 运算（表达式）

  1. <view>{{这里可以写表达式}}</view>

• 列表渲染

  1. 属性
     • wx:for="{{数组或对象}}"
     • wx:for-item="自定义循环项的名称"
     • wx:for-index="循环项的索引"
     • wx:key="唯一值"
       • wx:key="*this"表示你的循环项是普通数组
         • 普通数组：[1,2,3,4]

  2. 一层循环可以省略wx:for-item和wx:for-index两个属性

  3. 代码

     //数据
     Page({
       /**页面的初始数据 */
       data: {
       list:[
           {
             id:0,
             name:"zhangsan"
           },
           {
             id:1,
             name:"lisi"
           },
         ],
         boj:{
           name:'zahngshanaaa',
           age:10,
           a:'qqqqq'
         }
       },
      })
     

     <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
         {{item.name}}
     </view>
     <!--简写 -->
     <view wx:for="{{list}}" wx:key="id">
         {{item.name}}
     </view>
     

     循环对象

       <view>
           <view>循环对象</view>
           <view wx:for="{{boj}}" wx:key="age">
            对象名称{{index}} 
            对象值{{item}}
           </view>
       </view>
     

• 条件渲染

  1. wx:if="{{条件}}"
     • 实现if，else, if
     • 微信语法
       • wx:elif="{{条件}}"
       • wx:else

     • 直接把标签从dom移除掉

  2. hidden="{{条件}}"
     -> 通过添加样式的方法来控制是否显示的
  3. 什么场景使用哪个
     • 当标签不是频繁切换时使用wx:if
     • 当标签频繁切换时使用hidden