微信小程序页面制作——本地生活（含代码）

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序开发实战
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序页面制作——知识储备

一、案例分析

“本地生活”微信小程序展示了本地生活的图片信息和美食、装修等分类信息，该页面分为上下两部分，上半部分为轮播图区域，下半部分为九宫格区域。

二、知识储备

1. swiper和swiper-item组件

swiper组件表示滑块视图容器，用于创建一块可以滑动的区域。swiper组件内部需要嵌套swiper-item组件，swiper-item组件表示滑块视图内容。

swiper组件的默认高度为150px，默认宽度为100%。swiper-item组件的初始高度和初始宽度都为100%。

swiper组件通过<swiper>标签定义，swiper-item组件通过<swiper-item>标签定义。

<swiper><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item>
</swiper>

swiper组件为外层容器，内层有3个swiper-item组件，表示当前滑块视图内容一共有3项。滑块视图内容在初始状态下只显示第1项，向左滑动显示第2项，再向右滑动可以返回第1项。

swiper组件的常用属性如下表:

• 实现轮播图3秒自动无缝切换效果，同时显示面板指示点，并设置指示点颜色为黄色、当前选中指示点颜色为红色

<swiper current="2" indicator-dots indicator-color="yellow" indicator-active-color="red" autoplay="true" interval="3000" circular="true"><swiper-item style="background: lightblue">0</swiper-item><swiper-item style="background: lightcoral">1</swiper-item><swiper-item style="background: lightgrey">2</swiper-item>
</swiper>

2. text组件

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

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

• user-select属性：使用user-select属性实现长按选中文本的效果
  
  
  左侧图片展示了手指长按之前 text 组件中的文本内容，右侧图片为使用鼠标模拟手指长按文本之后的选中效果，此处通过长按选中了“程序”文本。如果在微信客户端运行的小程序中长按文本，会出现“复制”选项，可以实现长按复制文本的效果。

3. Flex布局

在微信小程序中可以使用Flex布局实现自适应页面。

Flex布局又称为弹性盒（Flexible Box）布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为Flex布局。

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

Flex容器的常用属性如下表：

项目的常用属性如下表：

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

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

演示flex-direction属性的使用

编写页面结构代码:

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

编写页面样式代码:

.demo1 {display: flex;flex-direction: column;
}

使用flex-direction属性实现项目纵向排列的效果如下图。

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

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

演示justify-content属性的使用

编写页面结构:

<view class="demo2"><view>1</view><view>2</view><view>3</view>
</view>

编写页面样式:

.demo2 {background-color: lightgrey;display: flex;justify-content: space-between;
}

使用justify-content属性实现项目两端对齐的页面效果如下图。

align-items属性：用于设置项目在交叉轴上的对齐方式，它有以下6个常用的可选值。

• normal：默认值，等同于stretch。
• stretch：未设置项目大小时将项目拉伸，填充满交叉轴方向剩余的空间。
• flex-start：项目顶部与交叉轴起点对齐。
• flex-end：项目底部与交叉轴终点对齐。
• center：项目在交叉轴的中间位置对齐。
• baseline：项目的第一行文字的基线对齐。

flex-wrap属性：用于规定是否允许项目换行，能够设置多行排列时换行的方向，它有以下3个常用的可选值。

• nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩。
• wrap：当容器单行容不下所有项目时允许换行排列。
• wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap的反方向。

三、案例实现

1. 准备工作

• 创建项目
  在微信开发者工具中创建一个新的微信小程序项目，项目名称为“本地生活”，模板选择“不使用模板”。
• 创建页面
  在app.json文件中配置一个pages/grid/grid页面，并将其他页面全部删除。
• 复制素材
  从本书配套源代码中找到本案例，复制images文件夹到本项目中。

“本地生活”微信小程序的目录结构

2. 实现“本地生活”微信小程序的页面结构

  在pages/grid/grid.wxml文件中编写页面结构。

• 编写轮播图区域的结构；
• 编写九宫格区域的结构。

<!--pages/grid/grid.wxml-->
<!--轮播图区域的结构 -->
<swiper indicator-dots="true" autoplay="true" interval="3000"><swiper-item><image src="/images/swiper01.jpg"></image></swiper-item><swiper-item><image src="/images/swiper02.jpg"></image></swiper-item>
</swiper>
<!-- 九宫格区域的结构 -->
<view class="grids"><view class="item"><image src="/images/shi.png"></image><text>美食</text></view><view class="item"><image src="/images/xiu.png"></image><text>装修</text></view><view class="item"><image src="/images/yu.png"></image><text>洗浴</text></view><view class="item"><image src="/images/che.png"></image><text>汽车</text></view><view class="item"><image src="/images/chang.png"></image><text>唱歌</text></view><view class="item"><image src="/images/fang.png"></image><text>住宿</text></view><view class="item"><image src="/images/xue.png"></image><text>学习</text></view><view class="item"><image src="/images/gong.png"></image><text>工作</text></view><view class="item"><image src="/images/hun.png"></image><text>结婚</text></view>
</view>

3. 实现“本地生活”微信小程序的页面样式

  在pages/grid/grid.wxss中编写轮播图区域和九宫格区域的页面样式。

• 编写轮播图区域的样式；
• 编写九宫格区域的样式。
• 编写九宫格区域的整体样式；
• 编写九宫格区域中每一个格子的样式；
• 编写九宫格区域中每一个格子中的图片和文字的样式。

/* pages/grid/grid.wxss */
/* 轮播图区域的样式 */
swiper {height: 350rpx;
}
swiper image {width: 100%;height: 100%;
}
/* 九宫格区域的样式 */
.grids {display: flex;flex-wrap: wrap;
}
/* 九宫格区域中每一个格子的样式 */
.grids .item {width: 250rpx;height: 250rpx;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.grids .item:nth-child(3) {border-right: 0;
}
.grids .item:nth-child(6) {border-right: 0;
}
.grids .item:nth-child(9) {border-right: 0;
}
/* 九宫格区域中每一个格子中的图片和文字的样式 */
.grids .item image {width: 70rpx;height: 70rpx;
}
.grids .item text {color: #999;font-size: 28rpx;margin-top: 20rpx;
}

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。