第3章莫凡商城首页的静态布局设计

第 3 / 9 卷作者：刘刚、高伟南、李华威日期：2026-05-29

第3章莫凡商城首页的静态布局设计

开发一个莫凡商城微信小程序时，需要确保用户可以浏览各种商城图书信息。在设计小程序页面时，需要使用不同的视图容器组件来展示

不同的内容并实现交互效果。view组件是最基本的容器组件，可以使用它来布局其他组件，设计页面的结构和层次。swiper组件可以实现图

片轮播的效果，可以在首页上使用它展示各个景点的精美图片，让用户通过滑动屏幕浏览不同的景点图片。text组件用于显示文字内容，可

以使用它来展示景点的名称、特点等相关信息。image组件用于显示图片，可以使用它来展示景点的封面图或其他相关图片，吸引用户的注

意。

莫凡商城首页包含3个部分：第1部分是用来搜索莫凡商城图书的搜索区域；第2部分是通过海报轮播效果显示的轮播广告；第3部分是用来

展示图书商品的区域，每个区域展示3本图书，其中“更多”可以链接更多的图书商品。

3.1需求分析

莫凡商城首页包含搜索、海报轮播、展示图书商品、查看更多图书商品等功能，它的布局设计需要用到视图容器组件，如view组件、swiper

组件、text组件、image组件等。本章会详细介绍这些组件及其使用方法，海报轮播效果使用swiper组件来实现；点击搜索区域和查看更多图

书商品时会进行页面跳转，会用到导航组件和导航API；页面的样式需要用WXSS来渲染，进行页面美化布局，最终完成莫凡商城首页的静态

布局设计。

3.2视图容器组件的应用

视图容器组件是用来进行页面布局的，不同的视图容器组件可以用来实现不同的布局效果，view组件是基本的容器组件，scroll-view是可滚

动视图容器组件，swiper是滑块视图容器组件，movable-view是可移动视图容器组件。

3.2.1 视图容器组件view

view组件是WXML页面布局的基础组件，也是最常用的页面布局组件，它的使用方法和HTML里的<div>类似。view组件的属性如表3.1所示。

表3.1 view组件的属性属性类型默认值说明hover-classstringnone指定点击时的样式类。当hover-

class="none"时，表示没有点击态效果hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现

点击态hover-start-timenumber50指定按住后多久出现点击态，单位为mshover-stay-timenumber400指定手指松

开后点击态的保留时间，单位为ms

3.2.2 可滚动视图容器组件scroll-view

scroll-view组件允许视图容器中的内容进行横向滚动或纵向滚动，类似于浏览器的水平滚动条和垂直滚动条，可以在有限的显示窗口中，通

过滚动的方式显示更多的内容。scroll-view组件的常用属性如表3.2所示。

表3.2 scroll-view组件的常用属性属性类型默认值说明scroll-xbooleanfalse允许横向滚动scroll-

ybooleanfalse允许纵向滚动scroll-topnumber设置纵向滚动条位置scroll-leftnumber设置横向滚动条位置scroll-

into-viewstring值应为某子元素id，表示滚动到该元素时，元素顶部对齐滚动区域顶部scroll-with-

animationboolean在设置滚动条位置时使用动画过渡enable-back-to-topbooleanfalse在iOS中点击顶部状态栏、

Android系统中双击标题栏时，滚动条返回顶部（只支持纵向滚动）bindscrolltouppereventhandle滚动到顶部/左

端时会触发scrolltoupper事件bindscrolltolowereventhandle滚动到底部/右端时会触发scrolltolower事件

注意

（1）基础库2.4.0以下版本不支持嵌套textarea（多行输入框）、map（地图）、canvas（画布）

和video（视频）组件。

（2）scroll-into-view的优先级高于scroll-top。

（3）在滚动scroll-view组件时会阻止页面回弹，无法触发onPullDownRefresh事件；若要触发，需要使用页面的滚动组件，而不是scroll-view组件。

3.2.3 滑块视图容器组件swiper

swiper组件是经常会用到的组件，它可以实现海报轮播效果或者多种登录方式（账号与密码登录、手机号快捷登录等）之间的切换，可以用

