小程序开发学习记录（四）

这节，我们来讲一下小程序的开发语言--WXML。

用过vue等开发框架或者使用过双花括号的同学对于本节的内容应该会比较熟悉。

WXML跟vue语法十分的相似，有类似于vue的数据绑定，v-for、v-if、模板（template）的结构。

1.数据绑定：

wxml:

<view>{{message}}</view>

page.js:

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

这里我要提及一下，小程序开发没有双向数据绑定，修改data中message是需要使用以下的语法才能修改（其他知识会在事件中详细讲解），大家可以对比下和vue的区别：

this.setData({
          message :'我要关注xinsir'
        })

2.列表渲染：

wxml:

<view wx:for="{{array}}">{{item}}</view>

page.js:

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

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。当然也可以使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

！！！注意：当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

得到的结果就是：array

3.条件渲染：

wxml:

<view wx:if="{{view == 'xinsir'}}">关注xinsira</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

page.js:

Page({
  data: {
    view: 'xinsir'
  }
})

注意：关键字也需要在双花括号内，例如true/false，不要直接写 wx:if="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

wx:if vs hidden：

官方给出的解释：

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

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

我给的解释就是，hidden就像v-show一样。

4.模板：

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

4.1定义模板：

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

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

4.2使用模板

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

wxml:

<template is="msgItem" data="{{...item}}" />

page.js:

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

以上就是本节分享的内容，如果有建议或者意见的同学请留言~