微信小程序开发学习笔记[031~037节]

最新推荐文章于 2024-10-24 23:40:18 发布

Zhhh＿

最新推荐文章于 2024-10-24 23:40:18 发布

阅读量965

点赞数 14

文章标签：学习笔记

本文链接：https://blog.csdn.net/JennyZH211/article/details/138230916

版权

031 事件系统--事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件,也没有click 等事件，小程序中绑定事件使用bind方法，click 事件也需要使用tap事件来进行代替，绑定事件的方式有两种:
第一种方式: bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件名，例如: <view bind:tap="fnName"></view>
第二种方式: bind事件名，bind 后面直接跟上事件名，例如: <view bindtap="fnName"> </view>
事件处理函数需要写到.js 文件中，在.js文件中需要调用小程序提供的Page方法来注册小程序的页面，我们可以直接在Page方法中创建事件处理函数。

第一种绑定事件的方式：bind：事件名
事件处理函数需要写到Page中才可以

第二种绑定事件的方式：bind事件名

在小程序中，input输入框默认没有边框，需要自己添加样式

032 事件系统--事件分类以及阻止事件冒泡

事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件的事件被触发后，该事件会向父节点传递
非冒泡事件:当一个组件的事件被触发后，该事件不会向父节点传递
使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。

033 事件系统--事件传参-data-自定义数据

事件传参:在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参
在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发
在组件上通过data-*的方式定义需要传递的数据，其中*是自定义的属性，例如: <view data-id=" 100" bindtap="handler" />
然后通过事件对象进行获取自定义数据

如果需要进行事件传参，需要在组件上通过data-的方式传递数据

currentTarget 事件绑定者，也就是指:哪个组件绑定了当前事件处理函数
target 事件触发者，也就是指:哪个组件触发了当前事件处理函数
currentTarget和target都是指按钮，因为是按钮绑定的事件处理函数，同时点击按钮触发事件处理函数
这时候通过谁来获取数据都可以

点击蓝色区域(不点击按钮)
currentTarget 事件绑定者: view
target事件触发者: view
currentTarget 和target都是指view, 如果想获取view身上的数据，使用谁都可以

点击按钮(不点击蓝色区域)
currentTarget事件绑定者: view
target事件触发者:按钮
如果想获取view身上的数据，就必须使用currentTarget 才可以
如果想获取的是事件触发者本身的数据，就需要使用target

在传递参数的时候，如果自定义属性是多个单词，单词与单词直接使用中划线 -进行连接
在事件对象中会被转换为小托峰写法

在传递参数的时候，如果自定义属性是多个单词，单词如果使用的是小托峰写法
在事件对象中会被转为全部小写的

★注意事项:
1. event.target 是指事件触发者，event. currentTarget是指事件绑定者
2.使用data-方法传递参数的时候，多个单词由连字符-连接，连字符写法会转换成驼峰写法
3.使用 data-方法传递参数的时候，而大写字符会自动转成小写字符

034 事件系统--事件传参-mark-自定义数据

小程序进行事件传参的时候，除了使用data-*属性传递参数外,还可以使用mark标记传递参数
mark是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的target 节点。同时mark还可以用于承载一些自定义数据
在组件上使用mark:自定义属性的方式将数据传递给事件处理函数,例如: <view mark:id=" 100" bindtap="handler" />
然后通过事件对象进行获取自定义数据
如果需要使用mark进行事件传参，需要使用mark:自定义属性的方式进行参数传递

先点击蓝色区域(不点击按钮)
通过事件对象获取的是view 身上绑定的数据

先点击按钮(不点击蓝色区域)
通过事件对象获取到的是触发事件的节点以及父节点身上所有的mark 数据

035 wxml语法--声明和绑定数据

小程序页面中使用的数据均需要在Page()方法的data对象中进行声明定义
在将数据声明好以后，在WXML使用Mustache语法(双大括号{{ })将变量包起来，从而将数据绑定
在{{ }}内部可以做- -些简单的运算,支持如下几种方式:
1. 算数运算
2. 三元运算
3.逻辑判断
4.其他...
注意事项:在{{ }}语法中,只能写表达式，不能写语句，也不能调用js相关的方法

在小程序页面中所需要使用的数据均来自于data对象

如果需要展示数据，在wxml中需要使用双大括号写法将变量进行包裹
绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹
如果属性值是布尔值，也需要使用双大括号进行包裹

算术运算
<view>{{ id+ 1 }}＜/view>
<view>{{ id - 1 }}</view>

三元运算
<view>{{ id ===1 ?＇等于＇:＇不等于＇}}</view>

逻辑判断
<view>{{ id === 1}}</view>
在双大括号写法内部，只能写表达式，不能写语句，也不能调用js的方法