小程序学习笔记3—基本写法

一、数据绑定

在这里插入图片描述

二、事件绑定

事件绑定大致可以分为以下3类:

类型 绑定方式 说明
tap bindTap 或 bind:tap 手指触摸后马上离开,类似于HTML中的Click事件
input bindinput 或 bind:input 文本框输入事件
change bindchange 或 bind:change 状态改变时触发

当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表所示:

属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组

1、target和currentTarg的区别

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件
在这里插入图片描述

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

通过调用this.setData(Object)方法,可以给页面重新赋值
在这里插入图片描述

3、事件传参

小程序中事件传参比较特殊,不能在绑定事件的同时为事件处理函数传参。因为小程序会把bindtap的属性值,统一当做事件名称来处理。
在这里插入图片描述
在小程序传参中,可以为组件提供data-*自定义属性传参,其中*代表的是参数名。然后通过event.target.dataset.参数名即可获取到具体的参数值。如下:
在这里插入图片描述

4、文本框的数据获取

在小程序中可以通过input事件,来响应文本框的输入事件。用e.dateil.value来获取输入框的值
在这里插入图片描述

5、文本框实现双向绑定

实现步骤:

① 定义数据
② 渲染结构,使用value去给input框绑定上值
③ 美化样式
④绑定input事件处理函数
在这里插入图片描述

三、条件渲染

1、条件渲染方式分类

条件渲染可以通过以下 2 种方式进行渲染:

  1. wx:if={{condition}}wx:elifwx:else来判断。如果要一次性控制多个组件的展示与隐藏,可以使用<block></block>标签将多个组件包起来。
    ps:<block>并不是一个组件,只是一个包裹性质的容器,不会在页面中做出任何渲染
    在这里插入图片描述

  2. hidden={{condition}}也可以控制元素的隐藏与显示
    在这里插入图片描述

2、wx:if 与hidden的对吧

  1. 运行方式不同
  • wx:if动态创建和移除元素的方式,控制元素的显隐
  • hidden以显隐的方式(display:none/block),控制元素的显隐
  1. 使用建议
  • 频繁切换的时候,建议使用hidden
  • 控制条件复杂是,建议使用wx:if搭配wx:elifwx:else进行展示与隐藏的切换

四、列表渲染

通过wx:for可以根据指定的数组,循环渲染重复的组件结构,默认情况下,当前循环项的索引用index表示;当前选好项用item表示。类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高循环效率

在这里插入图片描述

五、rpx单位

rpx单位是微信小程序独有的,用来解决屏幕适配的尺寸单位。其实现原理是:鉴于不同设备屏幕的大小不同,为了实现屏幕自动适配,在宽度上等分为750份(即:当前屏幕总宽度为750rpx)。

  • 在较小的设备上,1rpx所代表的宽度较小
  • 在较大的设备上,1rpx所代表的宽度较大
    在这里插入图片描述

六、样式导入

使用WXSS提供的@import语法,可以导入外联的样式表。@import后跟需要导入的外联样式表的相对路径

在这里插入图片描述

七、全局配置window

全局配置常用项如下:
在这里插入图片描述
小窗口组成部分如下:
在这里插入图片描述
案例如下:
在这里插入图片描述

八、全局配置tabBar

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为

  • 底部tabBar
  • 顶部tabBar
    ps:
  1. tabBar中只能配置最少2个,最多5个tab页签。
  2. 当渲染顶部tabBar时,不显示icon,只显示文本
    在这里插入图片描述

小程序的tabBar由以下部分组成:
在这里插入图片描述
在这里插入图片描述
其中 list又包含以下4个配置项:
在这里插入图片描述
案例如下:
在这里插入图片描述

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>