[小程序]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…

代码随想录算法训练营第五十六天|583. 两个字符串的删除操作、72. 编辑距离

代码随想录算法训练营第五十六天|583. 两个字符串的删除操作、72. 编辑距离 两个字符串的删除操作 583. 两个字符串的删除操作 文章讲解&#xff1a;https://programmercarl.com/0583.%E4%B8%A4%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%88%A0%E9%99%A4%E6%93%8D%E4…

虚拟机安装宝塔的坑

问题&#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…

ESP-IDF Modbus从站例子

支持的芯片型号ESP32ESP32-C2ESP32-C3ESP32-C6ESP32-H2ESP32-S2ESP32-S3 Modbus从站例子 此示例演示了使用FreeModbus协议栈来实现ESP32作为从站设备来进行通信&#xff0c; 该示例允许外部 Modbus主站使用 Modbus协议读取/写入的从站设备参数&#xff0c; “mb_example_comm…

Webpack5入门到原理20:Vue 脚手架搭建

开发模式配置 // webpack.dev.js const path require("path"); const ESLintWebpackPlugin require("eslint-webpack-plugin"); const HtmlWebpackPlugin require("html-webpack-plugin"); const { VueLoaderPlugin } require("vue-lo…

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 …

【笔记】Helm-3 主题-9 Helm高级技术

Helm高级技术 这部分解释说明了使用Helm的各种高级特性和技术。这部分旨在为Helm的高级用户提供高度自定义和操作chart及发布的信息。每个高级特性都会有它自己的权衡利弊&#xff0c; 因此每个使用它们的都要有Helm的深度知识并小心使用。或者换言之&#xff0c;谨记 Peter Pa…

医院挂号系统

需求&#xff1a; 科室管理&#xff1a;新增科室。医生管理&#xff1a;录入医生信息&#xff0c;以及科室信息。修改医生信息&#xff08;主要是修改个人信息和科室&#xff09;。坐诊信息设置&#xff1a;可以设置医生当天和未来6天的坐诊情况&#xff0c;包括上午和下午的坐…

自然语言处理(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;在某些情况下,⼀个对象不适合或者不能直接引⽤另⼀个对…