微信小程序的学习(二)
一、数据绑定
1、数据绑定的基本原则
在 data 中定义数据
在 wxml 中使用数据
2、如何在 data 里面定义数据?
在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
3、如何在 wxml 页面中使用数据?
3.1、Mustache 语法的应用场景
Mustache 语法的主要应用场景如下:
动态绑定内容
动态绑定属性
动态运算(三元运算、算术运算等)
3.2、Mustache 的语法格式
把 data 中的数据绑定到页面中渲染,需要使用 Mustache 语法(双大括号)将变量包起来即可;语法格式如图所示:
这种也叫动态绑定内容
3.3、动态绑定属性
.js 页面的数据如下:
wxml 页面的结构如下:
3.4、三元运算
.js 页面的数据如下:
wxml 页面的结构如下:
3.5、算数运算
.js 页面的数据如下:
wxml 页面的结构如下:
二、事件绑定
1、什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
2、小程序中常用的事件
3、事件对象的属性列表
当事件回调触发的时候,会收到一一个事件对象event,它的详细属性如图所示:
3.1、target 和 currentTarget 的区别:
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。此时,对于外层的view来说:
e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的view组件
3.2、bindtap 的语法格式
在小程序中,不存在HTML中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
① 通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:
② 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参event (一般简写成e)来接收:
③ 查看结果
3.3、 bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
① 通过 bindinput,可以为文本框绑定输入事件:
② 在页面的 .js文件中定义事件处理函数:
3.4、实现文本框和 data 之间的数据同步
实现步骤:
① 定义数据
② 渲染结构
③ 美化样式
④ 绑定 input 事件处理函数
3.5、在事件处理函数中为 data 中的数据重新再赋值
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:
三、事件传参
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:
info 会被解析成参数的名字
数值 2 会被解析成参数的值
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:
微信小程序的学习(二)的更多相关文章
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序条码、二维码生成模块
代码地址如下:http://www.demodashi.com/demo/13994.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- 微信小程序把玩(二十八)image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩(二十九)video组件
原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...
- 微信小程序把玩(二十七)audio组件
原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...
- 微信小程序把玩(二十四)toast组件
原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...
- 微信小程序把玩(二十五)loading组件
原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...
- 微信小程序把玩(二十六)navigator组件
原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指定. 主要属性: wxml <naviga ...
- 微信小程序把玩(二十二)action-sheet组件
原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-s ...
随机推荐
- python 二分法查找字典中指定项第一次出现的索引
import time #引入time库,后续计算时间. inform_m = {} #创建母字典 inform_s = {} #母字典下嵌套的子字典 #给母字典添加键-值 for i in rang ...
- Java中如何创建不可变(immutable)类
什么是不可变类 1. 不可变类是指类的实例一经创建完成,这个实例的内容就不会改变. 2. Java中的String和八个基本类型的包装类(Integer, Short, Byte, Long, Dou ...
- .NET WebAPI 自定义 NullableConverter 解决请求入参 “”空字符触发转换异常问题
最近在项目中启用了Nullable 可为空的类型,这个特性确实很好用,在 WebAPI 的入参上可以直接采用 ? 来标记一个字段是否允许为空,但是使用过程中遇到了如下一个问题,比如创建部门接口 我们定 ...
- 上K8s生产环境的准备有哪些?
文章转载自:https://mp.weixin.qq.com/s/7FhiI09xKdJXJfrf89Q-8w 在生产中运行应用程序可能很棘手.这篇文章提出了一个自以为是的清单,用于在 Kuberne ...
- CentOS 7.7系统安装Redis 6.0.3
前提操作 避免出现如下的错误 yum -y install gcc tcl yum -y install centos-release-scl yum -y install devtoolset-9- ...
- MySQL数据表更新模板
-- ---------------------------- -- 新增表 -- ---------------------------- CREATE TABLE `biz_circle_lead ...
- 为不同的用户生成不同的 Kibana 界面
文件转载自:https://elasticstack.blog.csdn.net/article/details/109593613
- flask+gunicorn+nginx部署
安装nginx和gunicorn yum install nginx pip3 install gunicorn flask项目配置 #main.py from flask import Flask ...
- Maven快速配置和入门
概念 Maven其实就是一个管理项目.构建项目的工具.它有标准化的项目结构.构建流程.依赖管理. 功能 Maven提供了一套标准的项目结构 Maven提供了一套标准的构建流程 Maven提供了更便捷的 ...
- SqlKata - 方便好用的 Sql query builder
SqlKata查询生成器是一个用C# 编写的功能强大的Sql查询生成器.它是安全的,与框架无关.灵感来源于可用的顶级查询生成器,如Laravel Query Builder和 Knex. SqlKat ...