微信小程序day03

bindinput的语法格式
在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:
①通过bindinput,可以为文本框绑定输入事件:
<input bindinput= ”inputHandler">
②在页面的js文件中定义事件处理函数:
inputHandler(e) { // e.detail.value 是变化过后，文本框最新的值
console. log(e.detail.value)
}

实现文本框和data之间的数据同步
实现步骤:
①定义数据
②渲染结构
③美化样式
④绑定input事件处理函数

wx:if
在小程序中，使用wx:if="{condition}}"来判断是否需要渲染该代码块:
True
也可以用wx:elif和Wx:else来添加else判断:
男
女
<view wx:elsex 保密

结合使用wx:if
如果要一次性控制多个组件的展示与隐藏，可以使用-个标签将多个组件包装起来，并在
标签上使用wx:if控制属性，示例如下:

view1
view2

并不是一个组件, 它只是一个包裹性质的容器， 不会在页面中做任何渲染。

hidden
在小程序中，直接使用hidden="{{ condition }}"也能控制元素的显示与隐藏:
条件为true隐藏，条件为false 显示

wx:if与hidden的对比
①运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;)，控制元素的显示与隐藏
②使用建议
频繁切换时， 建议使用hidden
控制条件复 杂时,建议使用wx:if搭配wx:elif、wx:else 进行展示与隐藏的切换

wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构，语法示例如下:

索引是: {{index}} 当前项是: {{item}}

默认情况下，当前循环项的索引用index表示;当前循环项用item表示。

wx:key的使用
类似于Vue列表渲染中的:key,小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值,
从而提高渲染的效率，示例代码如下:
// data数据
data:
userL ist: [
{ id: 1, name: ‘小红’ },
{ id: 2, name: ‘小黄’ },
{ id: 3, name: ‘小白’ }
]
}
// wxml 结构
{{item. name}}

WXSS和CsS的关系，
WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。
与CSS相比，WXSS扩展的特性有:
rpx尺寸单位
@import样式导入

rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)。在较小的设备上，1rpx 所代表的宽度较小，在较大的设备上， 1rpx所代表的宽度较大，小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。

@import的语法格式
@import后跟需要导入的外联样式表的相对路径，用;表示语句结束