微信小程序slider应用，可加减的slider控制
作者：千枫漓音，来自原文地址页面结构&view class="control-w "&
&block wx:for="{{controls}}" wx:key="id" wx:for-item="v"&
&view class="slide-item"&
&view class="itemName"&{{v.name}}&/view&
&view class="slidewrap"&
&text class="s-con" data-id="{{v.id}}" bindtap="minusCount"&-&/text&
&slider class="slide" bindchange="sliderchange" step="10" value="{{v.value}}" data-id="{{v.id}}" max="{{v.max}}" min="0" wx:if="{{index&3}}" /&
&slider class="slide" bindchange="sliderchange" step="10" value="{{v.value}}" data-id="{{v.id}}" max="{{v.max}}" min="0" wx:if="{{index==3}}" /&
&text class="s-con" data-id="{{v.id}}" data-max="{{v.max}}" bindtap="addCount"&+&/text&
&/view&js结构Page({
controls: [
name: '功能一',
value: 30,
name: '功能二',
value: 30,
name: '功能三',
value: 30,
name: '功能四',
value: 50,
addCount: function (event) {
let data = event.currentTarget.datat
let controls = this.data.controls
let control = controls.find(function (v) {
return v.id == data.id
let control1 = controls.find(function (v) {
return v.max == data.max
if (control.value & control1.max)
control.value += 10;
this.tData({
'controls': controls
minusCount: function (event) {
let data = event.currentTarget.dataset
let controls = this.data.controls
let control = controls.find(function (v) {
return v.id == data.id
if (control.value &= 0)
control.value -= 10;
this.setData({
'controls': controls
sliderchange: function (e) {
let data = e.currentTarget.dataset
let controls = this.data.controls
let control = controls.find(function (v) {
return v.id == data.id
this.setData({
'controls': controls
}})页面样式
------分隔线----------------------------
上一篇：&&&&&&&&&&&&下一篇：
------分隔线----------------------------
[相关文章]Vue和微信小程序的区别、比较
作者：卖女孩的小火柴
segmentfault.com/a/4864
写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。
一、生命周期
先贴两张图：
vue生命周期
小程序生命周期
相比之下，小程序的钩子函数要简单得多。
vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。：页面加载
一个页面只会调用一次，可以在 中获取打开当前页面所调用的 query参数。
onShow：页面显示
每次打开页面都会调用一次。
onReady：页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如 wx.setNavigationBarTitle请在 onReady之后设置。详见生命周期。
onHide：页面隐藏
当 navigateTo或底部tab切换时调用。
onUnload：页面卸载
当 redirectTo或 navigateBack的时候调用。
在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在 created或者 mounted中请求数据，而在小程序，会在 或者 onShow中请求数据。
二、数据绑定
vue：vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例：
&img :src="imgSrc"/&
小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。例：
&image src="{{imgSrc}}"&&/image&
三、列表渲染
直接贴代码，两者还是有些相似：
&ul id="example-1"&
&li v-for="item in items"&
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
{ message: 'Foo' },
{ message: 'Bar' }
{ message: 'Foo' },
{ message: 'Bar' }
&text wx:for="{{items}}"&{{item}}&/text&
四、显示与隐藏元素
vue中，使用 v-if和 v-show控制元素的显示和隐藏。
小程序中，使用 wx-if和 hidden控制元素的显示和隐藏。
五、事件处理
vue：使用 v-on:event绑定事件，或者使用 @event绑定事件，例如：
&button v-on:click="counter += 1"&Add 1&/button&
&button v-on:click.stop="counter+=1"&Add1&/button& //阻止事件冒泡
小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event)绑定事件，例如：
&button bindtap="noWork"&明天不上班&/button&
&button catchtap="noWork"&明天不上班&/button& //阻止事件冒泡
六、数据双向绑定
在vue中，只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时， data中对应的值也会相应改变，这是vue非常nice的一点。
&div id="app"&
&input v-model="reason" placeholder="填写理由" class='reason'/&
el: '#app',
但是在小程序中，却没有这个功能。那怎么办呢？
当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 this.setData({key:value})来将表单上的值赋值给 data中的对应值。
下面是代码，可以感受一下：
&input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" /&
bindReason(e) {
this.setData({
reason: e.detail.value
当页面表单元素很多的时候，更改值就是一件体力活了。和小程序一比较，vue的 v-model简直爽的不要不要的。
vue中，通过 this.reason取值。
小程序中，通过 this.data.reason取值。
七、绑定事件传参
在vue中，绑定事件传参挺简单，只需要在触发事件的方法中，把需要传递的数据作为形参传入就可以了，例如：
&button @click="say('明天不上班')"&&/button&
el: '#app',
consloe.log(arg)
在 小程序中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的 data-属性上，然后在方法中，通过 e.currentTarget.dataset.*的方式获取，从而完成参数的传递，很麻烦有没有...
&view class='tr' bindtap='toApprove' data-id="{{item.id}}"&&/view&
toApprove(e) {
let id = e.currentTarget.dataset.
八、父子组件通信
1、子组件的使用
在vue中，需要：
1、编写子组件
2、在需要使用的父组件中通过 import引入
3、在 vue的 components中注册
4、在模板中使用
//子组件 bar.vue
&template&
&div class="search-box"&
&div @click="say" :title="title" class="icon-dismiss"&&/div&
&/template&
export default{
type:String,
default:''
console.log('明天不上班');
this.$emit('helloWorld')
// 父组件 foo.vue
&template&
&div class="container"&
&bar :title="title" @helloWorld="helloWorld"&&/bar&
&/template&
import Bar from './bar.vue'
export default{
title:"我是标题"
helloWorld(){
console.log('我接收到子组件传递的事件了')
components:{
在小程序中，需要：1、编写子组件2、在子组件的 json文件中，将该文件声明为组件
"component": true
3、在需要引入的父组件的 json文件中，在 usingComponents填写引入组件的组件名以及路径
"usingComponents": {
"tab-bar": "../../components/tabBar/tabBar"
4、在父组件中，直接引入即可
&tab-bar currentpage="index"&&/tab-bar&
具体代码：
&!--components/tabBar/tabBar.wxml--&
&view class='tabbar-wrapper'&
&view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'&
&text class='iconfont icon-shouye'&&/text&
&view&首页&/view&
&view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'&
&text class='iconfont icon-shezhi'&&/text&
&view&设置&/view&
2、父子组件间通信
父组件向子组件传递数据，只需要在子组件通过 v-bind传入一个值，在子组件中，通过 props接收，即可完成数据的传递，示例：
// 父组件 foo.vue
&template&
&div class="container"&
&bar :title="title"&&/bar&
&/template&
import Bar from './bar.vue'
export default{
title:"我是标题"
components:{
// 子组件bar.vue
&template&
&div class="search-box"&
&div :title="title" &&/div&
&/template&
export default{
type:String,
default:''
子组件和父组件通信可以通过 this.$emit将方法和数据传递给父组件。
在小程序中
父组件向子组件通信和vue类似，但是小程序没有通过 v-bind，而是直接将值赋值给一个变量，如下：
&tab-bar currentpage="index"&&/tab-bar&
此处， “index”就是要向子组件传递的值。
在子组件 properties中，接收传递的值。
properties: {
// 弹窗标题
currentpage: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: 'index' // 属性初始值（可选），如果未指定则会根据类型选择一个
子组件向父组件通信和 vue也很类似，代码如下：
//子组件中
methods: {
// 传递给父组件
cancelBut: function (e) {
var that =
var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数
this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
//父组件中
&bar bind:myevent="toggleToast"&&/bar&
// 获取子组件信息
toggleToast(e){
console.log(e.detail)
如果父组件想要调用子组件的方法
vue会给子组件添加一个 ref属性，通过 this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：
&bar ref="bar"&&/bar&
this.$ref.bar.子组件的方法
小程序是给子组件添加 id或者 class，然后通过 this.selectComponent找到子组件，然后再调用子组件的方法,示例：
&bar id="bar"&&/bar&
this.selectComponent('#id').syaHello()
小程序和vue在这点上太相似了，有木有。。
*声明：内容与图片均来源于网络（部分内容有修改），版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。
“阅读原文”
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点wxml代码片段
js代码片段
结果 workerId undefined。
OK，重点便在这里。在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。&这里写图片描述&看代码可知，这里是自定义了一个名字为id的dataset，因此在事件函数中，我们可以通过e.currentTarget.dataset.id访问到绑定到该组件的自定义数据。
主要修改了 e.currentTarget.dataset.workerid.
workerId –& workerid 解决。
阅读(...) 评论()item中不用每个view都这是点击事件和data
点击事件代码：
主要是通过e.currentTarget获取而不是e.target
onlineClick:function(e){
var bean = e.currentTarget.dataset.bean
console.log(bean)
if (bean){
微信小程序 触控事件
微信小程序 触控事件：
转：http://www.jb51.net/article/94936.htm
微信小程序的&事件&挺有意思。看了说明文档后发现它的功能很全，事件可以...
微信小程序 wx:for 点击事件
为列表的每个小项都添加点击事件，并获得每个项的一些数据。wxml中：
&view wx:for=&{{array}}&&
微信小程序——绑定点击事件
微信小程序出来了那么长时间了，之前一直准备升学和毕业设计（过段时间我要写一写我的毕业设计），最近马上毕业了，终于有时间来研究一下了，先从最简单的点击事件开始吧！首先我们在test.wxml中加入以下代...
小程序列表条目点击
每个项目列表是必不可少的，有了列表就要点击列表条目左一些操作，我这里是点击条目获取到位置传给上一页(add页)并显示
&view class='...
小程序点击获取循环列表中的内容
小程序使用wx:for来循环展示列表(展示上一节地图的关键词)这两天在做小程序的时候还真不是很习惯小程序
使用wx:for循环，并给每一项绑定一个点击事件
【微信小程序之页面跳转】从列表的item项跳转到下一个页面
很多项目都会有消息记录页，即列表页，紧接着就是点击列表的某一项进入到消息的详情页，本文承接上一篇博客，继续分享如何从列表的item项跳转到下一个页面。
一、效果图从左边的列表页调到右边的详情页二、页面...
微信小程序之点击列表的item带参数跳转界面
1.在js文件里写个界面跳转的事件处理函数gotableinfo，var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标，...
微信小程序项目总结：for循环，绑定点击事件，二维数组列表渲染 ...
一：for循环，绑定点击事件
分享者：larry6，原文地址
最近公司有小程序的项目，本人有幸参与其中，一个项目做下来感觉受益匪浅，与大家做下分享，欢迎沟通交流互相学习。
先说一下此次...
微信小程序实现给循环列表添加点击样式
微信小程序有个属性hover-class=’active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码:
从点击事件看微信小程序的数据传递
最近用微信小程序做了一个电影类APP，业务逻辑不难，但在做最后一个页面时遇到了一个诡异的问题，这个问题让我对小程序框架里的事件和数据绑定有了更深的认识。...
没有更多推荐了，微信小程序，学习笔记（一）框架，视图层
时间： 01:45:22
&&&& 阅读：358
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&微信小程序，学习笔记（一）框架，视图层
学习链接：
因为其实并非原创，但是并没有什么好的类别可选，所以修改成：“翻译”了。
文档结构介绍
--- [D] pages
--- [D] utils
--- [F] app.js
--- [F] app.json
--- [F] app.wxss
全局变量、对象、方法
应用程序全局实例，在app.js中定义，每个程序只有一个实例，可以通过如下方式获取
var app = getApp();
该对象内容，全局属性或全局方法可以在这里面定义
onLaunch: function () { ...... },
getUserInfo: function () { ...... },
globalData： {
userInfo: null
globalIndex: 0
使用方法：
var app = getApp();
var userInfo = app.globalData.userI
var index = app.globalI
视图层（View）
数据绑定（{{}}）和条件渲染（wx:if）
使用两个嵌套的大括号方式
name: ‘lizc‘,
condition: true,
str: ‘world‘
普通绑定：
&view&{{name}}&/view&
组件属性绑定: 必须使用引号引起来，在js改变index值的时候，页面会自动刷新最新值
&view id="item-{{index}}"&&/view&
控制属性：即属性值是需要通过满足一定条件达到目的
&view wx:if="{{condition}}"&&/view&
也可以是条件表达式，或运算表达式：
&view hidden="{{flag ? true : false}}"&&/view&
多级条件判断，如：if ... elif ... else
wx:if="{{flag !== 0}}&flag不为0的时候才显示这个view&
wx:elif="{{flag & 0 && flag & 8}}&flag取值在 0 ~ 8 之间的值时候显示这个&
wx:else&上面两个都不满足显示条件的时候就会显示这个&
使用&block&块标签来使用条件判断控制多个组件的行为，&block&只起到分组的作用，并不会真的渲染到出来
wx:if="{{flag & 0}}&
&{{a}} + {{b}} + c&
&‘hello‘ + {{str}}&
其实和普通类型绑定差不多
&{{obj.name}} + array[0]&
PS: 使用条件来控制view时候，和hidden属性的比较
- view的条件判断，会在条件中的值发生变化的时候，会先销毁原先的，然后满足条件的时候重新渲染和销毁
- hidden属性控制view的显示和隐藏，这个属性的组件始终会被渲染，只是在需要的时候控制它的隐藏和显示
最后比较得出：如果需要频繁频繁切换的情况下用hidden属性控制，如果在绑定的数据基本不变的情况下使用wx:if条件来控制
列表渲染（wx:for）
wx:for，可以同时生成多个元素
参数属性说明：
wx:key="unique..."：指定组件的唯一标识，列表发生变化需要保持自身的状态和特征不发生变化，并且能在重新渲染的时候，重新排序；
wx:key="*this"：功能同上，但这个是要求项目中的item本身是唯一的，也就是你需要用到的属性值是唯一；
wx:for-index="index"：指定循环的下标变量名，默认：index；
wx:for-item="item": 指定当前项变量名，默认：item
wx:for="{{dates}} wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}} class="ctl-list-row"&{{dates[index + idx].desc}}&
// dates： 需要遍历的数据对象
// ‘unique‘： 数据项的唯一标识符
// ‘idx‘： 指定的下标变量名
// ‘date‘：指定的当前数据的变量名
// 指定之后可以在属性中直接使用‘idx‘, ‘date‘变量，例如，上例的‘id‘: "ctl-list-{{idx}}，这里就用到了‘idx‘来添加属性‘id‘
// 生成后的实际结果：
class="ctl-list-row" id="ctl-list-0"&1/4&
class="ctl-list-row" id="ctl-list-1"&1/3&
class="ctl-list-row" id="ctl-list-2"&1/2&
class="ctl-list-row" id="ctl-list-3"&1/1&
class="ctl-list-row" id="ctl-list-4"&12/31&
class="ctl-list-row" id="ctl-list-5"&12/30&
class="ctl-list-row" id="ctl-list-6"&12/29&
模版（template）
用来定义代码片段，完成之后可以在其他地方通过模版直接套用该模版中组件。
模版定义：
name="tplName&
&text&{{index}}{{msg}}{{date}}
模版使用：通过模版名称
tplName" data="{{...item}} /&
// 数据，模版所需要的数据
msg: ‘hello‘,
date: ‘‘
// wxml结构中效果：
&0: hello template&
// 实际显示效果：
0： hello template, Date:
模版和列表wx:for结合使用，同时生成多个模版
使用的时候使用半闭合标签，以及需要使用到is=""来指定模版名称去使用的指定模版
&template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-item="it" /&
// wxml结构中效果
&text&0: hello template&/text&
&text&, Date: 2017-1-4&/text&
&view&...&/view&
&view&...&/view&
&view&...&/view&
// 显示效果，即多个重复模版
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
// 尝试了下去修改 index 值，未成功，暂时还不知道怎么弄
&template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-index="index" wx:for-item="it" /&
运行时通过条件判断来决定使用哪个模版
name="tpl1"&
&template first&
name="tpl2"&
&template first&
// 运行时根据`is=""`中的语句来判断，决定使用的是‘tpl1‘还是‘tpl2‘
wx:for="{{[1, 2, 3, 4, 5, 6]}}&
is="{{item % 2 === 0 ? ‘tpl2‘ : ‘tpl1‘}} /&
PS: 生成的模版拥有自己独立的作用域，因此所使用的数据必须是data=中指定的数据
点击事件：bindtap
例如：&button class="button button-refresh" bindtap="refreshDateTbl"&refresh&/button&
refreshDateTbl: function ( event ) {
var that = this,
index = that.data.index + 1,
len = that.data.dates.
if ( index &= len ) {
index = 0;
that.setData({index: index});
console.log( event );
从输出结果得出，event 对象主要包含以下部分
事件对象：event
原生事件属性列表：
type: 即当前事件类型（tap / touch）；
currentTarget：表示当前组件信息集合；
target: 通过打印看了下，console.log( event.currentTarget == event.target ); 结果：false，说明 currentTarget 和 target 不是同一个对象，但是里面的东西应该都是当前目标的属性(不是很确定)；看文档解释是：触发事件的组件的属性集合（currentTarget是当前，target是触发事件的组件，不是很明白区别在哪？？）
timeStamp: 这个时间也不知道是啥，应该不是点击动作时间也不是响应时间，有2.8秒之久。（理解错误，正确：事件生成的时间戳）
自定义事件对象属性列表：
detail: 当前组件的坐标(x, y)；
触摸事件对象属性列表：
touches：这个接触的对象数组，难道是和事件冒泡有关？表示网上冒泡的父对象集合？？瞎猜，应该是：当前触摸事件的触摸点信息数组；
changedTouches: 应该和上面的touches有联系，解释为：当前变化的触摸点信息的数组；
以下是各事件属性的内容，很容易理解
target: id, dataset, offsetLeft, offsetTop，dataset要解释下：表示事件源组件上的自定义属性data-的集合；
currentTarget: id, ‘dataset,tagName`；
dataset：自定义属性集合，其中自定义属性 data- 中必须都为小写，需要使用 - 作为连接符， 自定义后的属性都会出现在事件对象的dataset对象上，举例：
&view data-my-name="lizc" data-myAge="30"&&/view&
最终 name 和 age 可以通过如下方式去调用
event.target.dataset.myName === ‘lizc‘;
event.target.dataset.myage === ‘30‘;
因此推荐使用 - 连接符去书写自定义数据属性
touches：触摸点数组，触摸点对象 Touch 或 CanvasTouch 的集合，表示当前页面上所有触摸点的集合，包含属性：
Touch 对象
identifier： 触摸点标识符，类型：Number，应该是个类似标记的东西，或者索引之类的，唯一；
pageX, pageY：相对于整个文档而言，距离文档左上角的 x 和 y 轴的距离；
clientX, clientY：相对于可是区域而言，xy 轴的距离
CanvasTouch对象：
identifier: 同上；
x, y：这个只有一个坐标，即相对画布左上角而言的坐标；
changedTouches：表示发生变化的触摸点对象集合，比如该触摸点发生了touchstart, touchmove, touchend, touchcancel变化；
detail：跟自定义事件有关，自定义事件携带的数据，不是很明白，具体内容有待考证。
PS1: 中午休息了会，打开代码，随便点击了几下按钮，突然发现这个timestamp可能是什么鬼了！！！
下面是打印
Object {type: "tap", timeStamp: 5053127, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053311, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053496, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054722, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054936, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5055120, target: Object, currentTarget: Object, detail: Object…}
new Date() 一下：
new Date(0)
Thu Jan 01 :00 GMT+0800 (中国标准时间)
new Date(5053127)
Thu Jan 01 :13 GMT+0800 (中国标准时间)
结果发现相差了 1:24:13，这不是刚刚启动程序那会!!!!
从而得出结论：这个timestamp应该就是程序运行的时间，单位：（ms）
PS2: 好傻！！看完事件大概，居然没继续往下看，文档下面就有每个属性的明确解释
timeStamp： 事件生成时的时间戳；我还把它当成了程序运行时间~~~~, 也就是该页面打开到事件触发时的这段时间。
事件类型：冒泡和非冒泡
冒泡事件：（除以下冒泡事件之外的其他事件均为非冒泡事件）
touchstart: 手指刚碰触到屏幕的时候触发的事件；
touchmove：手指触摸后移动时触发；
touchcancel:手指触摸动作被打断，即非正常退出触摸，如来电或短信等；
touchend：手指触摸结束；
tap：手指触摸，即点击事件，触摸即离开；
longtap：手指触摸后超过350ms再离开，会被判定为长按。
非冒泡事件
&form/&标签的submit事件
&input/&标签的input事件
&scroll-view/&标签的scroll事件
特殊事件：
&canvas /&的触摸事件不可冒泡，因此没有 currentTarget，理解：因为不存在冒泡行为，也就是说被点击事件和当前事件组件永远只可能是同一个组件。
target 和 currentTarget 对比分析
测试代码：日期列表，点击日期行，通过事件冒泡去触发父组件的tapDateRow事件
bindtap="tapDateRow" id="ctl-list-date" class="ctl-list-date"&
wx:for="{{dates}} wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}} class="ctl-list-row"&{{dates[index + idx].desc}}&
// tap 后输出：
// 点击的当前行，即：event.target
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
// 绑定事件的组件，即：event.currentTarget
Object {id: "ctl-list-date", offsetLeft: 0, offsetTop: 0, dataset: Object}
从输出可知，target即你点击的那个组件，也就是触发点击事件的组件，而 currentTarget 是你绑定点击事件的那个组件，如果点击事件句柄同时绑定在被点击的那个组件上，那么这两个对象是不是应该是指同一个组件呢？（猜测对一半错一半，验证如下：）
&view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row"&{{dates[index + idx].desc}}&/view&
tapDateRow: function ( event ) {
console.log( event.target );
console.log( event.currentTarget );
console.log( event.currentTarget === event.target );
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
结论：通过输出可知，两个对象的内容是一模一样的，说明这两个属性都是代表着当前被点击的组件，但是两者却不是指向同一个空间，即该组件。说明这两个对象具有自己独立的内存空间，而非在绑定事件和触发事件对象相同时都指向同一个内存空间。
事件绑定：bind 和 catch，即冒泡和非冒泡
bindtap, bindtouchstart, bindtouchmove, bindtouchcancel,
bindtouchend, bindlongtap, ......
catchtap, catchtouchstart, catchtouchmove,catchtouchcancel,
catchtouchend, catchlongtap, ......
id="view1" bindtap="f3"&
id="view2" catchtap="f2"&
id="view3" bindtap="f1"&
点击 view3 会调用 f1, 然后调用 f2，到此结束，因为 view2 用的是非冒泡绑定，阻止了事件继续往上冒泡到 view1；
点击 view2 只会调到 f2；
点击 view1 只会调到 f1；
事件总结：
事件对象：event;
事件类型：冒泡和非冒泡；
事件绑定：bindtap, bindtouch*;
事件源和触发源：event.currentTarget 和 event.target;
a. id：事件组件对象的id；
b. target：自定义属性集合 dataset（属性定义：data-my-name，使用：event.target.dataset.myName）;
c. offsetLeft/offsetTop： 事件组件的 left/top 实际值。
事件戳： event.timeStamp，单位：（ms）；
触摸点对象：event.touches（Touch: identifier, pageX/pageY, clientX/clientY; CanvasTouch: identifier, x/y ）；
变化的触摸点对象：event.changedTouches；
自定义事件携带的数据对象：event.detail。
引用外部文件方式：import 和 include，两个引入刚好相反或者说互补，前者是引入文件中的模版代码template，而后者是引入文件中除了template定义的之外的所有代码完整拷贝到当前位置。
使用import引入时不能嵌套引入，即：加入 a.wxml 中引入了 b.wxml 中的模版，然后 b.wxml 引入了 c.wxml 中的模版，那么 a.wxml 中也无法直接引入 c.wxml 中的模版。
name="tplA"&
id="id_a"&&
src="a.wxml" /&
name="tplB"&
id="id_b"&&
// 引入 a.wxml 中模版
is="tplA" /&
src="b.wxml" /&
is="tplB" /&
is="tplA" /&
未报错，只是警告，但也可知import无法嵌套跨文件引入：
Fri Jan 06 2017 15:53:55 GMT+0800 (中国标准时间) WXML Runtime warning
Template "tplA" not found.
这个引入的是除了template定义之外的所有代码，相当于将代码拷贝到当前位置。
name="tplA"&
&AAAAAAAAAAAAAAAAAAAAAAAA&
name="tplB"&
&BBBBBBBBBBBBBBBBBBBBBB&
src="a.wxml" /&
src="b.wxml" /&
结果： 如下，只是单纯引入了除 template 之外的代码，并且是拷贝到 inlucde 使用的当前位置
总结：该文主要是根据 W3CSchool 上的资料，学习记录下来的（后续也会一直学习微信小程序的东西）其实也基本差不多是 copy 到一起了吧，不过这样有助于记忆，没有什么技术含量的东西。最近一段时间有点忙，博客什么的压根都没上过，一个人在负责一块还是感觉有点人手不足的，这段时间几乎每天都是10点，11点多下班，周六还要加班。
忍不住要吐槽，不吐不快。。。。。。
槽点1：组内来了两个应届生，组长之前就说好了让我一个跟着我让我带着，一起帮忙负责这一块，可是说是这么说，中途不停的给他安排其他任务，我总感觉是说安排到我这，就是来打酱油的，最后还是的自己去弄，后面又新接了一个开发的任务，搞的人都快搞虚了，不过也算是乐在其中吧，还是比较喜欢创造新东西，每天不停的去给别人填坑也是种苦，宝宝心里苦~！）
新开发任务总算完结了，后期测试也算告终，其实也不是什么复杂的东西，只是今年刚进公司对公司业务这块并不是非常熟悉，所以花了点时间。现在搞完了自己也算有点成就感，嘿嘿~~！！！
槽点2：来了快一年，接触过无数厂家的前端代码，有些写的复杂的让人头疼，给人感觉就是：我就是要写的这么复杂，甚至对象嵌套多达6-7层（Σ( ° △ °|||)︴），显得我牛逼呀，哈哈~~~，是SB吧 - -！。还有一些厂家代码确实非常不错，对象，原型，闭包，命名等等，都是用的溜溜转，也学到不少东西。
槽点3：代码风格，代码格式，代码规范，规范，规范啊，重要的事情说三遍，包括本公司的代码，和大多数其他厂家的代码，代码几乎没有任何规范，格式缩进命名等等，每次看到那种代码，我真想跳楼，
本来就一个很小的BUG，因为代码问题，硬是要花半天甚至一天才能找到问题点，然后发现其实就是个变量用错地方，或者是哪个单词写错了。
这一年来，经历了很多事情和看了很多代码，对自己要求也严格了
变量名可以稍微长点（不能太长哦，:-)），但一定要表达清楚其意义，让人一看到就知道是干什么的（继续吐槽：全局变量漫天飞，还命名毫无语义感，不找找还真不知道是干嘛的，另外也很少见过全局变量用一种约定方式去定义，比如说：前面统一加上个公司英文符号也好撒，或者你前面加个g/global什么的也好啊，个人比较喜欢用g开头去定义全局变量）；
代码风格，包括缩进，空格的使用，有了进一步的认知和运用；
另外还就是一种思想：面向对象思想，真的很重要，包括新开发的任务上也运用上了，不过水平有限，也只是简单的运用而已；
好了，很久没记录什么了，也快放假回去过年了，虽然最近烦心事多，还是要好好努力下去不是，30岁或许是道砍，也或许不是，端看自己怎么去看待和对待自己的人生了，多年来的感受只有一点：做自己最热爱的事情，让你能彻夜不眠还乐在其中的事情，那才是人生的乐趣，一味的为了生活而生活何尝不是行尸走肉般的活着。
给自己加把油，加油！
这一年来很艰辛，也很感谢我的兄弟朋友们能一直给与我帮助和鼓励，感谢你们！
最后感谢我的老婆，这几年不管风雨不管中间有多少苦难都不离不弃从无怨言，还一直鼓励着我，同时还给我带来一个很可爱的小闺女，谢谢我的老婆，有你的陪伴和鼓励，我会一直努力下去，加油！
2017年，我来了，哈哈哈哈！
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文地址：http://blog.csdn.net/gccll/article/details/
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！