微信小程序的事件绑定、接收参数、示例

1.微信小程序的事件类别：
tap：点击事件
input：输入事件
longtap：长按事件；
touchstart：触摸开始；
touchend：触摸结束；
touchcansce：取消触摸；

注1：小程序中请求处理方法是不能传递参数，正确方式：通过data-xxx属性传递参数，再通过事件源获得参数
注2：小程序中默认绑定为单向绑定
错误
<button bindtap="handletap(-1)"
正确
<button bindtap="handletap" data-number="{{-1}}"

正解：传递固定值-1
data-number="{{-1}}"
还可以绑值
data-number="{{n}}"

再从事件对象中获取
e.currentTarget.dataset.number

注2：在微信小程序中，js的数据和前端显示的数据是单数据流。
即js里边的数据变了，前端能立刻显示，但如果前端数据变了，js不能改变，怎么办呢！

我们可以通过bindinput方法，来实现双向数据绑定。

原理：我们使用bindinput事件来获取input的输入值，然后根据dataset获取要跟 data数组里的对象进行数据绑定
具体写法
//1.在data中定义dataList属性，并在其中定义要双向绑定的属性名
//2.定义bindInput方法
//3.<input class="input" bindinput="bindInput" data-name="username" placeholder="请输入帐号" auto-focus/>
bindInput(e) {
console.log("bindInput");
//debugger
// 表单双向数据绑定
var that = this;
var dataset = e.target.dataset;
// data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
var name = dataset.name;
var value = e.detail.value;

//小问题：规则接收数据属性只能叫dataList
that.data.dataList[name] = value; //逻辑层数据的更改
// 拼接对象属性名，用于为对象属性赋值
var attributeName = "dataList." + name;
that.setData({//视图层数据的更改
[attributeName]: value
});
console.log(that.data.dataList);
}

2.微信小程序的事件绑定：
bind绑定；
catch绑定；（能阻止事件冒泡）
例如：绑定点击事件 bindtap
page.wxml 文件

3.微信小程序接收参数的示例

//接收参数
Page({
onLoad: function(options) {
//小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx';
this.setData({
title: options.title
})
}
})

微信小程序的事件绑定、接收参数、示例相关推荐

WeChat applet 微信小程序(3) 事件绑定
WeChat applet 事件绑定概述事件是视图层到逻辑层的通讯方式,事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定到组件,当用户在视图层触发该组件的事件时,就会执行逻辑层中对应的事件 ...
【微信小程序】onShow中接收参数
问题描述: 想在页面加载和跳转页面返回时重新获取数据,但是onShow接收不到跳转传的参数原因分析: onLoad:页面第一次加载时触发,从跳转页面返回时不能触发,可以传递参数 onShow:页面显 ...
微信小程序 input事件绑定
⼩程序中绑定事件,通过bind关键字来实现.如 bindtap bindinput bindchange 等不同的组件⽀持不同的事件,具体看组件的说明即可. 下面举例 input 内容被改变怎么触 ...
【微信小程序】事件绑定
✅作者简介:CSDN内容合伙人.阿里云专家博主.51CTO专家博主
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
微信小程序学习4：小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等.当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效 ...
java后台接收微信小程序发送的post请求参数
java后台接收微信小程序发送的post请求参数 // 微信端:data数据要加上JSON转换JSON.stringify() wx.request({url: 'http://127.0.0.1:8 ...
微信小程序request请求后台接收不到参数问题
微信小程序request请求后台接收不到参数问题一. 小程序部分代码二. 后端三. 问题代码四. 请求头一. 小程序部分代码发一个普通的request请求 wx.request({url: ...
3-STM32+Air724UG基本控制篇(自建物联网平台)-整体运行测试-微信小程序扫码绑定Air724,并通过MQTT和模组实现远程通信控制
说明这节测试一下微信小程序扫码绑定Air724模组然后实现微信小程序和开发板之间通过MQTT进行远程通信控制. 这一节作为板子的整体功能测试,用户下载这一节的程序用来测试基本控制篇实现的基本功能还 ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...

微信小程序的事件绑定、接收参数、示例

微信小程序的事件绑定、接收参数、示例相关推荐

最新文章

热门文章