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

news2024/11/24 12:04:43

一、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.coloradmin.cn/o/1400625.html

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

相关文章

yum下载源,vim使用

文章目录 yum本地配置lzrsz命令行互传scp(远程拷贝)vim yum本地配置 [rootiZf8z3j2ckkap6ypn717msZ ~]# pwd /root [rootiZf8z3j2ckkap6ypn717msZ ~]# ls /etc/yum.repos.d CentOS-Base.repo epel.repo //本地配置源yum会根据/etc/yum.repo.d路径下的配置文件来构成自己的下载…

pip安装之后还是无法使用问题处理

最近由于需要使用到Python 相关功能&#xff0c; 记录下一些入门小技巧 1 python 下载安装 在window10 环境下载免安装版本&#xff0c; 并解压 安装包下载地址&#xff1a; https://www.python.org/ftp/python/3.12.1/python-3.12.1-embed-amd64.zip 2. 安装pip, 由于是内嵌…

基于无锁循环队列的线程池的实现

目录 出处&#xff1a;B站码出名企路 应用场景 设计实现 等待策略模块 晚绑定 C 中的 override关键字 C中的 default 关键字 C中的 delete 关键字 C中的 explicit 关键字 C中 using 别名技巧 sleep 和 yield的区别 noexcept关键字 volatile关键字 无锁循环队列的…

【计算机网络】TCP握手与挥手:三步奏和四步曲

这里写目录标题 前言三次握手四次挥手三次握手和四次挥手的作用TCP三次握手的作用建立连接防止已失效的连接请求建立连接防止重复连接 TCP四次挥手的作用&#xff1a;安全关闭连接避免数据丢失避免半开连接 总结&#xff1a; 总结 前言 TCP&#xff08;传输控制协议&#xff09…

《游戏-02_2D-开发》

基于《游戏-01_2D-开发》&#xff0c; 继续制作游戏&#xff1a; 首先给人物添加一个2D重力效果 在编辑的项目设置中&#xff0c; 可以看出unity默认给的2D重力数值是-9.81&#xff0c;模拟现实社会中的重力效果 下方可以设置帧率 而Gravity Scale代表 这个数值会 * 重力 还…

MySQL---多表等级查询综合练习