来在指定区域内切换显示不同内容。swiper组件的属性如表3.3所示。

表3.3 swiper组件的属性属性类型默认值说明indicator-dotsbooleanfalse设置是否显示面板指示点

indicator-colorcolorrgba(0, 0, 0, 3)设置指示点颜色indicator-active-colorcolor#000000设置当前选中的指示点颜

色autoplaybooleanfalse设置是否自动切换currentnumber0设置当前页面的indexintervalnumber5000设置自动切

换的时间间隔durationnumber500设置滑动动画时长circularbooleanfalse设置是否采用衔接滑动

verticalbooleanfalse设置滑动方向是否为纵向

3.2.4 可移动视图容器组件movable-view

movable-view是可移动视图容器组件，在页面中可以被拖曳。在使用这个组件时，需要先定义可移动区域movable-area，然后定义直接子

节点movable-view，否则不能移动。movable-area需要设置width和 height属性，不设置时默认为10 px。movable-view也需要设置width和

height属性，不设置时默认为10 px。movable-view默认为绝对定位， top和left属性为0 px。movable-view组件的常用属性如表3.4所示。

表3.4 movable-view组件的属性属性类型默认值说明directionstringnone设置movable-view的

移动方向。属性值有all、vertical、horizontal、noneinertiabooleanfalse设置movable-view是否带有惯性out-of-

boundsbooleanfalse设置超过可移动区域后，movable-view是否还可以移动xnumber / string定义x轴方向的偏

移。如果x的值不在可移动范围内，movable-view会自动移动到可移动范围内；改变x的值会触发动画ynumber /

string定义y轴方向的偏移。如果y的值不在可移动范围内，movable-view会自动移动到可移动范围内；改变y的值

会触发动画dampingnumber20阻尼系数，用于控制x或y的值改变时的动画和过界回弹的动画，值越大，移动越快

frictionnumber2摩擦系数，用于控制惯性滑动的动画，值越大，摩擦力越大，滑动停止越快；必须大于0，否则

会被设置成默认值disabledbooleanfalse设置是否禁用movable-view的拖动功能scalebooleanfalse设置是否支持双

指缩放，默认缩放手势生效区域在movable-view内scale-minnumber0.5定义缩放倍数最小值scale-maxnumber10

定义缩放倍数最大值scale-valuenumber1定义缩放倍数，取值范围为0.5〜10animationbooleantrue设置是否使用

动画bindchangeeventhandle设置拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}。其中

source是产生移动的原因，值可为touch（拖动）、touch-out- of-bounds（超出移动范围）、out-of-bounds（超出

移动范围后的回弹）、friction（惯性）和空字符串（setData()）bindscaleeventhandle设置缩放过程中触发的事

件。event.detail = {scale: scale}htouchmoveeventhandle设置初次手指触摸后移动方向为横向时触发。如果

catch此事件，则意味着touchmove事件（手指触摸后移动事件）也被catchvtouchmoveeventhandle设置初次手指

触摸后移动方向为纵向时触发。如果catch此事件，则意味着touchmove事件（手指触摸后移动事件）也被catch

3.2.5 项目实战：使用AI编程工具辅助实现搜索区域

布局与海报轮播1

．任务目标

实现搜索区域布局与海报轮播功能，利用view组件、image组件来完成搜索区域布局，实现搜索区域布局水平居中和垂直居中，利用swiper组

件实现海报轮播功能。

莫凡商城首页顶部为搜索区域和海报轮播区域，海报轮播区域可以动态地显示不同海报内容。

2．任务实施

（1）打开通义灵码，输入以下内容并发送，如图3.1所示。

实现微信小程序首页的搜索区域布局，最外层盒子宽为100%，高为 300rpx，背景色为#DC7365，左下和右下圆角边框为60rpx，盒子内部

分为两部分内容，第一部分最左边是更多图标、中间为搜索框，搜索框内部左边有搜索图标、右边是搜索按钮，最右边是购物车图标，第

二部分横向排列，分别为“品质好物”“一站购齐”“极速送达”“无忧售后”。

