小程序的WXML动态模板语法详解-蒲公英云

WXML动态模板语法详解

对于WXML的动态语法，简单的分类为：

数据绑定
条件渲染
列表渲染
事件处理

数据绑定

基础数据绑定
组件值数属性绑定：插值表达式的信息可以插入到属性中
插值表达式内部支持计算
对象操作：访问对象中的属性值(对象名称.属性名称）

这是wxml的相关代码：

<view> 你好，{ { uname}}
</view> <!-- 属性的值也可以是动态的 --> <view data-uid='{ { uid}}' class='{ { cls}}'>测试属性</view> <!-- 支持简单计算 --> <view>{ { 1 + 1}}</view> <!-- 支持复据展示 --> <view>
  { { info.age + '--------' + info.gender}}
</view>

这是wxss的相关代码：

.data-uid{ 
  width:200rpx;
  height: 150px;
  background:red;
}

这是js的相关代码：

只看data部分即可

// pages/jichu/jichu.js
Page({ 
  /** * 页面的初始数据 */
  data: { 
    background: ['red', 'pink', '#ccc'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
    uname: '张阳光',
    cls: 'data-uid',
    info: {  age: 23, gender:'按钮'}
  },
  changeIndicatorDots() { 
    this.setData({ 
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay() { 
    this.setData({ 
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) { 
    this.setData({ 
      interval: e.detail.value
    })
  },
  durationChange(e) { 
    this.setData({ 
      duration: e.detail.value
    })
  },
  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) { 
  },
  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady: function () { 
  },
  /** * 生命周期函数--监听页面显示 */
  onShow: function () { 
  },
  /** * 生命周期函数--监听页面隐藏 */
  onHide: function () { 
  },
  /** * 生命周期函数--监听页面卸载 */
  onUnload: function () { 
  },
  /** * 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh: function () { 
  },
  /** * 页面上拉触底事件的处理函数 */
  onReachBottom: function () { 
  },
  /** * 用户点击右上角分享 */
  onShareAppMessage: function () { 
    return { 
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  }
})

效果：在这里插入图片描述

条件渲染、

wx-if
wx-elif
wx-else

本质上用法和vue的v-if v-if else 和 v-else 一样，当对应的分支的值为true就显示
wxml相关代码：

<!--pages/jichu/jichu.wxml--> <view class="container"> <view wx:if='{ { score>=90}}' class="{ { cls}}">优秀</view> <view wx:elif='{ { score<90&&score>=80}}' class="{ { cls}}">良好</view> <view wx:elif='{ { score<80&&score>=60}}' class="{ { cls}}">一般</view> <view wx:else class="{ { cls}}">just so so</view> 
</view>

wxss相关代码：

.container{ 
  width:  730rpx;
  height: 450rpx;
  margin: 10rpx auto;
  padding: 5rpx;
  border-radius: 20rpx;
  background-color: #ccc;
}
.data-uid{ 
  margin: 150rpx auto;
  width:200rpx;
  height: 50px;
  background:red;
  text-align: center;
  line-height: 100rpx;
  color: #ccc;
}

js相关代码：

Page({ 
  /** * 页面的初始数据 */
  data: { 
    score: 40,
    cls:'data-uid'
  },
})

效果：
分数小于60的：
在这里插入图片描述
良好的，就是数字在90到80之间：

其它数值只需要改data对应的值就好了。显示效果一样。、

相关补冲：
当你需要同时控制好几个标签一起显示隐藏的时候，可以通过 block 内放置 wx:if ,因为在微信小程序中,block标签类似于vue的template标签不会进行渲染]

hidden属性和wx:if的区别

类似于vue中的中v-if和v-show的区别
- 内置组件都有一个hidden属性：如果值为false就显示，为true就不显示
- 通过hidden控制标签渲染的话，无论是否显示内容，实际上都进行了渲染，类似于vue中的v-show
- 应用场景：如果要频繁的控制组件的显示或者隐藏，那么推荐使用hidden

列表渲染

wx:for
wx:key 的作用：保证兄弟节点被唯一区分，主要用于提高性能

wx:for和vue的v-for一样
都是基于数据对标签进行对应的重复渲染，数据多少标签渲染多少，对象和数组都可以渲染

<view class="container" wx:for='{ {examination}}' wx:key='{ {index}}'>
  <view  class="{ {cls}}">{ { index}} { { item}}</view>
<!-- 默认item表示其中一项数据 -->
<!-- 默认index表示数据项的索引 -->
</view>

可以对 index 和item起别名：

wx:for-index 给索引起别名为num
wx:for-item 给数据项起别名为 name

{ { num}} { { name}}

.container{
width: 730rpx;
height: 450rpx;
margin: 10rpx auto;
padding: 5rpx;
border-radius: 20rpx;
background-color: #ccc;
}
.data-uid{
margin: 150rpx auto;
width:200rpx;
height: 50px;
background:red;
text-align: center;
line-height: 100rpx;
color: #ccc;
}

Page({

/* 页面的初始数据 */
data: {
```
score:85,
cls:'data-uid',
examination: ['优秀', '良好', '一般','just so so']
```
},

})

效果：
在这里插入图片描述

事件处理
支持的事件类型

事件的绑定方式：bind:【事件名称】， bindchange=“changeAutoplay”
js文件中定义事件的处理函数

<view class="tab">
<!-- bandleChange 表示 change事件   tap是事件名称 -->
  <view class="title" bind:tap='handleChange'>
    <button wx:key='{ {item.id}}' wx:for='{ {tabData}}' data-id='{ {item.id}}' class="{ {currentId === item.id? 'bj active': ''}}">{ { item.name}}</button>
  </view>
<view   wx:key='{ {item.id}}' wx:for='{ {tabData}}' class=" content { {currentId === item.id?'active container': 'show'}}">
  <view  class="{ {cls}}">{ { item.content}}</view>
<!-- 默认item表示其中一项数据 -->
<!-- 默认index表示数据项的索引 -->
</view>
  <!-- <view wx:key='{ {item.id}}' wx:for='{ {tabData}}' class="content { {currentId === item.id?'active': ''}}">{ { item.content}}</view> -->
</view>
.title{ 
  display: flex;
}
button{ 
  flex: 1;
}
.bj{ 
  background: #ccc;
}
.show{ 
  display: none;
}
.container{ 
  width:  730rpx;
  height: 450rpx;
  margin: 10rpx auto;
  padding: 5rpx;
  border-radius: 20rpx;
  background-color: #ccc;
}
.data-uid{ 
  margin: 150rpx auto;
  width:200rpx;
  height: 50px;
  background:pink;
  text-align: center;
  line-height: 100rpx;
}
Page({ 
  /** * 页面的初始数据 */
  data: { 
    score:85,
    cls:'data-uid',
    examination: ['优秀', '良好', '一般','just so so'],
    // 选项卡当前选中的ID
    currentId: '1',
    tabData: [{ 
      id: '1',
      name: '张阳光',
      content: '优秀'
    }, { 
      id: '2',
      name: 'tom',
        content: '良好'
    }, { 
      id: '3',
      name: 'spike',
        content: '一般'
    }, { 
      id: '4',
      name: 'kitty',
      content: 'just so so'
    }]
  },
  handleChange(e) { 
    // console.log(e.target.dataset.id)
    this.setData({ 
      // 通过自定义属性获取按钮的id，进而更新当前的选中状态，进而影响类名的变化
      currentId: e.target.dataset.id
    })
  },
})

效果：
在这里插入图片描述

绑定事件方式

bind 事件绑定不会阻止冒泡事件向上冒泡
catch 事件绑定可以阻止冒泡事件向上冒泡

控制事件捕获

capture-bind 不阻止捕获事件向内部传递
capture-catch 阻止捕获事件向内部传递

点击

事件对象：可以通过事件函数获取

currentTarget和target的区别：
- 如果是事件源的话，currentTarget和target相同
- 需要区分事件源和冒泡发生的事件行为
- target表示事件源，就是实际触发事件的组件
- currentTarget表示当前触发事件的组件，有可能是冒泡触发的事件
- 如果要获取触发组件的data-数据，要使用event.target.dataset获取属性的数据