第2章莫凡商城小程序项目结构

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

第2章莫凡商城小程序项目结构

开发莫凡商城小程序需要了解项目的目录树结构，包括3个部分：框架全局文件、工具类文件、框架页面文件。框架全局文件用来设置全局

的配置项，包括小程序逻辑文件、小程序公共配置文件等。工具类文件用来抽取通用的业务逻辑处理模块或函数，提高小程序开发速度。

框架页面文件用来构建页面、编写页面样式以及处理业务逻辑。理解小程序项目结构中各个文件的含义，可以大大提高小程序开发效率。

2.1项目的目录树结构

在深入开发微信小程序之前，了解项目的目录树结构至关重要，不仅有助于我们更好地组织代码，还能提高开发效率。

2.1.1 框架全局文件

一个小程序的框架全局文件有5个，分别是app.js文件、app.json文件、app.wxss文件、project.config.json文件、sitemap.json文件，这5

个文件必须放在项目的根目录中。其中，app.js文件和app.json文件尤为重要，它们分别负责小程序的全局逻辑和配置，是理解小程序架构

的关键。因此，下面主要介绍这两个文件。

1．app.js文件

app.js文件可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，如onLaunch()（监听小程序初始

化）、onShow()（监听小程序显示）、onHide()（监听小程序隐藏）

等，在不同阶段、不同场景可以使用不同的生命周期函数。此外，在 app.js文件中还可以定义一些全局函数和全局数据，其他页面引用

app.js文件后就可以直接使用这些全局函数和全局数据，图2.1所示为 app.js文件内容。

图2.1 app.js文件的内容

在莫凡商城小程序里，接口访问域名、微信登录凭证code、用户ID都需要在globalData对象里配置，示例代码如下：

globalData: {

userInfo: null,

host: 'https://api.mofun365.com:8888', //接口访问域名

code: null, //微信登录凭证code

userId: null//用户ID

}

2．app.json文件

app.json文件用来对微信小程序进行全局配置，文件内容为一个JSON 对象，其主要功能为配置页面路径、配置窗口表现、配置底部标签导

航、配置网络超时时间、配置debug模式，如图2.2所示。

图2.2 app.json文件的功能

2.1.2 项目实战：使用AI编程工具辅助实现底部标签

导航1

．任务目标

实现莫凡商城小程序底部标签导航功能，学会设计小程序的底部标签导航及窗口显示。

莫凡商城小程序底部标签导航包含“首页”“分类”“购物车”“我的”4个标签。标签被选中时，文字和图标均呈现为橙色，默认文字和图标均为

灰色。

2．任务实施

（1）打开通义灵码，输入以下内容。

实现微信小程序底部标签导航，分为“首页”“分类”“购物车”“我的”4个部分，默认文字和图标为灰色，选中后为橙色，并且在window配置项中

设置顶部导航条文字为“莫凡商城”，背景色为橙色。

发送后得到底部标签导航实现流程，如图2.3所示。

图2.3 底部标签导航实现流程

（2）根据通义灵码的回答，在app.json文件的pages配置项里配置“首页”“分类”“购物车”“我的”页面路径，示例代码如下：

"pages": [

"pages/home/home",

"pages/category/category",

"pages/cart/cart",

"pages/my/my"

]

（3）在window配置项里配置顶部导航条文字为“莫凡商城”，背景色为橙色，示例代码如下：

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#FFA500",

"navigationBarTitleText": "莫凡商城",

"navigationBarTextStyle": "white"

}

（4）在tabBar配置项里配置底部标签导航的文字和图标，示例代码如下：

