前端(小程序)学习笔记(CLASS 1):组件

1、小程序中组件的分类

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:

* 视图容器,* 基础内容,* 表单组件,* 导航组件

媒体组件,map地图组件,canvas画布组件,开放能力,无障碍访问

2、常用的视图容器类组件

1、view

普通视图区域

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

常用来实现页面的布局效果

2、scroll-view

可滚动的视图区域

常用来实现滚动列表效果

* 给组件添加scroll-y表示可以在纵向上滑动,需要加一个固定的高度

3、swiper和swiper-item

轮播图容器组件 和 轮播图item组件

* swiper组件的常用属性

|------------------------|---------|----------------|------------|
| 属性 | 类型 | 默认值 | 说明 |
| indicator-dots | boolean | false | 是否显示面板指示点 |
| indicator-color | color | rgba(0,0,0,.3) | 指示点颜色 |
| indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
| autoplay | boolean | false | 是否自动切换 |
| interval | number | 5000 | 自动切换时间间隔 |
| circular | boolean | false | 是否采用衔接滑动 |

3、常用的基础内容组件

1、text

文本组件

类似于HTML中的span标签,是一个行内元素

通过text组件的selectable属性,实现长按选中文本内容的效果

2、rich-text

通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构

即可以识别文本中的标签

4、其他常用组件

1、button

按钮组件

功能比HTML中的button按钮丰富

通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

type="primary" 主色调按钮

type="warn" 警告按钮

size="mini" 小尺寸按钮

加上plain为镂空按钮

2、image

图片组件

image组件默认宽度约为300px、高度约为240px

image组件的mode属性用来指定图片的裁剪和缩放功能,常用的mode属性值如下:

|-------------|-------------------------------------------------------------------|
| mode值 | 说明 |
| scaleToFill | (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 |
| aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来,也就是说,可以完整地将图片显示出来 |
| aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取 |
| widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
| heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |

3、navigator

页面导航组件

类似于HTML中的a链接

5、小程序的宿主环境-API

概述:小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等

分类:

1、事件监听API

特点:以on开头,用来监听某些事件的触发

举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件

2、同步API

特点1:以Sync结尾的API都是同步API

特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常

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

3、异步API

特点:类似于JQuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果

举例:wx.request()发起网络数据请求,通过success回调函数接收数据

相关推荐
im_AMBER3 小时前
学习日志19 python
python·学习
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen7 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
说私域7 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往7 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
超浪的晨7 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
使二颗心免于哀伤9 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意9 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮10 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper