小程序的WXML动态模板语法详解

曾经终败给现在 2023-03-13 06:09 19阅读 0赞

## WXML动态模板语法详解 ##

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

1.  数据绑定
2.  条件渲染
3.  列表渲染
4.  事件处理

**数据绑定**

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

这是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'
        }
    
      }
    })

效果：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]

**条件渲染**、

*  wx-if
 *  wx-elif
 *  wx-else

**本质上用法和vue的v-if v-if else 和 v-else 一样，当对应的分支的值为true就显示**  
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的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]  
良好的，就是数字在90到80之间：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 2]  
其它数值只需要改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>
    
    
    </view>

可以对 index 和item起别名：

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

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

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 3]

**事件处理**  
[支持的事件类型][Link 1]

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

<view class="tab">
    
      <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>
    
    
    </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
        })
      },
     
    
    })

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 5]  
**绑定事件方式**

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

**控制事件捕获**

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

<view capture-catch:tap='handleParent'>
      <view capture-bind:tap='handleChild'>点击</view>
    </view>

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/84b46a16cf19407eb874b29b7f53ab7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/ed042153b5b944f1a702e06f97537702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/5fedffae9e9149e78b0a9ae9110eb279.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230312/b66c26ab9566433fa8029cdb00b726d0.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230312/a3beee52e7b44a76b43452a5720c8d45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230312/1c20b1cd2f7143e9ab2de921daa73c06.png