Skip to content

知识储备

swiper 和 swiper-item 组件

text 组件

在 HTML 中，一般通过 <span> 标签定义行内文本，而在微信小程序中，则可以通过 text 组件定义行内文本。
需要注意的是，text 组件内部只能嵌套 text 组件

text 组件通过 <text> 标签定义，示例代码如下:

<text>定义行内文本</text>

text 组件的常用属性如下表所示:

属性 类型 说明
user-select boolean 文本是否可选，该属性会使文本节点显示为 inline-block
space string 显示连续空格，可选参数为 ensp(中文字符空格一半大小)、emsp(中文字符空格大小)和 nbsp(根据字体设置的空格大小)
decode boollean 是否解码

设置 space 属性的值为不同的可选参数，可以实现在文本内容中有多个连续的空格时显示多个空格的效果，否则只会显示一个空格；
设置 decode 属性的值为 true，可以实现当 text 组件中的文本包含 &nbsp;、&lt;、&gt;、&amp;、&apos;、&ensp;、&emsp; 时进行解码

如果要实现长按选中文本的效果，可以在 text 组件中设置 user-select 属性的值为 true，示例代码如下:

<text user-select="true">微信小程序</text>

Flex 布局

在移动 Web 开发中，经常使用 Flex 布局来实现自适应页面。
Flex 布局用法便捷，能够通过简单的几行代码实现各种复杂的布局效果。在微信小程序中也可以使用 Flex 布局实现自适应页面

Flex 布局又称为弹性盒(Flexiblle Box) 布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的元素，称为 Flex 容器(简称容器)。它的所有子元素自动称为容器成员，称为 Flex 项目(简称项目)。
容器内有两根轴: 主轴(Main Axis) 和交叉轴(Cross Axis)，默认情况下主轴为水平方向，交叉轴为垂直方向，默认默认沿主轴排列，根据实际需要可以更改项目的排列方式。

若想使用 Flex 布局，首先要设置父元素的 display 属性为 flew，表示将父元素设置为容器，然后就可以使用容器和项目的相关属性了。

接下来，以容器的常用属性 flex-direction、justify-content、align-items 和 flex-wrap 为例进行详解

(1) flex-direction 属性

flex-direction 属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向，它有以下 4 个常用的可选值

  • row: 默认值，主轴为从左到右的水平方向
  • row-reverse: 主轴从右到左的水平方向
  • column: 主轴为从上到下的垂直方向
  • column-reverse: 主轴为从下到上的垂直方向

下面演示如何使用 flex-direction 属性实现项目纵向排列的效果，页面结构的示例代码如下: 

1
2
3
4
5
<view class="demo1">
    <view>1</view>
    <view>2</view>
    <view>3</view>
</view>

页面的样式的示例代码如下: 

1
2
3
4
.demo1 {
    display: flex;
    flex-direction: column;
}

(2) justify-content 属性

justify-content 属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间，它有以下 5 个常用的可选值

  • flex-start: 默认值，表示项目对齐到主轴起点，项目间不留空隙
  • flex-end: 项目对齐到主轴终点，项目间不留空隙
  • center: 项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
  • space-between: 两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间距相等
  • space-around: 每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半

导航栏配置

在微信小程序中，有时为了页面美观，需要更改导航栏的样式。
此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。
导航栏的相关配置项如表所示:

配置项 类型 说明
navigationBarTitleText string 导航栏标题文字内容，默认值为 ""
navigationBarBackgroundColor HexColor 导航栏背景颜色，默认值为 #000000
navigationBarTextStyle string 导航栏标题颜色，仅支持 black 和 white，默认值为 white

需要说明的是，对于新创建的微信小程序，其导航栏的样式并不是默认样式。
这是因为微信开发者工具会在微信小程序的全局配置文件中自动添加导航栏样式的配置。
其中，navigationBarTitleText 被配置为 Weixin，navigationBarBackgroundColor 被配置为 #fff，navigationBarTextStyle 被配置为 black。

