参考文章1:e与e的区别。通过【小程序】和e获得。
参考文章2:【微信小程序】e..id和e...id的区别
1.绑定整个view读取id
场景如下:
数据库中有这样一个唯一的标识符来标识这个订单。数据库中的字段名称是Oid。用户点击后,订单状态发生变化。需要将id值传输到后端数据库来修改状态。
当用户点击整个视图框时,他会读取这个框的id(即Oid)。它适合于:不需要刻意要求框中包含的元素组件,只需点击整个元素即可。
代码如下:(只贴xml和js部分)
xml部分:注意这里的关键点是=””事件的触发
//中间内容省略
js部分:
changcc:function(e){ var name = e.currentTarget console.log(e.currentTarget) }
我们看一下控制台的输出
自然,如果想以数组的形式获取Oid,就写成e...item.Oid的形式
js修改如下:
changcc:function(e){ var name =e.currentTarget.dataset.item.Oid }
此时输出站输出Oid 98
2.读取视图下text标签中的id
在开发过程中,会出现这样的场景
以更改地址为例:
和上面第一个想法一样,我想获取每个视图的唯一Aid(Aid是数据库中地址的唯一标识字段),但是Aid并不绑定到子元素上,只绑定到整个视图上。所以用e。获取父元素的值,并使用 e.获取子元素的值。
xml和js代码如下:
xml:
修改收货地址
注意这里的id是放在视图下方的文本中的。使用此样式来构建按钮并绑定事件。
js:
alteraddress: function (e) { e.target === e.currentTarget var name = e.target.dataset.id console.log(name) }
看一下输出站的输出结果
建议先写出父子元素继承的基本形式e. === e.彼此形式输出(.log(变量名))。按照各输出形式来写
例如:我写完了e。首先,然后输出
alteraddress: function (e) { console.log(e.currentTarget) }
可以看到控制台中没有id相关的信息,所以要传递id,使用e。 === e.
js 中:
alteraddress: function (e) { e.target === e.currentTarget console.log(e.target) }
控制台结果如下:
您可以看到 id 已经可以读取,因为输出是类似数组的形式。自然,如果想要获取id,可以写成e...id的形式。
这样一开始就可以得到第二种方法的js代码
alteraddress: function (e) { e.target === e.currentTarget var name = e.target.dataset.id console.log(name) }
3.(优化)获取按钮的id
我在做第二个模块的时候就想过是否可以直接绑定按钮,因为都是按钮的形式,但不同的是事件也是直接绑定的(第二种方法中,中文是样式绑定到文本之外的视图)
xml和js代码如下:
XML:
确认送达
js:
var name = e.currentTarget.id; console.log(e.currentTarget) console.log(name)
看一下控制台输出:
可以看到,因为事件不是绑定在view上而是绑定在view上,所以不需要e。 === e.通过它,所以你可以只使用 e。直接,然后用方法二中的“傻瓜”方法输出每一个,然后确定最终的值。
4. 绑定多条信息
第三点,绑定id可以返回id值,但是如果除了这个我们还想绑定这个组件中包含的其他值,我们可以使用这个方法。还是之前的例子,直接上代码
xml:
确认送达
js:
var name = e.currentTarget.id; var Op2=e.currentTarget.dataset.id console.log(e.currentTarget)
查看控制台输出
可以看到前端不同的写法对应着不同的输出方式。
使用id="{{.Oid}}",对应js中的e..id;
使用data-id="{{.Oid}}",对应js中的e...id
5. 总结
(免责声明:这只是经验总结,原理其实还不是很清楚)
1.直接view或者事件绑定以及id获取,直接使用e。然后输出,根据输出值得到id。
2.使用e.===e。在子元素中传递值,然后根据输出值获取id
3、使用id="{{.Oid}}",对应js中的e..id;
使用data-id="{{.Oid}}",对应js中的e...id