小程序01---WXML

WXML的语法

概述

WXML（WeiXin Markup Language）是一种标签语言，可以全面类比html。在小程序内起到了和html一样的作用。结合基础组件，事件系统可以构成页面的结构。

• 数据绑定
• 列表渲染
• 条件渲染
• 模板
• 引用

数据绑定

简单绑定

基础用法

双大括号{{}}的语法，对应的数据来自Page()中的data.

<view>{{name}}</view>
<view id="view-{{id}}"></view>
<view wx:if="{{bool}}"></view>
<view checked="{{true}}"></view>

Page({
    data:{
        name:'zhang',
        id:0，
       bool:false    
    }
})

给组件的属性做简单绑定的时候，需要在双引号之内写。
控制属性，也要在双引号之内写。
布尔值关键字也要写在双引号之内。分别代表真值和假值。不能使用checked="false"。

运算

可以在{{}}内进行简单的运算。

<view id="{{bool?a:b}}">
<view>{{a+b-c}}</view>
<view wx:if="{{b}}>2"></view>
<view>{{"hello"+b}}</view>
<view>{{obj.key arr[0]}}</view>

Page({
    data:{
        a:2,
        b:3,
        c:1,
        obj:{
            key:'hello'
        },
        arr:[1,2]
    }
})

分别可以进行三目运算，简单的加减，条件判断，字符串拼接运算，数据的路径运算。

组合

也可以在{{}}内部直接进行组合，构成新的对象或者数组。

<view wx:for="{{zero,1,2,3,4}}">{{item}}</view>
<view data="{{foo:a,bar:b}}"></view>

Page({
    data:{{
        zero:0,
        a:2,
        b:3
    }}
})

最终会分别生成数组和对象。

也可以用...扩展运算符对一个对象展开

<view data="{{...obj1,obj2,e:5}}"></view>

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

但是如果有相同的变量名，后面的变量名会覆盖前面的。

如果{{}}和引号之间用空格，解析的时候也会解析成字符串。

列表渲染

wx:for

渲染列表使用wx:for在属性上绑定一个数组，然后就可以把数组中的每一项渲染出来。

<view wx:for={{index}}:{item}></view>

Page({
    data:{
        arr:[1,2,3,4]
    }
})

item是value，index是key。同时，wx:for也可以嵌套。

<view wx:for={{[1,2,3,4,5,6,7,8,9]}} wx:for-item={{i}}>
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for=item={{j}}>
        {{i}}*{{j}} = {{i*j}}
    </view>
</view>

用wx:for-item表示数组当前元素的value
用wx:for-index表示数组当前元素的key

block wx:for

可以把wx:for作用到<block>标签上，来渲染一个包含多个节点的结构块。

<block wx:for={{['a','aa','aaa']}}>
    <view>{{index}}</view>
    <view>{{item}}</view>
</block>

wx:key

大概是唯一标识之类的功能。

条件渲染

wx:if

使用wx:if="{{condition}}"来判断是否根据逻辑进行条件渲染。

<view wx:if="{{condition}}">show</view>
<view wx:if="{{!condition}}">hide</view>

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

block wx:if

和block wx:for一样，这个可以作用在<block>标签之上，用于一个结构块是否展示。

<block wx:if="{{bool}}">
    <view>{{hello}}</view>
    <view>world</view>
</block>

Page({
    data:{
        bool:true,
        hello:hello
    }
})

wx:if 和hidden

两者都可以让组件隐藏不显示，但是还是有所不同。

wx:if是惰性的，当它为false的时候并不会执行渲染，当为true的时候才会执行渲染。但是hidden就算是不显示也会执行渲染。

所以说，wx:if有更多的切换效率，较少的初始化渲染效率
hidden正好相反，有更多的初始化效率，更低的切换效率。

模板

WXML提供了模板功能，可以在模板中定义代码片段，在不同地方引用。

<template name="msg">
    <view>hello world</view>
    <view>hahaha</view>
</template>

<template is="msg"></template>

用is关键字引用，用name属性声明。

同时，is关键字还支持{{}}的一切语法。比如三目运算来决定具体使用哪一个模板。

模板的作用域

需要指出的是，模板还有自己的作用域，只能使用data传入的数据，以及模板定义文件中定义的<wxs />模块。

<template name="tem1">
    <view>{{arr[0]}}</view>
</template>

<template is="tem1" data="{{arr}}">
</template>

引用

小程序提供两种引用方式。可以在一个WXML中引入另外一个WXML文件，分别是import和include。

import

可以在文件中使用目标文件中定义的
<template>。

//  item.wxml
<template name="item">
    <view>{{text}}</view>
</template>

// newItem.wxml
<import src="item.wxml" /> 
<template is="item" data="{{text}}">
</template>

import也有作用域的概念，只会是目标文件中的<template>，直属import，而不会是目标文件的目标文件。

include

整体拷贝，有点类似velocity中的#include。

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

总结

一句话总结就是，这就是vue嘛。。。