小程序使用e.target.dataset的小bug

在小程序开发中我们经常会用到标签中属性的属性值，有时候我们通过data-和 etargetdataset来获取属性值会出现一点小bug，即是调用出来的数据是undefined，即取不到值。

本博客，提供两种解决方案，如下：

（一）方案1–去掉驼峰式命名，改成纯小写式命名

很多人可能会像我我一样卡在这里了，怎么找都找不到原因，怎么更改都是undefined。

其实，很简单！

那就是data后面的属性名写得不规范！在data后面的属性名是不能按照驼峰式的写法，只要把定义的属性名全部换成小写就没有问题了！

（二）方案2–consolelog（e）查看

直接consolelog（e）也能看出问题。

e对象中包含两个对象分别是currentTarget和target，而真正的数据包含在currentTarget。

打印出e，找到你的数据，通过对象调用的方式即可。

总结：

驼峰式的写法的自定义属性名很可能是无法被浏览器识别的，所以，不管是在小程序开发还是在其他方面的开发中，我们写一些自定义的属性名的时候最好都要全部用小写。再次说明，写一些自定义的属性名的时候我们都要用小写。

最后，微信小程序内容还在开发过程中，很多知识是不完善，也是不稳定的。

知识是会更新换代，也许到了某一天，这个bug又会被完善。

各位看官，珍重！

---------------------

原文：>

1用到的知识点wxrequest请求接口资源（ 小程序api中的发起请求部分）swiper实现轮播图的组件wx:for循环语句 小程序的基础知识2实现原理首先，先看一下这个请求函数varwxrequest({url:'',//这里填写你的接口路径header:{//这里写你借口返回的数据是什么类型，这里就体现了 小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了'Content-Type':'application/json'},data:{//这里写你要请求的参数x:'',y:''},success:function(res){//这里就是请求成功后，进行一些函数 *** 作consolelog(resdata)}})12345678910111213141516123456789101112131415163代码分解图首先上一段知乎接口数据的json格式中的开头"date":"20161114","stories":[{"images":["/76125c357aa7b0ca6c9cbc41b4a5326djpg"],"type":0,"id":8975316,"ga_prefix":"111422","title":"小事·我和你们一样"},{"images":["/7c908a5940384123fd88287dbc6a2c98jpg"],"type":0,"id":8977438,"ga_prefix":"111421","title":"成长嘛，谁说就意味着一定要长大了？"},12345678910111213141516171819201234567891011121314151617181920indexjs中Page({data:{duration:2000,indicatorDots:true,autoplay:true,interval:3000,loading:false,plain:false},onLoad:function(){varthat=this//不要漏了这句，很重要wxrequest({url:'/api/4/news/latest',headers:{'Content-Type':'application/json'},success:function(res){//将获取到的json数据，存在名字叫zhihu的这个数组中thatsetData({zhihu:resdatastories,//res代表success函数的事件对，data是固定的，stories是是上面json数据中stories})}})}})12345678910111213141516171819202122232425262728291234567891011121314151617181920212223242526272829indexwxml中//这里边的属性不重要，看下边{{itemtitle}}

一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息

注意：

直接修改 thisdata 而不调用 thissetData 是无法改变页面的状态的，还会造成数据不一致

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

方法如下：

js:

Page({  data: {

   text: 'init data',

   num: 0,

   array: [{text: 'init data'}],    object: {

     text: 'init data'

   }

 },

 changeText: function() {    // thisdatatext = 'changed data'  // bad, it can not work

   thissetData({

     text: 'changed data'

   })

 },

 changeNum: function() {    thisdatanum = 1

   thissetData({

     num: thisdatanum

   })

 },

 changeItemInArray: function() {    // you can use this way to modify a danamic data path

   thissetData({      'array[0]text':'changed data'

   })

 },

 changeItemInObject: function(){    thissetData({      'objecttext': 'changed data'

   });

 },

 addNewField: function() {    thissetData({      'newFieldtext': 'new data'

   })

 }

})

wxml:

<view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeNum"> Change normal num </button><view>{{array[0]text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{objecttext}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newFieldtext}}</view><button bindtap="addNewField"> Add new data </button>

以上就是关于小程序使用e.target.dataset的小bug全部的内容，包括:小程序使用e.target.dataset的小bug、微信小程序设置回调变量共用、微信小程序中怎么调用腾讯地图的api接口等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！