微信小程序

本文主要是介绍微信小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

1. 数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据

2.Mustache （双大括号）语法的主要应用场景如下：

绑定内容：{{内容}}
绑定属性：如:src="{{imgSrc}}"   ,组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)

运算（三元运算、算术运算等）：

3.动态样式：两种写法，用[ ]包裹或者传统class写法

动态控制多个class

　只要在花括号内做三元运算选择相应的class,他们之间用空格隔开就好

4.行内样式style：style="font-size:20px;font-family:"宋体";"

事件绑定

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

1. 组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件

互斥事件绑定

除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。

事件的捕获阶段

触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

 1.事件对象的属性

target 和 currentTarget 的区别

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view 的 tap 事件处理函数。
此时，对于外层的 view 来说：
 e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
 e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

dataset：事件源组件或当前组件上由data-开头的自定义属性组成的集合

2、在事件处理函数中为 data 中的数据赋值

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

3、事件传参

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字

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

4、 bindinput 的语法格式

① 通过 bindinput，可以为文本框绑定输入事件

② 在事件处理函数中   e.detail.value  是变化过后，文本框最新的值

5、 实现文本框和 data 之间的数据同步

如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。

如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：<input model:value="{{value}}" />

1、条件渲染 
wx:if   wx:elif 和 wx:else 
 <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
2、列表渲染
wx:for
类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

这篇关于微信小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！