等待AI编程工具生成代码。

图3.1 发送需求（1）

（2）实现搜索区域布局后，继续实现海报轮播功能。输入“下面继续实现海报轮播功能，有3张海报图片，使用swiper组件在微信小程序里

面实现此功能，可以自动轮播，5秒一次，显示原点，宽度为100%，高度为图片高度。”并发送，如图3.2所示。

图3.2 发送需求（2）

3．AI生成

通义灵码根据需求生成了实现搜索区域布局的代码，包括WXML布局以及WXSS样式，如图3.3所示。

图3.3 通义灵码实现搜索区域布局

通义灵码继续实现了海报轮播功能，如图3.4所示。

图3.4 通义灵码实现海报轮播功能

4．优化建议

在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。

对需求进行更加细致的描述后再次进行生成，例如在生成搜索框的时

候，给出具体的宽高和背景色。

分模块生成，例如先完成搜索区域模块内容，再完成海报轮播模块内

容。

根据自己的实际需求手动调整代码，例如生成轮播图的时候，我们可

以手动设置轮播图的大小。

5．页面展示

代码经过优化后，运行代码，页面样式如图3.5所示。

图3.5 首页的搜索区域布局与海报轮播效果

3.3基础内容组件

使用微信小程序的基础内容组件能快速进行各种页面布局设计。基础内容组件包括icon组件、text组件、progress组件、rich-text组件、富

文本编辑器editor等。

3.3.1 图标组件icon

微信小程序提供了丰富的icon组件，有成功、警告、提示、取消、下载等不同的含义，可应用于不同场景，如图3.6所示。

图3.6 icon组件

3.3.2 文本组件text

text组件是用来放置文本信息的组件，其属性如表3.5所示。

表3.5 text组件的属性属性类型默认值说明user-selectbooleanfalse设置文本是否可选，该属性会使文

本节点显示inline-blockspacestring设置显示连续空格，ensp为半角空格大小，emsp为全角空格大小，nbsp为根

据字体设置的空格大小decodebooleanfalse设置是否解码

text组件支持转义符“\”，如换行“\n”、空格“\t”。text组件内只支持嵌套 text组件，除了text组件外的其他组件都无法长按选中。decode属性可

以解析的有不换行空格（）、小于号（<）、大于号（>）、&符号（&）、引号（'）、半角空格（）、全角空格（），各个操作系统的空

格标准并不一致。

3.3.3 进度条组件progress

progress组件是一种用来提升用户体验的组件，就像视频播放器一样，可以通过进度条看到完整视频的长度、当前播放进度，拖动进度条可

控制播放，让用户能合理地安排自己的时间。progress组件的属性如表 3.6所示。

表3.6 progress组件的属性属性类型默认值说明percentnumber设置百分比（0〜100）show-

infobooleanfalse设置是否在进度条右侧显示百分比border-radiusnumber/string0设置圆角大小font-

sizenumber/string16设置进度条右侧百分比的字体大小stroke-widthnumber6设置进度条线的宽度，单位为

pxcolorstring#09bb07设置进度条颜色activeColorstring#09bb07设置激活部分的进度条的颜色

backgroundColorstring#ebebeb设置未激活部分的进度条的颜色activebooleanfalse设置进度条是否显示从左往右

的动画式流动填充效果active-modestringbackwardsbackwards：动画从头播放。forwards：动画从上次结束点接

着播放durationnumber30设置进度增加1%所需的时间，单位为msbindactiveendeventhandle设置动画完成事件

3.3.4 富文本组件rich-text

通过rich-text组件可以在WXML页面文件中显示一些富文本内容，如显示HTML的一些元素内容。rich-text组件的属性如表3.7所示。

表3.7 rich-text组件的属性属性类型默认值说明nodesarray/string[ ]节点列表/HTML字符串

spacestring显示连续空格，ensp为半角空格大小，emsp为全角空格大小，nbsp为根据字体设置的空格大小user-

selectbooleanfalse设置文本是否可选，该属性会使节点显示为block

3.3.5 富文本编辑器editor

