微信小程序视图层学习笔记（1）

WXML
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看 WXML 具有什么能力：
1.数据绑定（WXML 中的动态数据均来自对应 Page 的 data。）

<!--wxml-->
<view> {{message}} </view>


// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

这里介绍一下JS和JSON的区别，json是（javascript object notation）是一种轻量级的数据交换格式，json格式的数据，主要是为了跨平台交流数据用的。它是从JavaScript对象中演变过来的，是js的一个子集。json只有字符串形式，key-value形式。json和xml文件是如出一辙的，只不过比xml文件轻便。

算数运算

<view> {{a + b}} + {{c}} + d </view>

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

view中的内容为 3 + 3 + d。

字符串运算

<view>{{"hello" + name}}</view>

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

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

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

最终组合成数组[0, 1, 2, 3, 4]。

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 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}。
2.列表渲染

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


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

for循环遍历12345，以列表形式输出
3.条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>



// page.js
Page({
  data: {
    view: 'MINA'
  }
})

4.模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>



// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

运行结果如下：
在wxml中，标签中的内容是要显示的，js中的内容作为提供变量的，提高代码的灵活性。

5.事件

<view bindtap="add"> {{count}} </view>


Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})