[小程序]API、数据与事件

一、API

        ①事件监听API

        以on开头,用来监听事件的触发(如wx.inWindowResize)

        ②同步API

        以Sync结尾,且可以通过函数返回值获取,执行错误会抛出异常(如wx.setStorageSync)

        ③异步API

        类似网页中的ajax,需要通过success,fail,complete接收调用结果(如wx.request)

二、数据绑定

        数据绑定的基本原则:

        ①在data中定义数据

        在当前页面的js文件中的Page中定义数据:

        ②在WXML中使用数据

        使用Mustache语法(双大括号)将变量渲染到页面

<view>{{info}}
</view>

         Mustache的作用包含动态绑定内容(↑);动态绑定属性(↓);三元运算(↓↓);算数运算(↓↓↓)

data:{imgPath : '图片路径',
}<image src="{{imgPath}}"></image>

data: {randNum:Math.random()*10
}<view>{{randNum>=5?'随机数>5':'随机数小于5'}}
</view>

<view>{{randNum*10}}
</view>

三、事件

        1.事件定义

        通过事件,可以将渲染层的行为反馈到业务层进行处理,相当于函数。

        小程序常用的事件如下:

tap相当于clickbindtap或bind:tap
input文本框输入bindinput或bind:input
change状态改变bindchange或bind:change

        当事件回调被触发,会收到一个event,其属性如下:

typeString事件类型
timeStampInt触发事件的时间(毫秒)
targetObject触发事件的源头组件
currentTargeObject当前组件
detailObject额外信息
touchesArray当前触摸点的信息
changedTouchesArray当前变化的触摸点信息

         事件触发后,会以冒泡的方式向外传递(先触发内层的事件,再触发外层的事件,这里需要借用target和currentTarget来判别)

        2.事件绑定

        ①通过bindtap在渲染界面中绑定

<button type="default" bindtap='btnClick'>点击测试</button>

        ②在js文件中定义处理函数

btnClick(e){console.log(e)
},

        3.在事件中为data赋值

         使用this.setData(dataobject)方法为data赋值

  btnClick(e){this.setData({count:this.data.count+1})},
<view>{{count}}<button type="default" bindtap='btnClick'>+1</button>
</view>

         4.事件传参

        使用data-*,自定义参数进行传递,如

<button type="default" bindtap='btnClear' data-zero="{{-1}}">设-1</button>

        同时在事件中采用下列代码来获取传递的值

this.setData({count:e.target.dataset.zero})

        需注意,如不使用{{ }},则传递的会是String数据。 

        5.获取文本框数据

