微信小程序：MINA视图层

最新推荐文章于 2024-03-13 14:58:45 发布

qq_34281962

最新推荐文章于 2024-03-13 14:58:45 发布

阅读量3.8k

点赞数

分类专栏：微信文章标签： app 腾讯微信张小龙微信腾讯

本文链接：https://blog.csdn.net/qq_34281962/article/details/52733878

版权

WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXML具备数据绑定、列表渲染、条件渲染、模板、事件、引用等能力，下面逐一进行详细介绍。

数据绑定使用“Mustache”语法（双大括号）将变量包起来，可以作用于：
内容
<view> { { message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)
<view id="item-{ {id}}"> </view>

Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)
<view wx:if="{ {condition}}"> </view>

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

可以在{ {}}内进行简单的运算，支持的有如下几种方式：
三元运算
<view hidden="{ {flag ? true : false}}"> Hidden </view>
算数运算
<view> { {a + b}} + { {c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

逻辑判断
<view wx:if="{ {length > 5}}"> </view>
字符串运算
<view>{ {"hello" + name}}</view>

Page({
  data:{
    name:"MINA"
  }
})

也可以在Mustache内直接进行组合，构成新的对象或者数组。
数组
<view wx:for-items="{ {[zero, 1, 2, 3, 4]}}"> { {item}} </view>

Page({
  data: {
    zero: 0
  }
})

对象
<template is="objectCombine" data="{ {for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

...展开对象，再构成新的对象
<template is="objectCombine" data="{ {...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
   obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}。

如果对象的 key和value相同，可以直接引用key。

<template is="objectCombine" data="{
     {foo, bar}}"></template>

template是模板，is="objectCombine"是指拼接对象的模板，下文会有模板的详细介绍。

Page({
  data: {
     foo: 'my-foo',
    bar: 'my-bar'
  }
})

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，不会添加出新的变量。
<template is="objectCombine" data="{ {...obj1, ...obj2, a, c: 6}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
    c: 4
    },
    a: 5
  }
})

最终组合成的对象是{a: 5, b: 3, c: 6}

在MINA中，用wx:if="{ {condition}}"来判断是否需要渲染该代码块：

<view wx:if="{
     {condition}}"> True </view>

也可以用wx:elif和wx:else来添加一个else块：

<view wx:if="{
     {length > 5}}"> 1 </view>
<view wx:elif="{
     {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
条件渲染多个组件标签时，使用&

关注