微信小程序中data-key属性之数据传输(经验总结)

本文是总结的一点经验之谈

啥是data-key

微信小程序推出 data- 属性——自定义属性,为了更好的进行数据传递。
总结来说,data-key="{{...}}" 是获取页面中需要用的数据,往js文件(事件)中传—— 被绑定在其组件上的事件使用 也就是常说的:dataset;(比如:wx:for的view中的每一个项的name属性值)
data-key="..." 是从data传到wxml页面中,一般都是在data中存在的属性才这样做,它就是为了“动态修改”data中的属性。

  • 只有data-*传的值才能在事件中被dataset接收,其余的“{{}}”只能使用
  • detaildata-*中不带{{}}时一般都是写好的值,只是用作:不必用data中的数据!

怎么接收data-*的值

如下:

<view bindtap="SetData" data-name="mxc" data-age="18">
 获取数据
</view>

js中:

Page({
 data:{
 name:'',
 age:0
 },
 SetData:function(e){
 console.log(e);
 this.setData({
  name:e.target.dataset.name
 });
 console.log(this.data.name);
 }
})

下面来说几点问题:

上面的程序,在控制台输出:data中的值在event.target.dataset中

我们看到,如愿以偿。

那能不能再currentTarget中输出?

准确的说,是:能不能获取currentTarget中的值?
那肯定可以啦!

我们来看官方文档:

从中可以看出一个很严重的问题:当前组件触发事件组件
我们都知道,触发事件有 bindtapcatchtap 两种。其中,bindtap可向上(父组件)传递事件
明白了吧?
一般来说, 要想更精确,就用currentTarget;要在一个大组件中有多个触发事件,就可以用target减少事件定义

说说data-绑定数据的坑

你如果在wxml中这么写

<view bindtap='like' data-id='{{laugh.id}}' data-createdBy='{{laugh.created_by}}'>

然后在js中接收:

like(e){
 console.log(e.currentTarget.dataset['createdBy']);
 }

是会出大问题的:它报undefined!

在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

也就是说小程序自动转了,会把下划线转为大写,大写转为小写。。。(不知道坑了多少人)

like(e){
 console.log(e.currentTarget.dataset['createdby']);
 }

改过之后,世界一片清净…

总结

时间: 2020-08-20

微信小程序中input标签详解及简单实例

微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

微信小程序中form 表单提交和取值实例详解

微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

150行代码带你实现微信小程序中的数据侦听

在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快

微信小程序中为什么使用var that=this

前言: 在小程序或者js开发中,经常需要使用var that = this;开始我以为是无用功,(原谅我的无知),后来从面向对象的角度一想就明白了,下面简单解释一下我自己的理解,欢迎指正批评. 代码示例: Page({ data: { test:10 }, testfun1: function () { console.log(this.data.test) // 10 function testfun2(){ console.log(this.data.test) //undefined }

微信小程序中上传图片并进行压缩的实现代码

小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

微信小程序中使用wxss加载图片并实现动画效果

记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

微信小程序中转义字符的处理方法

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用 这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调

微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

微信小程序中限制激励式视频广告位显示次数的实现思路

微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

如何在微信小程序中存setStorage

这篇文章主要介绍了如何在微信小程序中存setStorage,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在js中存入setStorage,key是你的键,data是你的值 wx.setStorage({ key: 'mm', data: 1, }) // 获取getStorageSync的方式 console.log(wx.getStorageSync('mm')) #获取的方式 接下来是或数据中的存取 ,其实是一样的啦,直接上代码 js文件