微信小程序学习笔记03：组件学习

一、组件

1、常用的组件

• 微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的UI样式和特定功能效果。

组件	功能	组件	功能
view	视图容器	video	视频
text	文本	checkbox	复选框
button	按钮	radio	单选按钮
image	图片	input	输入框
form	表单	audio	音频

• 以上是我们常用的组件，【点击此处】查看更多组件

二、尺寸单位

1、什么rpx单位

• rpx（Responsive Pixel，自适应像素）。rpx单位是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。
• rpx单位的设计思想是把所有设备的屏幕在宽度上等分为750份，即屏幕的总宽度为750rpx。微信小程序在不同设备上运行的时候，会自动把rpx单位换算成对应的像素单位来渲染，从而实现屏幕适配。

2、rpx与px相互换算

屏幕宽度	rpx换算px(屏幕宽度÷750)	px换算rpx(750÷屏幕宽度)
320px	1rpx ≈ 0.427px	1px ≈ 2.34rpx
375px	1rpx = 0.5px	1px = 2rpx
414px	1rpx = 0.552px	1px ≈ 1.81rpx

三、样式导入

• 在微信小程序中，导入公共样式可以通过在app.wxss中定义全局样式，或在需要使用样式的.wxss文件中使用@import导入公共样式文件。

• 在.wxss中使用@import导入公共样式

• 如果有一些样式在多个地方都需要用到，可以将这些样式定义到一个公共的.wxss文件中，然后在需要应用这些样式的.wxss文件中使用@import导入公共样式。例如：

/** common.wxss **/
.text-red {
  color: red;
}

/** index.wxss **/
@import "/styles/common.wxss";

.title {
  font-size: 16px;
  .text-red;
}

• 这里我们在index.wxss中使用@import导入了common.wxss文件，然后定义了.title选择器，其中.text-red是从公共样式文件中引用的样式规则。这样就可以在多个页面中灵活地使用公共样式，方便管理维护。