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

基本写法

一、数据绑定

二、事件绑定

事件绑定大致可以分为以下3类：
类型绑定方式说明tapbindTap 或 bind:tap手指触摸后马上离开，类似于HTML中的Click事件inputbindinput 或 bind:input文本框输入事件changebindchange 或 bind:change状态改变时触发
当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：
属性类型说明typeString事件类型timeStampInteger页面打开到触发事件所经过的毫秒数targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合detailObject额外的信息touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件，当前变化的触摸点信息的数组

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:elif、wx:else来判断。如果要一次性控制多个组件的展示与隐藏，可以使用<block></block>标签将多个组件包起来。 ps：<block>并不是一个组件，只是一个包裹性质的容器，不会在页面中做出任何渲染
2. hidden={{condition}}也可以控制元素的隐藏与显示

2、wx:if 与hidden的对吧

1. 运行方式不同

• wx:if以动态创建和移除元素的方式，控制元素的显隐
• hidden以显隐的方式（display:none/block），控制元素的显隐

1. 使用建议

• 频繁切换的时候，建议使用hidden
• 控制条件复杂是，建议使用wx:if搭配wx:elif、wx: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个配置项：

案例如下：