[小程序]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.hqwc.cn/news/418945.html

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

相关文章

v32.条件运算符

1.是三元运算符&#xff0c;需要3个操作数 条件运算符可以替换if-else语句 2. marks &#xff1e; 33是一个表达式&#xff0c;返回值是false/true&#xff1b;等号左边是左值&#xff0c;右边那部分是右值。 如果第一个表达式返回true&#xff0c;那么将第二个表达式返回&…

【日常聊聊】边缘计算的挑战和机遇

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 边缘计算的挑战和机遇 一&#xff1a;数据安全与隐私保护 二&#xff1a;网络稳定性与可靠性 三&#xff1a;实时性与性能优…

ESP32-HTTP_webServer库(Arduino)

ESP32-HTTP 介绍 ESP32是一款功能强大的微控制器&#xff0c;具有丰富的网络和通信功能。其中之一就是支持HTTP协议&#xff0c;这使得ESP32可以用于创建Web服务器。 HTTP是什么&#xff1f; HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff0c;即超文本传…

[计算机网络]基本概念

目录 1.ip地址和端口号 1.1IP地址 1.2端口号 2.认识协议 2.1概念&#xff1a; 2.2知名协议的默认端口 3.五元组 4.协议分层 4.1分层的作用 4.2OSI七层模型 4.3TCP/IP五层&#xff08;四层&#xff09;模型 ​编辑4.4网络设备对应的分层&#xff1a; ​编辑以下为跨…

零日漏洞:威胁与应对

一、引言 随着信息技术的迅猛发展&#xff0c;网络安全问题日益凸显。其中&#xff0c;零日漏洞已成为当今网络安全领域最受关注的问题之一。本文将深入探讨零日漏洞的威胁、产生原因以及应对策略&#xff0c;以期提高人们对这一问题的认识和防范意识。 二、零日漏洞的威胁 …

用C语言实现简单的三子棋游戏

目录 1 -> 模块简介 2 -> test.c 3 -> game.c 4 -> game.h 1 -> 模块简介 test.c:测试游戏逻辑 game.c: 函数的实现 game.h:函数的声明 2 -> test.c #define _CRT_SECURE_NO_WARNINGS 1#include "game.h";void menu() {printf("****…

一文读懂「RAG,Retrieval-Augmented Generation」检索增强生成

Retrieval-Augmented Generation&#xff08;RAG&#xff09;作为机器学习和自然语言处理领域的一大创新&#xff0c;不仅代表了技术的进步&#xff0c;更在实际应用中展示了其惊人的潜力。 RAG结合了检索&#xff08;Retrieval&#xff09;和生成&#xff08;Generation&#…

Miniconda介绍以及安装

Miniconda 是 conda 的免费最小安装程序。它是 Anaconda 的小型引导版本&#xff0c;仅包括 conda、Python、它们 两者都依赖于少量其他有用的软件包&#xff08;如 pip、zlib 和其他一些软件包&#xff09;。如果您需要更多软件包&#xff0c;请使用 命令从 Anaconda 的公共存…

pytest - Getting Start

前言 项目开发中有很多的功能&#xff0c;通常开发人员需要对自己编写的代码进行自测&#xff0c;除了借助postman等工具进行测试外&#xff0c;还需要编写单元测试对开发的代码进行测试&#xff0c;通过单元测试来判断代码是否能够实现需求&#xff0c;本文介绍的pytest模块是…

以后要做GIS开发的话是学GIS专业还是学计算机专业好一些?

GIS开发其实严格来说分为前后端以及底层开发。不同的方向&#xff0c;代表了不同的开发语言。 所以大家首先要了解自己具体要做的岗位类型是什么&#xff0c;其次才是选择专业侧重点。 但是严格来说&#xff0c;选择某个专业&#xff0c;到就业方向这个过程&#xff0c;并不是…

华为FusionStorage Block、OceanStor 100D、OceanStor pacific的区别

华为FusionStorage Block、OceanStor 100D、OceanStor pacific的区别&#xff1f; 华为块存储到底是叫什么呢&#xff1f; 有接触过华为块存储产品的小伙伴肯定都有疑惑&#xff0c;在FusionStorage 、FusionStorage Block、OceanStor 100D、OceanStor pacific等等的名词中&a…

maven导入无法拉取所需依赖

maven导入无法拉取所需依赖 1.原因2.解决搞定收工&#xff01; 1.原因 公司使用的是gradle&#xff0c;配置的私有云&#xff0c;maven里面配置私有云完全使用不了&#xff0c;无论配置国内还是国外的&#xff0c;导入的项目报错拉不到jar包。 <mirror><id>mirro…