小程序 —— Day1

组件 — view和scroll-view

view

类似于HTML中的div，是一个块级元素

案例：通过view组件实现页面的基础布局

scroll-view

可滚动的视图区域，用来实现滚动列表效果

案例：实现纵向滚动效果

scroll-x属性：允许横向滚动；scroll-y属性：允许纵向滚动

在使用竖向滚动的时候，必须给 scroll-view 一个固定高度

组件 — swiper和swiper-item

swiper

轮播图容器组件

swiper-item

轮播图item组件（里面每一个可以轮播的item项）

案例：实现轮播图效果

swiper组件的常用属性

indicator-dots   默认值：false  是否显示小圆点

indicator-color 指示点颜色

indicator-active-color  当前选中的指示点颜色

autoplay 是否自动切换轮播图

interval 更改自动切换时间间隔 （默认为5s（5000））

circular 默认值：false 是否采用衔接滚动 （最后一张 -> 第一张）

组件 — text和rich-text

text

文本组件；类似于HTML中的span标签，是一个行内元素

selectable属性，实现长按选中文本内容的效果（场景：长按选中，复制）

注意：小程序里只有text组件支持长按选中操作

rich-text

富文本组件；支持把HTML字符串渲染成WXML结构

nodes属性，实现把HTML字符串渲染为对应的UI结构

组件 — button和image

button

type属性 —— 指定按钮类型

size="mini" —— 小尺寸按钮

plain属性 —— 镂空按钮（没背景色，但有边框线）

image

mode属性

常用属性值：

scaleToFill 默认值 使图片的宽高完全拉伸至填满image元素

aspectFit 在保持纵横比的情况下缩放图片，使图片的长边能完全显示出来

aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来（也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取）

widthFix 宽度不变，高度自适应，保持原图宽高比不变

heightFix 高度不变，宽度自适应，保持原图宽高比不变（直到把整张图片完整显示出来为止）

小程序API的三大分类

事件监听API

以on开头，用来监听某些事件的触发

eg. wx.onWindowResize 监听窗口尺寸变化的事件

同步API

以Sync结尾的API

eg. wx.setStorageSync('key','value')向本地存储中写入内容

异步API

需要通过success、fail、complete接收调用的结果

eg. wx.request() 发起网络数据请求，通过success回调函数接收数据