微信小程序获取e.target.id和e.currentTarget.dataset.id

1.需求

page1展示一个列表，选中列表中的一项，获取该项的一些属性值，set到缓存里。

page2 onLoad时从缓存里读取这个缓存，进行使用。

2.原始代码

①page1的xml文件 列表

<view wx:for="{{courseList}}">
    <template is="course_temp" data="{{item}}"></template>
  </view>

每一项 如下

<template name="course_temp">
  <view class='course_tap' data-name="{{item.courseName}}" id="{{item.courseId}}" bindtap='chooseCourse' >
    <text class='course_name'>{{item.courseName}}</text>
    <text class='course_teacher'>{{item.teacher}}</text>
  </view>
</template>

②在page1.js中，响应点击事件，用e.target.id读取被选中组件的id值。

chooseCourse: function (e) {
    console.log("你选择的课程id是"+e.target.id);
    wx.setStorageSync('courseId', "" + e.target.id);
    wx.setStorageSync('courseName', e.currentTarget.dataset.name);
    wx.navigateTo({
      url: '../../pages/reaction/reaction'
    })
  },

3.bug来了

在page2中，从缓存里读取courseId.

var id = wx.getStorageSync('courseId');

有时候能获取到，有时候就为null！！！找了很久，最开始以为缓存有问题。后来发现，bug出现的时候，从e.target.id开始就已经是null了。思考之后，courseList会有刷新操作，猜测出现了id相同的项，微信小程序可能进行了处理，导致部分组件id为空。把courseId改到 data-id中，重新获取。

<template name="course_temp">
  <view class='course_tap' data-name="{{item.courseName}}" data-id="{{item.courseId}}" bindtap='chooseCourse' >
    <text class='course_name'>{{item.courseName}}</text>
    <text class='course_teacher'>{{item.teacher}}</text>
  </view>
</template>

js中的获取修改为 e.currentTarget.dataset.id，测试之后发现没有问题了！

chooseCourse: function (e) {
    console.log("你选择的课程id是  new" + e.currentTarget.dataset.id);
    wx.setStorageSync('courseId', "" + e.currentTarget.dataset.id);
    wx.setStorageSync('courseName', e.currentTarget.dataset.name);
    wx.navigateTo({
      url: '../../pages/reaction/reaction'
    })
  },

4.错误总结

总结起来，view标签中的id属性，不要瞎用；"data-"后面可以接多种名字，足够我们用了。