富文本编辑器editor可以对图片、文字进行编辑，可以导出带标签的 HTML代码和纯文本内容，富文本组件内部引入了一些基本的样式，使

得内容可以正确展示，开发时可以对这些内容进行覆盖。editor的属性如表3.8所示。

表3.8 editor的属性属性类型默认值说明read-onlybooleanfalse设置编辑器是否为只读

placeholderstring设置提示信息show-img-sizebooleanfalse设置点击图片时是否显示图片大小控件show-img-

toolbarbooleanfalse设置点击图片时是否显示工具栏控件show-img-resizebooleanfalse设置点击图片时是否显示修

改尺寸控件bindreadyeventhandle当编辑器初始化完成时触发bindfocuseventhandle当编辑器获得焦点时触发，

event.detail = {html, text, delta}bindblureventhandle当编辑器失去焦点时触发，event.detail = {html, text,

delta}bindinputeventhandle当编辑器内容改变时触发，event.detail = {html, text,

delta}bindstatuschangeeventhandle当通过context改变编辑器内样式时触发，返回选区已设置的样式

3.4图片组件image及图片API

在微信小程序开发中，图片展示是常见的功能需求，合理使用image组件和相关API能有效提升用户体验。下面将详细介绍image组件的使用

方法和图片API。

3.4.1 图片组件image

image组件的默认宽度为300 px、高度为225 px。在image组件中，二维码、小程序码图片不支持长按识别，仅在wx.previewImage()中支持

长按识别。它有两类展现模式：一类是缩放模式，总共有5种方式；另一类是裁剪模式，总共有9种方式。image组件的属性如表3.9所示。

表3.9 image组件的属性属性类型默认值说明srcstring设置图片资源地址modestring'scaleToFill'设置

图片裁剪、缩放的模式webpbooleanfalse默认不解析webp格式，只支持网络资源lazy-loadbooleanfalse设置图片

是否懒加载，在即将进入一定范围（上下三屏）时才开始加载show-menu-by-longpressbooleanfalse设置是否开

启长按图片显示识别小程序码或二维码菜单binderroreventhandle设置当错误发生时，发布到AppService的事件

名，事件对象event.detail = {errMsg: 'something wrong'}bindloadeventhandle设置当图片载入完毕时，发布到

AppService的事件名，事件对象event.detail ={height:'图片高度px',width:'图片宽度px'}

可以通过mode属性来设置5种缩放模式，缩放模式及其说明如表3.10 所示。

表3.10 5种缩放模式及其说明模式说明scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉

伸至填满image元素aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。可以完整地将图片显示出来

aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。图片通常只在水平或垂直方向是完整的，另

一个方向将会被截掉一部分widthFix宽度不变，高度自动变化heightFix缩放模式，高度不变，宽度自动变化

3.4.2 图片API

API是一种接口函数，可以让微信小程序访问应用程序，实现图片处理、文件操作、微信支付、分享等功能。

1．wx.chooseImage()

小程序通过wx.chooseImage()选择图片，可以从本地相册选择图片或使用相机拍照功能来选择图片，但本接口已停止维护，后续请使用

wx.chooseMedia()接口。wx.chooseImage()的参数说明如表3.11所示。

表3.11 wx.chooseImage()的参数说明属性类型是否必填说明countnumber否最多可以选择

的图片张数，默认值为9sizeTypestring/array否设置显示original原图或compressed压缩图，默认二者都有

sourceTypestring/array否album为从相册选图，camera为使用相机拍照，默认二者都有successfunction否成功则

返回图片的本地文件路径列表tempFilePathsfailfunction否接口调用失败的回调函数completefunction否接口调用

结束的回调函数（调用成功、失败都会执行）

2．wx.chooseMedia()

wx.chooseMedia()用来从本地相册选择图片或视频或使用相机拍摄功能来选择图片或视频。wx.chooseMedia()的参数说明如表3.12所示。

表3.12 wx.chooseMedia()的参数说明属性类型是否必填说明countnumber否最多可以选择

的图片张数，默认值为9mediaTypearray.<string>否文件类型：image（图片）、video（视频）、mix（图片和视

