小程序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嘛。。。