微信公众号开发

微信小程序

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

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-bindcapture-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 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

 

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