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

news/2024/7/20 4:10:54 标签: 小程序

一、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.niftyadmin.cn/n/5337398.html

相关文章

RabbitMQ-数据持久化

一、持久化类型 1、交换机持久化&#xff08;SpringAMQP默认&#xff09; 2、队列持久化&#xff08;SpringAMQP默认&#xff09; 3、消息持久化 二、消息持久化 1、纯内存操作 如果采用纯内存操作&#xff0c;那么消息存储达到队列的上限之后&#xff0c;会有一个page ou…

第三课:GPT

文章目录 第三课&#xff1a;GPT1、学习总结&#xff1a;GPT出现的原因GPT的方法原理目前存在的问题无监督的预训练优化目标模型结构 监督微调课程ppt及代码地址 2、学习心得&#xff1a;3、经验分享&#xff1a;4、课程反馈&#xff1a;5、使用MindSpore昇思的体验和反馈&…

消息队列RabbitMQ.01.基本使用

目录 RabbitMQ的作用 Message queue 释义 问题思考 存在的问题 优化方案 案例分析 带来的好处 消息队列特点 Email邮件案例分析 Docker安装部署RabbitMQ 1.下拉镜像 2.运行RabbitMQ 3.打开防火墙端口号并重新运行防火墙 4.容器启动后,可以通过 docker logs 容器 查…

微前端-无界wujie

无界微前端方案基于 webcomponent 容器 iframe 沙箱&#xff0c;能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。 主项目安装无界 vue2项目&#xff1a;npm i wujie-vue2 -S vue3项目…

AI日报:扎克伯格瞄准AGI通用人工智能

文章目录 Meta瞄准通用人工智能领域Meta的目标Meta的产品 FAIR移动和装载H100扎克伯格对人工智能竞争对手的真实动机持怀疑态度Meta抛弃了元宇宙吗&#xff1f; Meta瞄准通用人工智能领域 Meta首席执行官马克扎克伯格&#xff08;Mark Zuckerberg&#xff09;在一份可能改变全…

一键完成,批量转换HTML为PDF格式的方法,提升办公效率

在当今数字化的时代&#xff0c;HTML和PDF已经成为两种最常用的文件格式。HTML用于网页内容的展示&#xff0c;而PDF则以其高度的可读性和不依赖于平台的特性&#xff0c;成为文档分享和传播的首选格式。然而&#xff0c;在办公环境中&#xff0c;我们经常需要在这两种格式之间…

Rustdesk自建服务搭建好了,打开Win10 下客户端下面状态一直正在接入网络,无法成功连接服务器

环境: Rustdesk1.2.3 自建服务器 有域名地址 问题描述: Rustdesk自建服务搭建好了,打开Win10 下客户端下面状态一直正在接入网络,无法成功连接服务器 解决方案: RustDesk是一款免费的远程桌面软件,它允许用户通过互联网远程连接和控制其他计算机。它是用Rust编程语…

k8s节点RouteCreated为false

出现该情况后&#xff0c;一般是初始化节点失败。因此&#xff0c;需要把节点从集群中移除&#xff0c;再加入到集群中&#xff0c;即可解决。 通常出现这个状况后&#xff0c;该节点上是没有被分配pod ip的&#xff0c;可以通过命令查看&#xff1a; # 发现没有PodCIDR、PodC…