当前位置:   article > 正文

3.微信小程序之常用组件篇_微信小程序组件

微信小程序组件

目录

1. 组件和样式介绍

2. 样式-尺寸单位

3. 样式-全局样式和局部样式

4. 常用组件

4.1.view 组件

4.2.text 组件 

4.3.image 组件

4.4.navigator 组件

4.5.swiper 和 swiper-item 组件

4.6.scroll-view 组件 

5.字体图标的使用

6. 背景图片的使用


1. 组件和样式介绍

在开 Web 网站的时候:

页面的结构由 HTML 进行编写,例如:经常会用到 divpspanimga 等标签

页面的样式由 CSS 进行编写,例如:经常会采用 .class#idelement 等选择器

但在小程序中不能使用 HTML 标签,也就没有 DOM 和 BOM,同时仅仅支持部分 CSS选择器

不过不用担心,小程序中提供了同样的角色:

其中 WXML 充当的就是类似 HTML 的角色,只不过在 WXML 中没有divpspanimga 等标签,在 WXML 中需要使用 小程序提供的 viewtextimagenavigator 等标签来构建页面结构,小程序提供的这些标签,我们称为 "组件",开发者可以通过组合这些基础组件进行快速开发。

WXSS 则充当的就是类似 CSS 的角色,WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改,新增了尺寸单位 rpx、提供了全局的样式和局部样式,另外需要注意的是WXSS 仅支持部分 CSS 选择器

小程序给提供的组件文档:WXML

小程序样式官方文档:WXSS


2. 样式-尺寸单位

随着智能手机的发展,手机设备的宽度也逐渐多元化,这就需要开发者在开发的时候,需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题,微信小程序推出了 rpx 单位

小程序运行在手机移动端,宿主环境是微信,因为手机尺寸的不一致,在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,会采用一些技巧来算像素单位从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可。

rpx: 小程序新增的拓展单位,可以根据屏幕宽度进行自适应,小程序规定任何型号手机:满屏幕宽都为 750 rpx

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】

推荐阅读
相关标签