"tabBar": {

"color": "#999999",

"selectedColor": "#FFA500",

"borderStyle": "black",

"list": [

{

"pagePath": "pages/home/home",

"text": "首页",

"iconPath": "/pages/images/bar/home-1.png",

"selectedIconPath": "/pages/images/bar/home-0.png"

{

"pagePath": "pages/category/category",

"text": "分类",

"iconPath": "/pages/images/bar/category-1.png",

"selectedIconPath": "/pages/images/bar/category-0.png"

{

"pagePath": "pages/cart/cart",

"text": "购物车",

"iconPath": "/pages/images/bar/cart-1.png",

"selectedIconPath": "/pages/images/bar/cart-0.png"

{

"pagePath": "pages/my/my",

"text": "我的",

"iconPath": "/pages/images/bar/me-1.png",

"selectedIconPath": "/pages/images/bar/me-0.png"

}

]

}

通过这4个步骤，就可以实现莫凡商城小程序底部标签导航的配置，效果如图2.4所示。

图2.4 莫凡商城小程序底部标签导航

2.1.3 工具类文件

在微信小程序项目结构里有一个utils文件夹，用于存放工具类的JS函数，如一些用于日期格式化、时间格式化的函数。定义完这些函数

后，通过module.exports将定义的函数名称注册到工具类文件中，在其他页面才可以使用这些函数，图2.5所示为时间格式化工具类文件。

图2.5 时间格式化工具类文件

2.1.4 框架页面文件

一个小程序的框架页面文件有4个，分别是页面逻辑文件（JS文件）、页面配置文件（JSON文件）、页面结构文件（WXML文件）、页面样式

表文件（WXSS文件）。

微信小程序的框架页面文件都放置在pages文件夹下，如图2.6所示。

图2.6 框架页面文件

每个页面都有一个独立的文件夹，例如，“我的”页面的my文件夹下放置了4个文件，其中，my.js文件用于进行业务路径处理；my.json文件

用于进行页面的配置，可以覆盖全局app.json文件的配置；my.wxml文件是页面结构文件，负责渲染页面；my.wxss文件是针对my.wxml文件

的样式文件。

2.2微信小程序逻辑层框架接口

要让小程序顺利运行，首先要注册小程序和其中的页面，并为它们设置生命周期。2.1.1小节介绍了框架全局文件，其中，app.js文件是小

程序的逻辑文件，用于定义全局数据和全局函数，本节将详细讲解在 app.js文件中注册小程序和页面的方法。

2.2.1 使用App()函数注册小程序

在app.js文件里，App()函数是用来注册小程序的，有了这个函数，才能说明这个项目是小程序项目。App()函数有一个object参数，在注册

小程序的同时可以指定小程序的生命周期函数。

App()函数必须在app.js文件中调用，必须调用且只能调用一次。示例代码如下：

App({

onLaunch (options) {

//小程序初始化时做的操作

onShow (options) {

//小程序显示时做的操作

onHide () {

//小程序隐藏时做的操作

onError (msg) {

console.log(msg)

onPageNotFound(msg){

console.log(msg)

onThemeChange (msg){

console.log(msg)

globalData: 'I am global data'

})

App()中的函数详解如下。

onLaunch()：生命周期回调函数，监听小程序初始化，在小程序初始

化完成时触发，全局只触发一次。

onShow()：生命周期回调函数，监听小程序启动或切换到前台，在

小程序启动或从后台切换到前台显示时触发。

onHide()：生命周期回调函数，监听小程序切换到后台，在小程序从

前台切换到后台时触发。

onError()：错误监听函数，在小程序发生脚本错误或API调用报错时

触发。

onPageNotFound()：页面不存在监听函数，在小程序要打开的页面

不存在时触发。

onThemeChange()：生命周期函数，在系统切换主题时触发。可以

使用wx.onThemeChange()绑定监听。

通过getApp()函数获取小程序全局唯一的App实例后，就可以调用 app.js文件里配置的自定义函数和自定义全局数据了，示例代码如下：

var app = getApp()

console.log(appInstance.globalData.host) //获取在globalData全局数据里配置的域名

getApp()函数在页面的.js文件里执行就可以获取小程序全局唯一的App 实例，莫凡商城小程序也是采用这样的方式来获取在globalData全局数

据中配置的域名的。

注意

（1）不要在定义于App()内的函数中调用getApp()，使用this就可以获得App实例。

（2）通过getApp()获取实例之后，不要私自调用生命周期函数。

2.2.2 使用Page()函数注册页面

在app.js文件里使用App()函数可以注册小程序，在app.json中配置页面路径后，开发者需要为每个页面创建对应

的.js、.wxml、.json、.wxss 4个文件。在*.js文件里需要使用Page()函数来注册页面，指定页面的初始数据、生命周期回调函数、事件处理

函数等，示例代码如下：

//index.js

Page({

data: {

text: "This is page data."

onLoad: function(options) {

// 页面加载时执行一些初始化操作

onReady: function() {

// 页面初次渲染完成时执行

onShow: function() {

// 页面显示时执行

onHide: function() {

// 页面隐藏时执行

onUnload: function() {

// 页面关闭时执行

onPullDownRefresh: function() {

// 用户下拉时执行

onReachBottom: function() {

// 页面滚动到底部时执行

onShareAppMessage: function () {

// 用户分享时返回自定义分享数据

onPageScroll: function() {

// 页面滚动时执行

onResize: function() {

// 页面尺寸变化时执行

onTabItemTap(item) {

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

// 事件处理函数

viewTap: function() {

this.setData({

text: 'Set some data for updating view.'

}, function() {

// 这是setData的回调函数

})

customData: {

hi: 'MINA'

}

})

Page()函数的相关介绍如下。

data：data是页面第一次渲染时使用的初始数据，页面加载时，data

将会以JSON（JavaScript Object Notation，JS对象简谱）字符串的形

式由逻辑层传至渲染层，因此data中的数据必须是可以转换成JSON字符串的类型，比如字符串、数字、布尔值、对象或数组。

JSON是一种轻量级的数据交换格式，示例代码如下：

{

"employees": [

{

"firstName": "Bill",

"lastName": "Gates"

}

]

}

onLoad()：生命周期回调函数，在页面加载时触发。一个页面只会调

用一次，可以在onLoad()的参数对象中获取打开当前页面路径时所需要的参数和值。

onReady()：生命周期回调函数，在页面初次渲染完成时触发。一个

页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onUnload()：生命周期回调函数，在页面卸载时触发，即在调用

redirectTo()或navigateBack()函数时调用。

onPullDownRefresh()：页面事件处理函数，监听用户下拉刷新事

件，需要在app.json文件的window配置项或页面配置中开启 enablePullDownRefresh。也可以通过wx.startPullDown- Refresh()触发

下拉刷新事件，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。当处理完数据刷新后，wx.stopPullDownRefresh()会停止当前页

面的下拉刷新。

onReachBottom()：页面事件处理函数，监听用户上拉触底事件，可

以在app.json文件的window配置项或页面配置中通过 onReachBottomDistance()设置触发距离。在触发距离内上拉时，本事

件只会触发一次。

onShareAppMessage()：页面事件处理函数，监听用户点击页面内转

发按钮（<button open-type="share">转发</button>）或右上角菜单中的“转发”按钮的行为，并自定义转发内容，只有定义了此页面事件处

理函数，右上角菜单中才会显示“转发”按钮。

onPageScroll()：页面事件处理函数，监听用户滑动页面事件。
onResize()：页面事件处理函数，监听页面尺寸发生改变的事件。对

于自定义组件，可以使用resize生命周期来监听。回调函数中将返回显示区域的尺寸信息。

onTabItemTap()：页面事件处理函数，用户点击tab（导航标签）时

触发，可以获取tab的序号、页面路径、按钮文字。

组件事件处理函数：在Page()中还可以定义组件事件处理函数。在渲

染层的组件中加入事件绑定，当事件被触发时，就会执行Page()中定义的事件处理函数，如将“注册”按钮绑定register事件、“登录”按钮绑

定login事件等。

注意

通过getCurrentPages()函数可以获取当前页面栈，返回页面数组对象PageObject[]。数组中的第一个元素为首页，最后一个元素为当前页面，不要尝试修改页面栈，否则会导致路由及页面

状态错误。不要在小程序初始化的时候调用getCurrentPages()函数，因为此时页面实例尚未生成。

2.3微信小程序视图层

完成小程序和页面的注册后，就可以开始构建小程序页面视图了。

WXML是视图层框架设计的标签语言，结合基础组件、事件系统，可以构建出页面的视图。

2.3.1 WXML

在框架页面文件的*.wxml文件里，可以利用WXML来构建小程序页面视图，构建视图页面内容需要用到组件。例如，在页面中显示“你好，

微信小程序”，代码如下：

<view> 你好, 微信小程序</view>

2.3.2 动态绑定数据

在*.wxml文件里，可以使用view组件进行布局设计。在上一小节的示例中，页面中显示的内容是直接写在view组件中的，不是动态数据，

那么如何动态地绑定数据呢？

*.wxml文件中使用的动态数据都来自*.js文件中Page()函数的data对象。在*.wxml文件中，通过双大括号“{{}}”将在*.js文件中定义的变量

括起来，放在view组件中，这样就可以实现数据动态绑定效果了。

示例代码如下：

<view> {{ message }} </view>

//index.js

Page({

data: {

message: '你好, 微信小程序'

}

})

2.3.3 组件属性动态绑定数据

组件属性动态绑定数据就是将*.js文件中data对象里的数据绑定到小程序的组件上，示例代码如下：

//index.js

Page({

data: {

id: 0

}

})

2.3.4 控制属性动态绑定数据

控制属性动态绑定数据是通过条件判断语句——if语句来控制的，如果满足条件，则执行该语句，否则不执行，示例代码如下：

//index.js

Page({

data: {

flag: true

}

})

2.3.5 关键字动态绑定数据

关键字动态绑定数据是指为组件（如复选框组件）的一些关键字绑定数据，checked关键字如果等于true则代表勾选了此复选框，若等于

false则代表不勾选，示例代码如下：

不要直接写成checked="false"，否则其计算结果是一个字符串，转换成boolean类型后代表真值。

2.3.6 运算

可以在“{{}}”内进行简单的运算，小程序支持以下几种运算。

三元运算，示例代码如下：

<view hidden="{{flag ? true : false}}"> Hidden </view>

数学运算，示例代码如下：

//index.js

Page({

data: {

a: 1,

b: 2,

c: 3

}

})

View组件中的内容为3 + 3 + d。

逻辑判断，示例代码如下：

字符串运算，示例代码如下：

<view>{{"hello" + name}}</view>

//index.js

Page({

data:{

}

})

数据路径运算，示例代码如下：

<view>{{object.key}} {{array[0]}}</view>

//index.js

Page({

data: {

object: {

key: 'Hello '

array: ['MINA']

}

})

2.4微信小程序样式渲染

WXSS是样式语言，用于描述WXML组件的样式。WXSS具有CSS的大部分特性，并且对CSS进行了扩充及修改，用于设置WXML组件的显示效

果。与CSS相比，WXSS在尺寸单位和样式导入方面进行了扩展。

2.4.1 尺寸单位

WXSS的尺寸单位是rpx（Responsive Pixel，响应像素），它可以根据屏幕宽度进行自适应。屏幕宽度规定为750 rpx。例如，iPhone 6的屏幕

宽度为375 px，共有750个物理像素，则750 rpx＝375 px＝750个物理像素，1 rpx＝0.5 px＝1个物理像素。rpx与px的换算关系如表2.1所

示。

表2.1 rpx与px的换算关系设备rpx换算成px（屏幕宽度/750）px换算成rpx（750/屏幕宽度）

iPhone 51 rpx = 0.42 px1 px = 2.34 rpxiPhone 61 rpx = 0.5 px1 px = 2 rpx华

为 P401 rpx = 0.46 px1 px = 2.17 rpx

2.4.2 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用“;”表示语句结束，示例代码如下：

/** common.wxss **/

.small-p {

padding:5px;

}

/** app.wxss **/

@import "common.wxss";

.middle-p {

padding:15px;

}

这样，在app.wxss文件里，可以将common.wxss文件样式导入使用。

定义在 app.wxss 文件中的样式为全局样式，作用于每个页面。在每个页面的*.wxss文件中定义的样式为局部样式，只作用于对应的页面，

并会覆盖app.wxss文件中相同的选择器。

2.4.3 内联样式

在WXML视图组件中，可以使用style、class属性来控制组件的样式。

style：用于接收动态的样式，在运行时会进行解析。静态的样式统一

写到class属性中，要尽量避免将静态的样式写进style属性中，以免影响渲染速度。style属性示例代码如下：

<view style="color:red;" /> //静态的样式写进style属性，尽量避免使用

<view style="color:{{color}}" />//动态获取样式

class：用于指定样式规则，其属性值是样式规则中样式类名的集合，

样式类名不需要带上“.”，多个样式类名之间用空格分隔。示例代码如下：

2.4.4 选择器

WXSS样式渲染支持用选择器来控制，其支持的选择器如表2.2所示。

表2.2 支持的选择器选择器样例样例描述.class.intro选择所有拥有class="intro"的组件#id#firstname

选择拥有id="firstname"的组件elementview选择所有view组件element, elementview, checkbox选择所有文档的

view组件和checkbox组件::afterview::after在view组件后插入内容::beforeview::before在view组件前插入内容

2.4.5 常用样式的属性

常用样式包括display（显示）、position（定位）、float（浮动）、 background（背景）、border（边框）、outline（轮廓）、text（文本）、

font（字体）、margin（外边距）、padding（填充）等。

display样式的属性、说明及示例如表2.3所示。

表2.3 display样式的属性、说明及示例属性说明示例flex多栏多列布局，常和flex-

direction:row/column一起使用display:flex;inline-block行内块元素display:inline-block;inline显示为内联元素，元

素前后没有换行符display:inline;inline-table作为内联表格显示（类似于<table>），表格前后没有换行符

display:inline-table;inline-flex作为内联块级弹性伸缩盒显示display:inline-flex;none不会显示display:none;block显

示为块级元素，此元素前后会带有换行符display:block;list-item作为列表显示display:list-item;table作为块级表格

显示（类似于<table>），表格前后带有换行符display:table;table-caption作为一个表格标题显示（类似于

<caption>）display:table-caption;table-cell作为一个表格单元格显示（类似于<td>和<th>）display:table-

cell;table-column作为一个表格列显示（类似于<col>）display:table-column;table-column-group作为一个或多个

列的分组来显示（类似于<colgroup>）display:table-column-group;table-row作为一个表格行显示（类似于

<tr>）display:table-row;table-row-group作为一个或多个行的分组显示，通常用于表格主体部分（类似于

<tbody>）display:table-row-group;table-header-group作为一个或多个行的分组显示，通常用于表格的表头部分

（类似于<thead>）display:table-header-group;table-footer-group作为一个或多个行的分组显示，通常用于表格

的表尾部分（类似于<tfoot>）display:table-footer-group;inherit从父元素继承display属性的值display:inherit

position样式的属性、说明及示例如表2.4所示。

表2.4 position样式的属性、说明及示例属性说明示例absolute生成绝对定位的元素，相对

于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right及bottom属性进行设定

position:absolute;relative生成相对定位的元素，相对于其正常位置进行定位。例如，left:20表示向元素的left位置

移动20pxposition:relative;fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、

right及bottom属性进行设定position:fixed;static默认值，没有定位，元素出现在正常的流中（忽略top、bottom、

left、right或者z-index声明）position:static;inline-flex作为内联块级弹性伸缩盒显示position:inline-flex;inherit设

定从父元素继承position属性的值position:inherit;

float样式的属性、说明及示例如表2.5所示。

表2.5 float样式的属性、说明及示例属性说明示例left元素向左浮动float:left;right元素向右

浮动float:right;none默认值，元素不浮动，并会显示其在文本中出现的位置float:none;inherit规定从父元素继承

float属性的值float:inherit;

background样式的属性、说明及示例如表2.6所示。

表2.6 background样式的属性、说明及示例属性说明示例background简写属性，作用是

将背景属性设置在一个声明中background:#ff0000 center no-repeatpadding-box border-

box fixed url('bg.jpg');background-color指定背景色background-color:#ff0000;background-position指定背景图像

的位置background-position:center;background-size指定背景图像的大小background-

size:80px 60px;background-repeat指定如何重复背景图像background-repeat:no-repeat;background-origin指定

背景图像的定位区域即背景图像填充框的相对位置background-origin:padding-box;background-clip指定背景图像

的区域background-clip:border-box;background-attachment设置背景图像是否固定或随页面的其余部分滚动

background-attachment:fixed;background-image指定要使用的一幅或多幅背景图像，使用url('URL')提供图像的

URL（Uniform Resource Locator，统一资源定位符）background-image:url('image.jpg');

border样式的属性、说明及示例如表2.7所示。

表2.7 border样式的属性、说明及示例属性说明示例border简写属性，用于把边框的属性设

置在一个声明中border:5px solid red;border-width为元素的所有边框设置宽度，或者单独地为各边框设置宽度

border-width:3px;border-width:1px 2px 3px 4px;（上右下左）border-style设置元素所有边框的样式，或者单独

地为各边设置边框样式border-style:solid;border-style:dotted dashed;（上下/左右）border-color设置元素所有边

框中可见部分的颜色，或者为4条边分别设置颜色border-color:red;border-color:red green blue yellow;

outline样式的属性、说明及示例如表2.8所示。

表2.8 outline样式的属性、说明及示例属性说明示例outline在一个声明中设置所有的外边

框属性outline:2px dashed #ff0000;outline-color设置外边框的颜色outline-color:#333;outline-style设置外边框的

样式outline-style:solid;outline-style:dotted;outline-width设置外边框的宽度outline-width:3px;outline-

width:medium;

text样式的属性、说明及示例如表2.9所示。

表2.9 text样式的属性、说明及示例属性说明示例color设置文本颜色color:red;direction设置

文本方向direction:ltr;（从左到右）direction:rtl;（从右到左）letter-spacing设置字符间距letter-spacing:2px;line-

height设置行高line-height:1.5;line-height:20px;text-align对齐元素中的文本text-align:left;（左对齐）text-

align:center;（居中对齐）text-align:right;（右对齐）text-align:justify;（两端对齐）text-decoration向文本添加

修饰text-decoration:underline;（下划线）text-decoration:line-through;（删除线）text-decoration:overline;（上

划线）text-indent缩进元素中文本的首行text-indent:2em;text-indent:20px;text-shadow设置文本阴影text-

shadow:2px 2px 4px #000;text-shadow:1px 1px 2px rgba(0,0,0,0.5);text-transform控制元素中的字⺟text-

transform:uppercase;（全大写）text-transform:lowercase;（全小写）text-transform:capitalize;（首字⺟大写）

vertical-align设置元素的垂直对齐vertical-align:middle;vertical-align:top;vertical-align:sub;（下标）white-space

设置元素中空白的处理方式white-space:nowrap;（不换行）white-space:pre;（保留空格和换行）white-

space:pre-wrap;（保留空格，允许换行）word-spacing设置字间距word-spacing:4px;word-spacing:normal;

font样式的属性、说明及示例如表2.10所示。

表2.10 font样式的属性、说明及示例属性说明示例font在一个声明中设置所有字体属性

font:italic small-caps bold 16px/1.5 Arial;font-style指定文本的字体样式font-style:normal;font-style:italic;font-

style:oblique;font-variant以小型大写字⺟字体或者正常字体显示文本font-variant:normal;font-variant:small-

caps;font-weight指定字体的粗细font-weight:normal;font-weight:bold;font-weight:bolder;font-

weight:lighter;font-size指定文本的字体大小font-size:16px;font-family指定文本的字体系列font-family:Arial,sans-

serif;font-family:"Times New Roman",serif;

margin样式的属性、说明及属性值如表2.11所示。

表2.11 margin样式的属性、说明及示例属性说明示例margin在一个声明中设置所有外边

距属性Margin:10px 5px 15px 20px;（上边距、右边距、下边距、左边距）margin-top设置元素的上外边距

margin-top:20px;margin-right设置元素的右外边距margin-right:15px;margin-bottom设置元素的下外边距

margin-bottom:10px;margin-left设置元素的左外边距margin-left:5px;

padding样式的属性、说明及属性值如表2.12所示。

表2.12 padding样式的属性、说明及示例属性说明示例padding使用缩写属性设置在一个

声明中的所有填充属性Padding: 10px 5px 15px 20px;（顶部填充、右部填充、底部填充、左部填充）padding-

top设置元素的顶部填充padding-top:20px;padding-right设置元素的右部填充padding-right:15px;padding-bottom

设置元素的底部填充padding-bottom:10px;padding-left设置元素的左部填充padding-left:5px;

2.5微信小程序条件渲染

在编写微信小程序时，经常需要进行条件判断，以确定是否需要渲染某代码块。

2.5.1 使用wx:if判断单个组件

在微信小程序框架里，使用wx:if="{{condition}}"来进行条件判断，确定是否需要渲染该代码块，示例代码如下：

<view wx:if="{{condition}}">你好,欢迎学习微信小程序</view>

使用wx:elif和wx:else来添加一个else代码块。

//index.js

Page({

data: {

length: 8

}

})

当length=8时，输出结果为“长度大于5”，执行第一个判断条件。

2.5.2 使用wx:if一次性判断多个组件

因为wx:if是一个控制属性，所以需要将它添加到组件上。如果想一次性判断多个组件，可以使用＜block/＞标签将多个组件包装起来，并使

用wx:if控制属性，示例代码如下：

</block>

<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接收控制属性。

2.6微信小程序列表渲染

在小程序中，经常需要将一些内容以列表的形式显示出来，这就要用到微信小程序的列表渲染。如果只是将数据以列表的形式显示出来，

那么直接一行行显示就行。但如果数据的显示是动态的，用这种方式就不能解决问题了，可以用wx:for来解决这个问题。

2.6.1 使用wx:for列表渲染单个组件

在组件上使用wx:for控制属性绑定一个数组，即可使用该数组中的各项数据重复渲染该组件。默认数组当前项的下标变量名为index、数组当

前项的变量名为item，示例代码如下：

{{index}}: {{item. name }}

</view>

//index.js

Page({

data: {

array: [{

}, {

}]

}

})

使用wx:for-item可以指定数组当前项的变量名，使用wx:for-index可以指定数组当前项的下标变量名，示例代码如下：

{{idx}}: {{itemName.name}}

</view>

2.6.2 使用wx:for一次性列表渲染多个组件

当想渲染一个包含多节点的结构块时，就需要将wx:for应用在 <block/>标签中，示例代码如下：

<view> {{index}}:</view>

</block>

2.6.3 使用wx:key指定唯一标识符

如果列表中项目的位置会动态改变，或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input组件中的输入

内容，switch组件的选中状态），就需要使用wx:key来指定列表中项目的唯一标识符。

wx:key的值以下列两种形式提供。

字符串：代表在for循环的集合中值的某个属性，该属性的值需要是

列表中唯一的字符串或数字，且不能动态改变。

保留关键字：*this代表在for循环中的item本身，这种表示方法需要

item本身是一个唯一的字符串或数字。当数据改变触发渲染层重新渲染时，会校正带有key的组件，框架会确保它们被重新排序，而不是被

重新创建，以确保组件保持自身的状态，并且提高列表渲染时的效率。

示例代码如下：

<switch wx:for="

{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>

Page({

data: {

objectArray: [

{id: 5, unique: 'unique_5'},

{id: 4, unique: 'unique_4'},

{id: 3, unique: 'unique_3'},

{id: 2, unique: 'unique_2'},

{id: 1, unique: 'unique_1'},

{id: 0, unique: 'unique_0'},

]

}

注意

如不提供wx:key，会出现一个warning，如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略该warning。

2.7项目实战：使用AI编程工具辅助实现“我的”页

面1

．任务目标

实现“我的”页面列表式导航功能，学会使用WXML进行页面布局、使用 WXSS进行样式渲染、使用Java Script进行数据绑定及列表式导航功能

的应用。

“我的”页面可以分为3部分：第1部分是与登录相关的内容，包括头像和昵称；第2部分是与订单相关的内容，包括“待付款”“待收货”“已完

成”3个标签；第3部分采用列表式导航，包括“我的消息”“我的收藏”“账户余额”“修改密码”“意见反馈”“清除缓存”“知识扩展”等标签。

2．任务实施

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

微信小程序实现“我的”页面，可以分为3部分：第1部分宽为100%，高为90px，背景色为#FFA500，头像和昵称垂直居中、靠左显示；第2部

分是与订单相关的内容，背景色为白色，分为上下两部分，上面部分显示“我的订单”标题，下面部分是“待付款”“待收货”“已完成”的图标和

文字，图标和文字上下显示；第3部分采用列表式导航，包括“我的消息”“我的收藏”“账户余额”“修改密码”“意见反馈”“清除缓存”“知识扩展”

等标签，宽度为100%，高为90px，左边是名称，右边是>。

等待AI编程工具的生成结果。

图2.7 发送需求

3．AI生成

通义灵码根据需求生成了实现“我的”页面的代码，包括WXML布局、 WXSS样式及JS数据绑定，实现了用户信息展示、订单状态导航及功能

列表跳转功能。图2.8所示为通义灵码生成结果。

图2.8 通义灵码生成结果

4．优化建议

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

对需求进行更加细致的描述后再次进行AI生成。
分模块进行生成，例如先完成用户信息展示模块内容，再完成订单状

态导航模块内容，最后完成功能列表跳转模块内容。

根据自己的实际需求手动调整代码，使其满足需求。

5．页面展示

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

图2.9 “我的”页面

全站分卷索引 · 9 卷