频）sizeTypearray.<string>否所选图片的尺寸，original为原图，compressed为压缩图。默认二者都有

sourceTypearray.<string>否选择图片的来源，album为从本地相册选图，camera为使用相机拍摄。默认二者都

有maxDurationnumber是视频最长拍摄时间，单位为秒（s），范围为3s至60s之间，不限制视频来源

successfunction否成功则返回图片的本地文件路径列表tempFilePathsfailfunction否接口调用失败的回调函数

completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

3．wx.previewImage()

wx.previewImage()用来预览多张图片，并设置默认显示的图片，其参数说明如表3.13所示。

表3.13 wx.previewImage()的参数说明属性类型是否必填说明currentstring否当前显示图

片的链接，不填则默认为urls的第一张urlsstring/array是需要预览的图片链接列表successfunction否接口调用成功

的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失

败都会执行）

4．wx.getImageInfo()

wx.getImageInfo()用来获取图片信息，网络图片须先配置download域名才能生效，包括图片的宽度、图片的高度及图片返回的路径，其参

数说明如表3.14所示。

表3.14 wx.getImageInfo()的参数说明属性类型是否必填说明srcstring是图片的路径，可以

是相对路径、临时文件路径、存储文件路径、网络图片路径successfunction否接口调用成功的回调函数

failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执

行）

success返回参数说明如表3.15所示。

表3.15 success返回参数说明参数类型说明widthnumber图片宽度，单位为pxheightnumber图片

高度，单位为pxpathstring返回图片的本地路径orientationstring拍照时设备的方向typestring图片格式

5．wx.saveImageToPhotosAlbum()

微信小程序支持将图片保存到系统相册，但需要用户授权， wx.saveImageToPhotosAlbum()可以解决这个问题，其参数说明如表

3.16所示。

表3.16 wx.saveImageToPhotosAlbum()的参数说明属性类型是否必填说明

filePathstring/array是图片文件路径，可以是临时文件路径，也可以是永久文件路径successfunction否接口调用成

功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、

失败都会执行）

6．wx.compressImage()

微信小程序支持将图片压缩，可以根据对图片压缩质量的需求来对 quality的属性进行设置。压缩质量的范围为0〜100，值越小，压缩质

量越低，压缩率越高（仅对.jpg文件有效）。wx.compressImage()的参数说明如表3.17所示。

wx.compressImage()调用成功后会返回压缩成功的临时路径 tempFilePath，微信开发者工具暂时不支持此wx.compressImage()调

试，需要使用真机进行开发调试。

表3.17 wx.compressImage()的参数说明属性类型是否必填/默认值说明srcstring是图片的

路径，可以是相对路径、临时文件路径、存储文件路径qualitynumber80压缩质量，范围为0〜100，值越小，压

缩质量越低，压缩率越高（仅对.jpg文件有效）successfunction否接口调用成功的回调函数failfunction否接口调

用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

7．wx.chooseMessageFile()

微信小程序可以从客户端会话选择文件，可以选择视频、图片及其他文件，wx.chooseMessageFile()的参数说明如表3.18所示。

表3.18 wx.chooseMessageFile()的参数说明属性类型是否必填/默认值说明

countnumber是最多可以选择的文件个数，范围为0〜100typestring否所选的文件的类型，默认值为all。all：从所

有文件中选择。video：只能选择视频文件。image：只能选择图片文件。file：可以选择除了图片和视频之外的其

他文件extensionarray.<string>空数组根据文件扩展名过滤，仅type==file时有效。每一项都不能是空字符串。默

认不过滤failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败

都会执行）successfunction否接口调用成功的回调函数

wx.chooseMessageFile()从客户端会话选择文件，调用成功后会返回选择的文件的本地临时文件对象数组，对象数组包括path（本地临时文

件路径）、size（本地临时文件大小，单位为B）、name（选择的文件名称）、type（选择的文件类型）、time（选择的文件的会话发送时间）。

type的合法值包括video（选择视频文件类型）、image（选择图片文件类型）、file（选择除视频和图片之外的文件类型）。

3.4.3 项目实战：使用AI编程工具辅助实现图书列表

的静态布局1