小程序基础基础1

小程序

1、input输入框的事件处理函数：

e.detail.value：获取当前文本框的值

this.setData：修改当前data里面的数据 this.setData({left:0})

2、条件渲染（condition:为true或者false）

(1)、wx:if="{ {condition}}"来判断是否渲染该代码块

        wx:if="{
 {condition}}"
​
•       wx:elif="{
 {condition}}"
​
•       wx:else="{
 {condition}}"

(2)、如果要一次性控制多个组件的展示和隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性。<block>并不是一个组件，它只是包装性质的容器，不会在页面中做任何渲染。

(3)、在小程序中，直接使用hidden="{ {condition}}"也能控制元素的显示和隐藏。

(4)、vx:if与hidden的对比

a、运行方式不同

wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden以切换样式的方式(display:none/block)，控制元素的显示和隐藏

b、使用建议

频繁切换时，建议使用hidden

控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换。

3、列表渲染 wx:for

<view wx:for="{
 {array}}">
    索引是：{
 {index}}当前项是{
 {item}}
</view>

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

使用wx:for-index可以指定当前循环项的索引的变量名。

使用wx:for-item可以指定当前项的变量名。

wx:key的使用，提高渲染效率。

4、wxss与css相比的扩展：

rpx尺寸导入；(rpx尺寸是微信独有的，用来解决屏适配的尺寸单位，原理是rpx把所有设备的屏幕，在宽度上等分为750份，即当前屏幕的总宽度为750rpx)。

@import样式导入；

5、@import的语法格式;

@import后跟上需要导入的外联样式表的相对路径，用；表示语句结束。示例：@import "common.wxss";

6、全局样式和局部样式

全局样式是定义在app.wxss中的样式为全局样式，作用域每一个页面。

局部样式是在页面的.wxss文件中定义的样式为局部样式，只能作用于当前页面。

注意：(1)、当局部样式和全局样式发生冲突时，根据就近原则，局部样式会覆盖全局样式。

(2)、当局部样式的权重大于或者等于全局样式的权重时，才会覆盖 全局的样式。

7、app.json文件：

(1)、pages：记录当前小程序所有页面的存放路径；

(2)、window：全局设置小程序窗口的外观；

(3)、tabBar：设置小程序底部tabBar效果࿱