<view class="CenterText">{{tempStr}}<input class="bd" bindinput="textChage"></input>
</view>
  textChage(e){this.setData({tempStr:e.detail.value})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/636445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

torchtext安装及常见问题

Pytorch 、 torchtext和Python之间有严格的对应关系&#xff1a; 在命令窗中安装torchtext pip install torchtext 注意这种安装方式&#xff0c;在pytorch版本与python版本不兼容时动会自动更新并安装pytorchcpu版本&#xff0c;安装的新版本pytorch可能会不兼容。慎用。 …

VUE--组件通信(父子)

1、什么是组件通信 组件通信就是指组件与组件之间的数据传递。因为组件的数据是独立的&#xff0c;无法直接访问其他组件的数据&#xff0c;想获取其他组件的数据&#xff0c;就需要用到组件通信。 2、组件关系分类&#xff08;如图&#xff09; ● 父子关系&#xff08;props…

虚拟机安装宝塔的坑

问题&#xff1a; 在虚拟机中centos7和centos8中安装宝塔之后&#xff0c;无法访问面板。 解决&#xff1a; 1.先关闭防火墙&#xff08;如果本机能够ping通相关端口&#xff0c;则不用关闭防火墙&#xff09; 2.最新的宝塔会自动开启ssl协议&#xff0c;需要手动关闭。…

Python连接数据库的梳理

我们通常用的数据库类型主要有关系型数据库&#xff0c;非关系型数据库等&#xff0c;其中关系型数据库主要有Microsoft SQL Server ,MySQL,Oracle&#xff0c;SQLite等&#xff0c;常用的非关系型数据库包括Redis、DynamoDB&#xff0c;MongoDB等 ​​​​​​​ 一 关系型…

MongoDB之索引

常用命令 查看表的索引 db.<table>.getIndexes() 查看表索引的大小 db.<table>.totalIndexSize() 重建索引 db.<table>.reIndex() 删除索引 db.COLLECTION_NAME.dropIndex("INDEX-NAME") db.COLLECTION_NAME.dropIndexes() _id 索引无法删…

MCU最小系统原理图中四个问题详解——芯片中有很多电源管脚的原因(VDD/VSS/VBAT)、LC滤波、两级滤波、NC可切换元件

前言&#xff1a;本文对MCU最小系统原理图中的四个问题进行详解&#xff1a;芯片中有很多电源管脚的原因&#xff08;VDD/VSS/VBAT&#xff09;、LC滤波、两级滤波、NC可切换元件。本文以GD32F103C8T6最小系统原理图举例 目录&#xff1a; 芯片中有很多电源管脚的原因&#x…

echarts dataZoom实现左右滑动与放大缩小 并精确控制显示几条数据

//Xdata是横轴的长度&#xff08;若x轴80条数据&#xff0c;默认显示最新的20条&#xff09; var start Xdata.length - 20; var end Xdata.length - 1; dataZoom: [ type: slider, show: true, startValue: dataZoomStart, endValue: dataZoomEnd, dataBackground: { ar…

STL——list

1、list介绍 1. list 是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list 的底层是带头双向循环链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后…

CVE-2023-46226 Apache iotdb远程代码执行漏洞

项目介绍 Apache IoTDB 是针对时间序列数据收集、存储与分析一体化的数据管理引擎。它具有体量轻、性能高、易使用的特点&#xff0c;完美对接 Hadoop 与 Spark 生态&#xff0c;适用于工业物联网应用中海量时间序列数据高速写入和复杂分析查询的需求。 项目地址 https://io…

Leetcoder Day9|栈与队列part01

语言&#xff1a;Java/C 目录 理论基础 C 栈 队列 Java 栈 队列 ​编辑 232.用栈实现队列 225. 用队列实现栈 Queue Deque 今日心得 理论基础 又是考研时数据结构里接触到的老朋友&#xff0c;栈是先进后出&#xff0c;队列是先进先出。 C 现在刷题除了思路还…

力扣-202. 快乐数解析-弗洛伊德循环查找算法

题目链接 public static void Happy(int n) {int sum 0;int digit 0;for (int i 0; i < 20; i) {while (n ! 0) {digit n%10;sum digit*digit;n/10;}System.out.print(sum " ");n sum;sum 0;}} 使用代码测试一下每一代数字 n 2 : 4 16 37 58 89 145 42 …

自然语言处理(Natural Language Processing,NLP)解密

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…

Servlet中service()与doGet() doPost() 是什么关系

Servlet&#xff08;Server Applet&#xff09;&#xff0c;全称Java Servlet。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据&#xff0c;生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口&#xff0c;广义的Servlet是指任何实现了这个Servlet…

关于去除信号中的直流分量效果演示(零频率分量)

本文作者&#xff1a; slience_me 文章目录 关于去除信号中的直流分量效果演示&#xff08;零频率分量&#xff09;1. 效果图展示&#xff1a;2. 快速傅里叶变换FFT3. 相关验证代码 关于去除信号中的直流分量效果演示&#xff08;零频率分量&#xff09; 1. 效果图展示&#x…

JDK 动态代理(Spring AOP 的原理)(面试重点)

代理模式 也叫委托模式.定义&#xff1a;为其他对象提供⼀种代理以控制对这个对象的访问.它的作⽤就是通过提供⼀个代理类,让我们 在调⽤⽬标⽅法的时候,不再是直接对⽬标⽅法进⾏调⽤,⽽是通过代理类间接调⽤&#xff0c;在某些情况下,⼀个对象不适合或者不能直接引⽤另⼀个对…

51单片机蜂鸣器

蜂鸣器 蜂鸣器的工作原理 三极管的工作原理 三极管是一种半导体器件&#xff0c;通常由三个掺杂不同的半导体材料层构成。它常用于放大和开关电路中。三极管的工作原理可简述如下&#xff1a; 放大作用&#xff1a;三极管可以放大电流和电压信号。它的工作原理基于控制一个较大…

Web前端与低代码可以碰出什么火花?

技术快速迭代&#xff0c;Web前端开发已经逐渐成为构建现代应用程序的关键组成部分。它不仅涉及到美观的界面设计&#xff0c;还包括后端功能的实现&#xff0c;以及跨平台兼容性的考虑。然而&#xff0c;传统的Web前端开发过程往往需要进行长时间的编码和调试&#xff0c;这使…

LTC6820和isoSPI使用

1、MSTR主控/受控 MSTR (引脚 11/ 引脚 12)&#xff1a;串行接口主 / 从选择器输入。MSTR接VCC&#xff0c;则LTC6820为从机&#xff1b;MSTR接GND&#xff0c;则LTC6820为主机 2、SLOW慢速/快速 SLOW (引脚 12/ 引脚 13)&#xff1a;慢速接口选择输入。当时钟频率≤ 200kHz …

C++和Python最常用的库框架一览

一、C常用库 1. 标准模板库(STL) STL包含丰富的数据结构与算法。比如vector动态数组;list双向链表;map基于红黑树实现,支持快速查找键值对。常用算法有sort排序、find搜索等。这些容器算法类和函数模板,是C程序员必不可少的基础。 2. Boost Boost是近年兴起的高质量C库集合…

网络安全:守护数字世界的盾牌

在当今数字化的时代&#xff0c;网络已经渗透到我们生活的方方面面。从社交媒体到在线银行&#xff0c;从在线购物到工作文件传输&#xff0c;网络几乎无处不在。然而&#xff0c;随着网络的普及&#xff0c;网络安全问题也日益凸显。那么&#xff0c;如何确保我们的数字资产安…