微信小程序学习——框架视图层（view）

视图层是有WXML与WXSS编写的，由组件来进行展示。

WXML(WeiXin Markup Language)用于写页面结构的。

WXSS(WeiXin Style Sheet)用于页面的样式。

组件(Component)是视图的基本组成单元。

一、数据绑定

组件属性(需要在引号之内)

<view id="item-{{id}}"></view>

page({
   data: {
       id: 0 
    } 
})

控制属性

<view wx:if="{{condition}}"></view>

page({
   data: {
        condition: true
    } 
})

二、列表渲染

wx:for

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

page({
   data: {
        array: [
            {message: 'foo'},
            {message: 'bar'}
        ]
    } 
})

使用 wx:for-item 可以指定数组当前元素的变量名。

使用 wx:for-index 可以指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="id" wx:for-item='arr'>
    {{id}}: {{arr.message}}
</view>

三、条件渲染 wx:if

wx:if...wx:elif...wx:else

<view wx:if="length > 5">1</view>
<view wx:elif="length > 2">2</view>
<view wx:else>3</view>

四、模板

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


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

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

四、事件

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

page({
   tapName: function(e) {
      console.log(e)    
   } 
})

事件分类：冒泡事件和非冒泡事件

1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件列表

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longtap	手指触摸后，超过350ms再离开

注：除表上之外的其他组件自定义事件都是非冒泡事件。

事件绑定：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止事件冒泡向上冒泡。