「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」
前言
嗨,大家好，还有几天就要过年了，越到年底是越忙碌的时刻，昨天已经版本迭代发版到凌晨，回家眯了会，下午继续奔赴公司支持。晚上回顾了一下小程序的历程，把遇到的问题就顺手记录一下。
问题
描述
问题是这样的。由于当时自建小程序，第一次接触到小程序的前端开发，然后需要从微信小程序页面标签view获取指定的值，但是从其中获取到的微信小程序获取view的currentTarget.dataset 为undefined。于是开启了打怪升级模式。
代码优化前
第一次写的时候原码是这样的
<view class="item bc_yellow" bindtap="toTestPage" data-testId="{{item.examId}}" data-examName="{{item.examName}}">
{{item.examName}}
</view>
JS获取前端页面中的值得方法
toTestPage: function(e){
let testId = e.currentTarget.dataset['testid'];
console.log('--------'+e.currentTarget.dataset['examName'])
wx.navigateTo({
url: '../test/test?testId='+testId
})
}
由于前端页面是遍历数组之后，用户点击相应的按钮后，将点击按钮的id传递给后台服务器。在调试控制台打印日志之后，输出undefined。百思不得其解，于是开始改造。
代码优化后
改造之后
<view class="flex-item">
<view class="item bc_yellow" bindtap="toTestPage" data-testid="{{item.examId}}" data-examname="{{item.examName}}">{{item.examName}}</view>
</view>
js
toTestPage: function(e){
let testId = e.currentTarget.dataset['testid'];
console.log('--------'+e.currentTarget.dataset['examname'])
wx.navigateTo({
url: '../test/test?testId='+testId
})
}
再次调用之后就能正常获取到参数了，访问接口之后返回数据正常。
分析
在微信小程序的原生在组件中当我们定义数据的时候，需要将定义的数据通过事件传递给服务器中，一般应该以data-数据变量名。如果存在多个单词组成一个变量名称时，可以使用“-”进行拼接。如果存在打写的字母，在编译执行的过程中会转成大写转成小写。
- 错误格式：data-Element-Type
- 正确格式：data-element-type， 最终在 event.target.dataset 中会将连字符转成驼峰elementType。
结语
好了，以上就是微信小程序获取view的currentTarget.dataset 为undefined解决方法，感谢您的阅读，希望您喜欢，如对您有帮助，欢迎点赞收藏。如有不足之处，欢迎评论指正。下次见。
作者介绍：【小阿杰】一个爱鼓捣的程序猿，JAVA开发者和爱好者。公众号【Java全栈架构师】欢迎关注阅读交流。
