1 数据绑定

（1）在data 中定义数据。

在页面对应的.js 文件，将数据定义到 data 对象中即可。

（2）在 WXML 中使用数据。

Mustache 语法（双大括号），将变量包起来即可。

Mustache 语法主要有三个应用场景：

（1）绑定内容

（2）绑定属性

（3）运算（三元、算数运算……）

2 事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

（1）常用的事件

① bindtap 的语法格式

在小程序中，不存在onclick鼠标点击事件，而是通过tap事件来想要用户的触摸行为。

（1）通过bindtap，可以为组件绑定tap触摸事件。语法如下：

（2）在页面的.js文件中定义对应的事件处理函数，事件参数性格形参event（一般简写成e）来接收：

② bindinput 的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件，语法如下：

（1）通过bindinput，可以为文本框绑定输入事件：

（2）在页面的.js文件中定义事件处理函数：（e.detail.value 是变化过后，文本框最新值）

其中，console.log(e) 输出：

（2）事件对象event的属性列表

当事件回调触发时，会收到一个事件对象event，它的详细属性如下：

注意：target 是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。如：

点击按钮时，点击事件会以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。此时target指的是按钮，currentTarget指向外层view。

运行实例：

（3）在事件处理函数中为 data 中的数据赋值

调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，如下：

调用页面data中的数据：this.data.变量名

（4）事件传参

小程序中的事件传参特殊，不能在绑定事件的同时为事件处理函数传递参数。如下不可正常工作：

正确方式如下：

① 传参

为组件提供 data-参数名 自定义属性传参，示例如下：

最终：① info会被解析为参数的名字，数值2会被解析为参数的值。

② 若data-info = “2”，则此时2为字符串“2”，而非数值2。

② 获取具体参数

在事件处理函数中，通过event.target.dataset.参数名，可获取到具体参数的值，如下：

3 条件渲染

（1）wx:if

在小程序中，使用 wx:if = "{{condition}}"来判断是否需要渲染该代码块：

也可以用 wx:elif 和 wx:else 来添加 else 判断：

（2）结合 <block> 使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用 wx:if 控制属性，如下：

注意：<block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

（3）hidden

在小程序中，直接使用 hidden = "{{ condition }}" 也能控制元素的显示与隐藏：

（4）wx:if 与 hidden 的对比

① 运行方式不同

· wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏（隐藏时：此时在调式器看不见该组件）

· hidden 以切换样式的方式（display: none/block;)，控制元素的显示与隐藏（隐藏时：此时在调试器WXML里仍可看见该组件，但其组件大小为0×0）

② 使用建议

· 频繁切换时，建议使用 hidden

· 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else

4 列表渲染

（1）wx:for

根据指定的数据，循环渲染重复的组件结构，语法如下：

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

可以手动指定索引和当前项的变量名：

· 使用 wx:for-index 可以指定当前循环项的索引的变量名

· 使用 wx:for-item 可以指定当前项的变量名

（2）wx:key

小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，提高渲染效率。

如若没有类似上述”id“，可直接将 index 作为索引，如下：

5 相关函数

（1）生成随机数：Math.random()

（2）保存n位小数：.toFixed(n)

（3）将变量输出到控制台上：console.log(e)

（4）将变量反义：!变量名

微信小程序学习笔记3相关推荐

小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
微信小程序学习笔记02：微信小程序注册
文章目录零.学习目标一.小程序注册方法 1.注册 2.登录二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
微信小程序学习笔记01：微信小程序概述
文章目录零.学习目标一.小程序的历史二.如何访问小程序 1.线下扫码 2.微信搜索 3.公众号关联 4.好友推荐 5.历史记录 6.桌面访问 7.附近的小程序三.小程序与HTML5和APP比较 ...
微信小程序学习笔记(7.16)
事件绑定类似于web开发中的 onclick,微信开发者工具中使用的 bindtap,bindinput之类的方法,其实都是封装的JavaScript 通过实验探究数据传递方法写一个input标签 ...

微信小程序学习笔记3