下面分别讲解如何在页面配置文件和全局配置文件中对导航栏进行配置。

(1) 在页面配置文件中对导航栏进行配置

下面以 pages/index/index.json 页面配置文件为例，通过 navigationBarTitleText 配置项设置导航栏标题为 "微信小程序"，示例代码如下 

1
2
3
{
    "navigationBarTitleText": "微信小程序"
}

(2) 在全局配置文件中对导航栏进行配置

在全局配置文件 app.json 中，通过 window 配置项可以对全局默认窗口进行配置，配置后会对所有页面都生效，且优先级低于页面级配置。
例如，将配置项写在 app.json 文件的 window 配置项中作为全局配置使用，示例代码如下: 

1
2
3
4
5
6
7
8
{
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle":"black"
  }
}

标签栏配置

通过标签栏可以很方便地在多个页面之间进行切换。
在微信小程序的全局配置项即可实现标签栏配置。toBar 配置项的属性如下表所示:

属性 类型 必填 说明
color HexColor 是 标签栏上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 标签栏上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor HexColor 是 标签栏的背景色，仅支持十六进制颜色
borderStyle string 否 标签栏上边框的颜色，仅支持 black 和 white
list Array 是 标签栏的列表
position string 否 标签栏的位置，仅支持 bottom(底部)和 top(顶部)
custom boolean 否 自定义标签栏

需要注意的是，微信小程序中的标签栏分为顶部标签栏和底部标签栏，标签数量一般在 2~5 个之间

列举了 tabBar 配置项的属性后，下面通过一段代码来对这些属性的使用进行演示，示例代码如下 

1
2
3
4
5
6
7
  "tabBar": {
    "color": "#ccc",
    "list": [],
    "selectedColor": "#ff4c91",
    "borderStyle": "black",
    "backgroundColor": "#fff"
  }

list 数组中的每个元素都是一个代表标签按钮的对象，通过配置该对象的属性可以对标签栏中的每个标签按钮进行配置。
list 数组中最少需要配置 2 个标签按钮，最多只能配置 5 个标签按钮。
标签按钮的相关属性如下表所示

属性 类型 必填 说明
pagePath string 是 页面路径，页面必须在 pages 数组中预先定义
text string 是 标签按钮上的文字
iconPath string 否 未选中时的图标路径，当 position 属性值为 top 时，不显示图标
selectedIconPath string 否 选中时的图标路径，当 position 属性值为 top 时，不显示图标

list 数组的示例代码如下: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
"list": [{
    "pagePath": "pages/index/index",
    "iconPath": "images/home.png",
    "selectedIconPath": "images/home-active.png",
    "text": "首页"
}, {
    "pagePath": "pages/list/list",
    "iconPath": "images/contact.png",
    "selectedIconPath": "images/contact-active.png",
    "text": "联系我们"
}]

在上述代码中，pagePath 属性用于设置页面路径；iconPath 属性用于设置未选中时的图标路径；
selected IconPath 属性用于设置选中时的图标路径；text 属性用于设置标签按钮上显示的文字。
需要注意的是，pages/index/index 和 pages/list/list 这两个页面都必须在 pages 数组中配置并提前创建好对应的文件

vw、vh 单位

在使用 CSS 编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦。
针对这类问题，通过视口单位可以有效解决。

视口表示可视区域的大小，视口单位主要包括 vw(Viewport Width) 和 vh(Viewport Height)，在 CSS 中很常用。
在微信小程序中也可以使用 vw 和 vh 单位。
使用视口单位时，系统会将视口的宽度和高度分为 100 份，1vw 占用视口宽度的百分之一，1vh 占用视口高度的百分之一。
vw、vh 是相对长度单位，永远以视口作为参考。例如，屏幕宽度为 375px，那么 1vw = 375/100 = 3.75px

video 组件