[Wondgirl] 入门系列教程《三》模板的使用、事件

在上篇文章的基础上,我们新建一个模版目录templates, 
在里面创建一个头部模板header.wxml和一个底部模板footer.wxml.

header.wxml:

<text>
头部
</text>

• 1
• 2
• 3

• 1
• 2
• 3

footer.wxml:

<template name="footer1">
底部1
{{text}}
</template>

<template name="footer2">
底部2
</template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

在first.wxml里引用头部模板

<include src="../templates/header"/>

• 1

• 1

在first.wxml里引用底部模板

<import src="../templates/footer" />
<template is="footer1" data="{{text:'导入设置的内容...'}}"/>

• 1
• 2

• 1
• 2

运行结果如下: 

二：事件

官方解释什么是事件

事件是视图层到逻辑层的通讯方式。  事件可以将用户的行为反馈到逻辑层进行处理。  事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。  事件对象可以携带额外信息，如 id, dataset, touches。

事件分类

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

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。点击事件,长按事件和触摸事件都属于冒泡事件.  分别是:  点击事件:tap,  长按事件longtap,  触摸事件touchstart,touchend,touchmove,touchcancel.  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。如其他事件submit,input.

事件类型:

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

新建项目:

一.新建一个view1,在view1里面在建一个view2,在view2里面在建一个view3.它们分别绑定自己的样式(class=”view1”)和自己的单击事件(bindtap=”view1click”).

<!--index.wxml-->
<view class="view1" bindtap="view1click">
view1
  <view  class="view2" bindtap="view2click">
  view2
    <view  class="view3" bindtap="view3click">
      view3   
    </view>
  </view>

</view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

/**index.wxss**/
.view1{
  height: 500rpx;
  width:100%;
  background-color: rebeccapurple;
}

.view2{
  height: 400rpx;
  width:80%;
  background-color: red;
}

.view3{
  height: 300rpx;
  width:60%;
  background-color: pink;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  view1click:function(){
    console.log("vlew1click")
  },
  view2click:function(){
    console.log("vlew2click")
  },
  view3click:function(){
    console.log("vlew3click")
  },
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30