微信小程序学习——框架视图层（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事件绑定可以阻止事件冒泡向上冒泡。