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 进行编写，例如：经常会用到 div、p、 span、img、a 等标签

页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择器

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

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

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

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

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

小程序样式官方文档：WXSS

---

2. 样式-尺寸单位

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

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

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

🔔 开发建议：

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

iPhone6 的设计稿一般是 750px，小程序的宽是 750rpx

在我们开发小程序页面时，量取多少 px ，直接写多少 rpx，开发起来更方便，也能够适配屏幕的适配

原因：

设计稿宽度是 750px，而 iPhone6 的手机设备宽度是 375px， 设计稿想完整展示到手机中，就需要缩小一倍

在 iPhone6 下，px 和 rpx 的换算关系是：1rpx = 0.5px， 750rpx = 375px，刚好能够填充满整个屏幕的宽度

---

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

在进行网页开发时，我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一，然后在每个页面或组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式，我们来学习一下小程序中的全局样式和局部样式。

全局样式：指在 app.wxss中定义的样式规则，作用于每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

---

4. 常用组件

4.1.view 组件

view：视图容器组件，相当于 HTML 中的 div，是一个块级元素，独占一行

4.2.text 组件 

text：文本组件，相当于 span，是一个行内元素

4.3.image 组件

在小程序中没有 img 标签，添加图片需要使用小程序提供的image组件，image组件的语法如下：

<!-- src：图片资源地址 -->
<!-- mode：图片裁剪、缩放的模式 -->
<!-- lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 -->
<image src="/assets/tom.png" mode="heightFix" lazy-load=”{{ true }}“ />

4.4.navigator 组件

在网页开发中，如果想实现页面的跳转需要使用 a 标签，在小程序中如果想实现页面的跳转则需要使用 navigator 组件，语法如下：

<!-- url：当前小程序内的跳转链接 --> 
<navigator url="/pages/list/list">

在小程序中，如果需要进行跳转，需要使用 navigation 组件，常用的属性有 2 个：

1. url ：当前小程序内的跳转链接

2. open-type ：跳转方式

   • navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

   • redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面

   • switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

   • reLaunch：关闭所有页面，打开到应用内的某个页面

   • navigateBack：关闭当前页面，返回上一页面或多级页面

📌 注意事项：

1. 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔 例如：/list?id=10&name=hua，在 onLoad(options) 生命周期函数 中获取传递的参数

2. 属性 open-type="switchTab" 时不支持传参

4.5.swiper 和 swiper-item 组件

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML 、CSS 实现轮播图的样式结构，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。

1. swiper：滑块视图容器，常用来实现轮播图，其中只可放置 swiper-item 组件，否则会导致未定义的行为

2. swiper-item：仅可放置在swiper组件中，宽高自动设置为100%，代表 swiper 中的每一项

我们可以使用 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)
其他属性...

4.6.scroll-view 组件 

可滚动视图区域，适用于需要滚动展示内的场景，它可以在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容，scroll-view 组件可以设置滚动方向、滚动条样式、滚动到顶部或底部时的回调函数等属性，可以根据实际需求进行灵活配置。

//横向滚动
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>

//纵向滚动
  <scroll-view class="scroll-y" scroll-y>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

---

5.字体图标的使用

在项目中使用到的小图标，一般由公司设计师进行设计，如果如果自行设计这些图标会比较麻烦且耗费时间，这时候我们就可以使用到阿里巴巴矢量图库，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。

小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。

首先我们先找到所需的图标，加入到项目库，进入项目库中生成链接。也可以将字体图标库下载到本地

点击链接，会将生成的 CSS 在新的链接页面进行打开，ctrl + s，将该文件重命名为.wxss 后缀名，然后保存到项目根目录下的static 文件夹下。

 在全局样式文件app.wxss中导入fonts.wxss字体图标文件，然后获取到图标类名，在项目中使用即可，应用于页面
 

@import "./static/fonts.wxss";

<view class="myTest">
  <view class="iconfont icon-tuikuan"></view>
</view>

注意：使用字体图标可能会报错：

[渲染层网络层错误] Failed to load font http://at.alicdn.com/t/c/font_3946178_q5oidsl5xo.woff2?t=1680795910637 net::ERR_CACHE_MISS (env: Windows,mp,1.06.2303220; lib: 2.30.4)

**在控制台出现错误，会影响开发调试，解决方案是：将字体图标转换成 base64 的格式**

 

---

6. 背景图片的使用

当编写小程序的样式文件时，我们可以使用 background-image 属性来设置一个元素的背景图像，但是小程序的 background-image 不支持本地路径。

<view class="image"></view>

.image {
  background-image: url('../../static/微信.jpg');
}

本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签