创建emp表 CREATE TABLE emp( empno INT(4) NOT NULL COMMENT 员工编号, ename VARCHAR(10) COMMENT 员工名字, job VARCHAR(10) COMMENT 职位, mgr INT(4) COMMENT 上司, hiredate DATE COMMENT 入职时间, sal INT(7) COMMENT 基本工资, comm INT(7) COMMENT 补贴, deptno INT…

【cucumber】cluecumber-report-plugin生成测试报告

cluecumber为生成测试报告的第三方插件&#xff0c;可以生成html测报&#xff0c;该测报生成需以本地json测报的生成为基础。 所以需要在测试开始主文件标签CucumberOptions中&#xff0c;写入生成json报告。 2. pom xml文件中加入插件 <!-- 根据 cucumber json文件 美化测…

使用docker配置semantic slam

一.Docker环境配置 1.拉取Docker镜像 sudo docker pull ubuntu:16.04拉取的为ununtu16版本镜像&#xff0c;环境十分干净&#xff0c;可以通过以下命令查看容器列表 sudo docker images 如果想删除多余的docker image&#xff0c;可以使用指令 sudo docker rmi -f <id&g…

【深度学习目标检测】十七、基于深度学习的洋葱检测系统-含GUI和源码(python,yolov8)

使用AI实现洋葱检测对农业具有以下意义&#xff1a; 提高效率&#xff1a;AI技术可以快速、准确地检测出洋葱中的缺陷和问题&#xff0c;从而提高了检测效率&#xff0c;减少了人工检测的时间和人力成本。提高准确性&#xff1a;AI技术通过大量的数据学习和分析&#xff0c;能够…

【面试】java并发编程面试题

java并发编程面试题 何为进程?何为线程?JVM拓展为什么程序计数器、虚拟机栈和本地方法栈是线程私有的呢&#xff1f;为什么堆和方法区是线程共享的呢虚拟机栈和本地方法栈为什么是私有的?一句话简单了解堆和方法区单核 CPU 上运行多个线程效率一定会高吗&#xff1f;创建线程…

【机组】存储器、总线及堆栈寄存器实验的解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 ​目录 &#x1f33a;一、 实验目的 …

【力扣hot100】二分查找

文章目录 Arrays.sort()时间复杂度o(n)二分法时间复杂度o(logn) 1.搜索插入位置代码 2. 搜索二维矩阵思路&#xff1a;代码&#xff1a; 34. 在排序数组中查找元素的第一个和最后一个位置思路&#xff1a;代码&#xff1a; 153. 寻找旋转排序数组中的最小值思路&#xff1a;代码…

5.2 基于深度学习和先验状态的实时指纹室内定位

文献来源 Nabati M, Ghorashi S A. A real-time fingerprint-based indoor positioning using deep learning and preceding states[J]. Expert Systems with Applications, 2023, 213: 118889.&#xff08;5.2_基于指纹的实时室内定位&#xff0c;使用深度学习和前一状态&…

从零开始的OpenGL光栅化渲染器构建3-法线贴图和视差贴图

前言 我们可以用一张纹理贴图来表现物体表面的基础反射颜色&#xff0c;也可以用一张镜面反射贴图&#xff0c;来指派表面是否产生高光。除此之外&#xff0c;我们可以用贴图来存储表面的法线信息&#xff0c;以及高度信息&#xff0c;从而让渲染效果更加精细。 法线贴图 我…

linux下USB抓包和分析流程

linux下USB抓包和分析流程 在windows下抓取usb包时可以通过wireshark安装时安装USBpcap来实现usb抓包&#xff0c;linux下如何操作呢&#xff1f; 是基于usbmon&#xff0c;本博客简单描述基于usbmon在linux系统上对通过usb口进行发送和接收的数据的抓包流程&#xff0c;分别描…

Matplotlib Mastery: 从基础到高级的数据可视化指南【第30篇—python:数据可视化】

文章目录 Matplotlib: 强大的数据可视化工具1. 基础1.1 安装Matplotlib1.2 创建第一个简单的图表1.3 图表的基本组件&#xff1a;标题、轴标签、图例 2. 常见图表类型2.1 折线图2.2 散点图2.3 条形图2.4 直方图 3. 图表样式与定制3.1 颜色、线型、标记的定制3.2 背景样式与颜色…

Linux:使用for+find查找文件并cp到其他目录,文件名带有空格

一、场景描述 在终端窗口中&#xff0c;用shell命令&#xff0c;批量拷贝文件到指定目录。 我是在Windows系统上&#xff0c;通过git bash终端来执行shell命令的。 二、实现过程 命令1 for filepath in find /d/LearningMaterials/数学/数学/高中/一数/偏基础&#xff08;基…

Zabbix分布式监控系统概述、部署、自定义监控项、邮件告警

目录 前言 &#xff08;一&#xff09;业务架构 &#xff08;二&#xff09;运维架构 一、Zabbix分布式监控平台 &#xff08;一&#xff09;Zabbix概述 &#xff08;二&#xff09;Zabbix监控原理 &#xff08;三&#xff09;Zabbix 6.0 新特性 1. Zabbix server高可用…

用BEVformer来卷自动驾驶-4

书接前文 前文链接&#xff1a;用BEVformer来卷自动驾驶-3 (qq.com) 上文书介绍了BEVformer是个啥&#xff0c;以及怎么实现Deformable-attention 我们继续 BEVformer的输入数据格式&#xff1a; 输入张量&#xff08;batachsize&#xff0c;queue&#xff0c;cam&#xff0c;…

工厂设计模式看这一篇就够了

本文将重点介绍几种工厂设计模式&#xff1a;简单工厂、工厂方法模式、抽象工厂模式和建造者模式。这几种设计模式在生产制造的流程下层层递进&#xff0c;可以满足不同的使用场景。在实际运用时&#xff0c;没有一个万能的工厂模式可以套用&#xff0c;要结合具体业务场景选择…