✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序开发实战
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序页面制作——知识储备
“”微信小程序展示了本地生活的和、等分类信息，该页面分为上下两部分，上半部分为区域，下半部分为区域。
组件表示，用于一块可以。swiper组件内部需要嵌套swiper-item组件，组件表示。
组件的默认，默认。组件的初始。
组件通过标签定义，组件通过标签定义。
组件为，，表示当前滑块视图内容一共有3项。滑块视图内容在下只显示，向左滑动显示第2项，再向右滑动可以返回第1项。
swiper组件的如下表:
- 实现轮播图3秒自动无缝切换效果，同时显示面板指示点，并设置指示点颜色为黄色、当前选中指示点颜色为红色
在HTML中，一般通过标签定义，而在微信小程序中，则可以通过组件定义。需要注意的是，。
text组件的常用属性如下表:
Flex布局又称为，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为Flex布局。
若想使用Flex布局，首先要设置父元素的属性为，表示将设置为，然后就可以使用容器和项目的相关属性了。
Flex容器的常用属性如下表：
flex-direction属性：用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向，它有以下4个常用的可选值。
- row：默认值，主轴为从左到右的水平方向。
- row-reverse：主轴为从右到左的水平方向。
- column：主轴为从上到下的垂直方向。
- column-reverse：主轴为从下到上的垂直方向。
编写页面结构代码:
编写页面样式代码:
使用属性实现项目的效果如下图。
justify-content属性：用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间，它有以下5个常用的可选值。
- flex-start：默认值，表示项目对齐到主轴起点，项目间不留空隙。
- flex-end：项目对齐到主轴终点，项目间不留空隙。
- center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
- space-between：两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等。
- space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。
编写页面结构:
编写页面样式:
使用属性实现项目的页面效果如下图。
align-items属性：用于设置项目在交叉轴上的对齐方式，它有以下6个常用的可选值。
- normal：默认值，等同于stretch。
- stretch：未设置项目大小时将项目拉伸，填充满交叉轴方向剩余的空间。
- flex-start：项目顶部与交叉轴起点对齐。
- flex-end：项目底部与交叉轴终点对齐。
- center：项目在交叉轴的中间位置对齐。
- baseline：项目的第一行文字的基线对齐。
flex-wrap属性：用于规定是否允许项目换行，能够设置多行排列时换行的方向，它有以下3个常用的可选值。
- nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩。
- wrap：当容器单行容不下所有项目时允许换行排列。
- wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向。
- 创建项目
在微信开发者工具中创建一个新的微信小程序项目，项目名称为“”，模板选择“”。 - 创建页面
在中配置一个，并将其他页面全部删除。 - 复制素材
从本书配套源代码中找到本案例，复制文件夹到本项目中。
- 编写轮播图区域的结构；
- 编写九宫格区域的结构。
- 编写轮播图区域的样式；
- 编写九宫格区域的样式。
- 编写九宫格区域的整体样式；
- 编写九宫格区域中每一个格子的样式；
- 编写九宫格区域中每一个格子中的图片和文字的样式。
码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。