微信小程序：第五天
1.视图层层
视图层主要有页面描述文件和页面样式文件组成。
创建示例项目index页面的视图如下：
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
可以看到，其和html文件基本大致一样，后面我们需要实战的时候掌握其组件，所以我们需要自己将其都熟悉一下，方面便于我们以后的项目开发，也利于我们以后的工作，可以做到心中有数。
2.数据绑定
示例代码中有如下代码：
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
这就是小程序中的数据绑定。
3.条件渲染
条件渲染其实高级的数据绑定，在绑定的时候加以判断。
<view wx:if="{{condition}}"> True </view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
4.列表渲染
列表渲染就是循环绑定数据
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
5.模板
在微信小程序中，如果需要重复使用几个组件，这时，我们应该想到模板。
5.1定义模板
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
5.2使用模板
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
6.引入
我们不仅可以引入当前文件下的模板文件，我们还可以引入其他模板的文件，小程序为我们提供了两个引入方式：
6.1import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
6.2include
include可以将目标文件除了template的整个代码引入，相当于是拷贝到include位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
7.页面的事件
7.1页面事件分为两大类型：
1.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2.非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
7.2冒泡事件的类型：
- touchstart 手指触摸动作开始
- touchmove 手指触摸后移动
- touchcancel 手指触摸动作被打断，如来电提醒，弹窗
- touchend 手指触摸动作结束
- tap 手指触摸后马上离开
- longtap 手指触摸后，超过350ms再离开
7.3事件的绑定如下：
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
这一天主要在学习视图层的wxml，详细文档请看官方文档。