【小程序】组件

简介: 【小程序】组件

1. 小程序中组件的分类

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

视图容器

基础内容

表单组件

导航组件

媒体组件

map 地图组件

canvas 画布组件

开放能力

无障碍访问

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


view

普通视图区域

类似于 HTML 中的 div,

是一个块级元素

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

scroll-view

可滚动的视图区域

常用来实现滚动列表效果

swiper 和 swiper-item

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


3. view 组件的基本使用

实现如图的 flex 横向布局效果:


d95ebbcb7bf142c9bbff70e9afb0ce11.png


4. scroll-view 组件的基本使用

实现如图的纵向滚动效果:


9aa909180a0a426b9ecab49009366922.png


5. swiper 和 swiper-item 组件的基本使用

实现如图的轮播图效果:


45160596a9aa432b910a0eaa1d51db6b.png

6. swiper 组件的常用属性


26ee07a0287f49da8d7a671ae9834baf.png

7. 常用的基础内容组件

text

文本组件

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

rich-text

富文本组件

支持把 HTML 字符串渲染为 WXML 结构


8. text 组件的基本使用

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


07a71390cdbb470daf2f3ad9a448e9b4.png

9. rich-text 组件的基本使用

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


bf750323ba8e4102b6ad1e369f152601.png

10. 其它常用组件


button


按钮组件 功能比 HTML 中的 button 按钮丰富


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


等)


image


图片组件


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


navigator(后面课程会专门讲解)


页面导航组件


类似于 HTML 中的 a 链接  


11. button 按钮的基本使用


ba7afbacf1da43898006a07ceb68d16f.png


12. image 组件的基本使用


6095336988c04e269481395890450f5f.png

13. image 组件的 mode 属性

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


e74517e19863463c81d930eadec27a5d.png


相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
1月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
1月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
1月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
1月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
1月前
|
小程序
【微信小程序】-- 其它常用组件介绍 -- button & image(八)
【微信小程序】-- 其它常用组件介绍 -- button & image(八)