小程序学习笔记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:elif、wx:else来判断。如果要一次性控制多个组件的展示与隐藏，可以使用<block></block>标签将多个组件包起来。
   ps：<block>并不是一个组件，只是一个包裹性质的容器，不会在页面中做出任何渲染
   

2. hidden={{condition}}也可以控制元素的隐藏与显示
   

2、wx:if 与hidden的对吧

1. 运行方式不同

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

2. 使用建议

• 频繁切换的时候，建议使用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个配置项：

案例如下：