小程序开发之【前端开发】【学习第二节】【五】

接着上一篇说，下面说一下事件对象，如果没特殊说明，当组件触发事件时，逻辑层绑定该事件的事件处理函数会收到一个事件对象

<view bindtap="myevent">view</view>
myevent:function(e){
console.log(e)
},

myevent的参数e便是事件对象，类似于JavaScript事件绑定。
事件对象属性分为三类：BaseEvent，CustomEvent，TouchEvent

BaseEvent为基础事件对象属性：

type：事件类型

timeStamp：事件生成时的时间戳，页面打开到触发所经过的ms

target：触发事件源组件（即冒泡开始的组件）的相关属性集合，属性有：

id：事件源组件的id

tagName：事件源组件的类型

dataset：事件源组件上由data-开头的自定义属性组成的集合

currentTarget：事件绑定的当前组件的相关属性集合，属性包括：

id：当前组件的id

tagName：当前组件的类型

dataset：当前组件上由data-开头的自定义属性组成的集合

<canvas/>中的触摸事件不可冒泡，所以没有currentTarget属性组成的集合

dataset是组件的自定义数据，通过这种方式可以将组件的自定义属性传递给逻辑层。

书写格式为：以data-开头，多个单词由连字符“-”连接，属性名不能大写，最终在dataset中将连字符转成驼峰形式，例如：

<view bindtap="myevent" data-my-name="weixin" data-myage="22">
dataset 实例
</view>
myevent:function(e){
console.log(e.currentTarget.dataset)
},
结果图

CustomEvent为自定义事件对象，TouchEvent触摸事件对象，都继承BaseEvent，customevent只有一个属性detail，通常传递组件特殊信息；TouchEvent属性有：touches，触摸事件，当前停留在屏幕中的触摸点信息的数组；changedtouches，触摸事件，当前变化的触摸点信息的数组，如touchstart,touchmove,touchend,touchcancel，两个属性都是数组格式，以支持多点触摸。每个元素为一个Touch对象。

Touch对象的属性：

identifier：触摸点的标识符

pageX,pageY，clientX,clientY.

...

接下来说一说引用，一个WXML可以通过import或include引入其他WXML文件。区别在于，import引入WXML文件后只接受模板的定义，忽略模板之外的内容，include恰恰相反。具体来说，import引入模板定义，include引入组件。

<import/>的src属性是被引入文件的相对地址，这里就不举例了。

import引用有作用域概念，只能直接使用引入的定义模板，不能使用间接的。意思就是说：如果a.WXML引入了b.WXML，b.WXML引入了c.WXML，那么a.WXML是能使用b.WXML的template，而不能使用c.WXML。

include

页面样式文件（WXSS）

尺寸单位：CSS中原有尺寸单位在不同尺寸屏幕中不能完美实现元素按比例缩放，WXSS在此基础上拓展了两种尺寸单位：rpx（responsive pixel）和rem（root em），这两种尺寸单位都是相对单位，最终会被换算成Px。WXSS规定屏幕宽度为750rpx，如在iphone6在中375px。

rem，WXSS规定屏幕宽度为200rem，在不同的设备有不同的换算比例。

选择器

WXSS实现了CSS的部分选择器。使用规则和CSS一样。这个比较简单，就不举例了。类似HTML，样式除了写在WXSS中也可以通过设置style和class属性来控制样式，一般静态样式都写在WXSS，以免影响渲染的速度。

样式导入

通常为了方便，会将WXSS拆分成多个文件，这时就需要@import在当前WXSS文件中导入其他WXSS文件

@import "xxx.wxss";

这里的路径是相对路径。