微信小程序实战 (WXML:小程序版HTML)

上一篇讲了小程序框架基础，这一篇介绍WXML:小程序版HTML。

1.标签与属性

常用基础标签text view

特征：

text 类似html span标签 行内元素，不换行；

view 类似html div标签 块级元素，换行；

新建页面

text 类似html span标签 行内元素

，不换行

view 类似html div标签 块级元素

view 类似html div标签 换行
复制代码

测试

公共属性

所有组件都有以下属性：

2.数据绑定

数据绑定功能使得程序在运行过程中,具备动态改变渲染界面的能力,从而达到了更好的用户体验效果。在

WEB开发中,需要借助JavaScript并通过DOM接口来实现界面的动态更新,而在小程序中,则是使用WXML

语言提供的数据绑定功能来实现的。
复制代码

2.1简单数据绑定

  data: {
    id:1, message: 'Hello MINA!', 
    number:1234, 
    condition:true, 
    isChecked:true, 
    person:{ name:"张三", age:25, sex:"男" }
  },
复制代码

{{message}} 
{{number}} 
{{condition}} 
{{isChecked}} 
{{person}} 
{{person.name}} 
{{person.age}} 
{{person.sex}}  
自定义属性  
组件属性  
控制属性  

复制代码

测试：

2.2运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式

2.2.1 三元运算

如果flag条件是true 则hidden =true 如果flag条件是false 则hidden =false

复制代码

2.2.2 算数运算

 {{a + b}} + {{c}} + d 
复制代码

    a: 1, 
    b: 2, 
    c: 3
复制代码

2.2.3 逻辑判断

当length大于5时展示逻辑判断

逻辑判断
复制代码

2.2.4 字符串运算

{{"hello " + name}}
复制代码

2.2.5 数据路径运算

{{object.key}} {{array[0]}}
复制代码

    object: { key: ' 数据路径运算 ' },
    array: ['MINA','safsd']
复制代码

3.列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。(就是说数组有多少条数据，他就会渲染该组件多少次)

    userArray:[ 
      { id:1, name:"张三" },
      { id:2, name:"李四" },
      { id:3, name:"王五" } 
    ]
复制代码

 {{index}}-{{item.id}}-{{item.name}} 
复制代码

测试

4.条件渲染

4.1 wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

 True 
复制代码

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

 1 
 2 
 3 
复制代码

4.2 block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使

用一个 标签将多个组件包装起来(这样避免每个组件都要写一遍 wx:if判断条件)，并在上边使用 wx:if 控制属性。

 view1 

 view2 


复制代码

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

4.2 hidden 与 wx:if

使用

复制代码

他们有什么区别呢?

wx:if 也是惰性的，如果在初始渲染条件为 false ，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
复制代码

他们的使用场景

一般来说， wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
复制代码

5.模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

5.1定义模版

使用 name 属性，作为模板的名字。然后在 template 内定义代码片段，如：

复制代码

5.2使用模版

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：