小程序学习打卡day2

WXML语法

数据绑定

1. 在data中定义数据  

Info：字符串类型数据

Msglist：数组类型数据

对应页面的.js文件中定义

1. 在WXML中使用数据

Mustache语法（双大括号）将变量包起来

应用场景：

绑定内容：

绑定属性：

在.js文件中找到data添加imgSrc

在.wxml文件中利用双重大括号绑定

运算

在.js文件中添加随机两位小数randomNum

在.wxml文件中使用<view>组件渲染

事件绑定

事件是渲染层到逻辑层的通讯方式

常用事件：

Tap：

绑定方式：bindtap或bind：tap 类似click事件

Input：

绑定方式：bindinput或bind：input 文本框输入事件

Change：

绑定方式：bindchange或bind：change  状态改变时触发

事件对象event的属性列表

Type    string类   事件类型

Timestamp   integer类  页面打开到触发事件所经过的毫秒数

Target   object类     触发事件的组件的一些属性值集合

Currenttarget   object类   当前组件的一些属性值集合

Detail     object类   额外的信息

Touches   array类     触摸事件，当前停留在屏幕里的触摸点信息的数组

changedTouches    array类   触摸事件，当前变化的触摸点信息的数组

Target和currentTarget的区别

Target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

点击按钮时，点击事件以冒泡形式向外扩散，触发外层view的tap事件
对于外层view来说：e.target是触发事件的源头组件，因此，e.target是内部的按钮组
件
解释：在事件冒泡的过程中，当外层 view 处理事件时，e.currentTarget 就指向外层 view。而 e.target 始终指向事件的源头，也就是按钮。

Bindtap语法格式

在.js文件中添加一个按钮事件处理函数

在.wxml文件中设置按钮类型，绑定tap触摸事件

在控制台查看按钮输出信息

在事件处理函数中为data中的数据赋值

调用this.setdata(dataobject)方法，给页面data中的数据重新赋值

点击按钮后count值+1

事件传参

不能在绑定事件的同时为事件处理函数传递参数

（无法正常运行）

可以使用data-*自定义属性传参，*代表参数名字

Info被解析为参数名字，2会被解析为参数值

通过event.target.dataset.参数名即可获取到具体参数的值

（data-info若要传数字型参数要加上双重大括号，只用双引号是文本类型的参数）

（固定写法，只有参数名字能变）

Input绑定语法

绑定input事件

添加输入框处理函数

实现文本框与data之间的数据同步

定义数据->渲染结构->美化样式->绑定input事件处理函数

绑定input事件，在data中定义msg元素

美化样式，使用setdata来读取

条件渲染

使用wx：if{{condition}}来判断是否需要渲染该代码块

也可以用wx:elif和wx:else来添加else判断

结合<block>使用wx:if

一次性控制多个组件的展示与隐藏（并不是一个组件，只是一个包裹性的容器，不会在页面中做任何渲染）

用view包裹的话也会渲染，block减少不必要元素，提升渲染性能

Hidden

控制元素的显示与隐藏

区别：wx：if 通过动态的创建和移除元素来控制元素的展示与隐藏

      Hidden以切换样式的方式控制元素的显示与隐藏

需要频繁切换时用hidden

控制条件复杂时使用wx：if

列表渲染

Wx：for根据指定数组循环渲染重复的组件结构

index是索引项，item是当前循环项

Wx:key的使用

指定唯一的key值提高渲染效率

当列表项是对象时，推荐使用对象的唯一属性作为 wx:key，这样可以确保在列表项发生变化时，小程序能够准确地识别每个列表项。

Wxss模版样式

扩展的特性：rpx尺寸单位+@import样式导入

Rpx是用来解决屏幕适配的尺寸单位

建议以iphone6作为标准视觉稿

@import语法格式

@import后跟样式表的相对路径

新建文件夹存放wxss样式文件，设置样式

导入样式

全局样式与局部样式

在app.js中设置view组件的样式

效果：

局部样式：

只作用于当前页面的.wxss文件

采用就近原则，局部和全局冲突时，局部覆盖全局

当局部样式的权重大于等于全局样式的权重时才会覆盖

局部

全局

全局配置

Window

窗口组成：

常用配置项：

标题、背景色、标题颜色（只能黑或白）

下拉刷新样式以及下拉背景色

上拉触底距离设置

（通过上拉滑动操作，从而加载更多数据的行为）

tabBar

用于实现多页面快速切换

分为底部tabBar和顶部tabBar

（只能配置最多5个、最少2个tab页签）

（渲染顶部tabBar时，不显示icon，只显示文本）

组成部分：

配置项：

配置方法：

新增tabBar->添加list->设置路径及文本内容

今天学的会稍微慢了点，效率总体还不是很高，但是对能够自己完成项目的期待度又提高了几分ovo，太多的分类暂时无法完全掌握，只能练中学，学里练咯！