上一篇我们讲解了如何在首页加载的时候获取用户信息，一般小程序会在底部放置tab栏，将不同的菜单放置在tab栏中。我们的用户注册逻辑是，如果用户点击了底部的tab栏，切换到我的页面，会根据user对象是否有值来显示。如果没有值就显示默认的头像，昵称显示匿名用户，按钮我们显示注册。点击注册的时候跳转到注册页面。本篇我们就讲解一下页面的搭建方法。

1 设置tab栏

在微搭的新版本中提供了页面布局功能，在页面布局中可以设置具体的布局。打开我们的应用编辑器，点击页面布局。

切换到tab栏布局

选中tab栏，在右侧的属性面板里添加菜单

这里菜单是和页面相关的，现在我们只有一个首页，我们添加一下其他的页面

2 添加页面

再切回到页面设计视图

在页面列表点击新建的按钮

添加页面标题我的

然后再切换回页面布局视图，点击右侧属性面板的魔术棒图标，根据页面一键生成菜单

3 搭建登录界面

切换到我的页面，需要搭建页面的布局，布局就是我们准备怎么展示信息，一般我们会有一个草图

用红线标出来之后就有了层次感，我们底部会有一个容器，里边会放置一行信息，分别是用户的头像和昵称，昵称旁边会有一个按钮，如果是未登录的状态就显示注册，如果是已登录的状态就是修改

理清思路后我们就需要选择合适的布局组件，布局一种是使用普通容器进行搭建，一种是用网格布局。普通容器的好处是可以设置的比较精细，比如外边距、内边距、边框。网格布局是比较简单，但是控制的不那么精细。

初学我们先用网格布局实现，添加网格布局

3.1 显示头像

网格布局默认状态是一行三列，正好可以满足我们的需要。第一列我们添加一个图片组件

图片组件的设置方法是先选择布局模式为裁剪填满，这样才可以自由的设置图片的宽和高

切换到样式，设置一下图片的宽和高各为60

一般头像是圆形的，我们可以设置圆角半径，这里设置成90

我们这里需要控制图片的默认显示和正常显示。默认显示我们从素材里选择一个图片，正常显示我们从全局变量的user对象里获取用户的头像

这种可以使用图片组件的属性绑定，用短路运算符。在基础属性地址，点击fx

在侧边栏点击素材，选择我们默认的头像

在表达式绑定界面输入如下的表达式

$w.app.dataset.state.user.avatarURL||"https://lowcode-9g6zlcz504383ac8-1305601167.tcloudbaseapp.com/resources/2024-06/lowcode-1830431"

双竖线表示一个或的关系，如果从全局变量里没获取到数据，就使用默认图片

3.2 显示昵称

在第二列里添加文本组件，用来显示昵称

这里需要绑定文本内容

输入如下的表达式

$w.app.dataset.state.user.nickName||"匿名用户"

3.3 注册按钮

在第三列添加两个按钮，第一个按钮修改内容为注册

修改第二个按钮为修改

两个按钮都显示就不太合适，需要根据用户是否注册来控制显示，我们这里给按钮绑定条件展示

输入如下的表达式

!$w.app.dataset.state.user._id

这里我们获取了全局变量user的数据标识属性，通过取反来验证当前数据标识是否有值，如果没有值取反之后就变成了true

修改按钮我们的条件展示绑定成如下

$w.app.dataset.state.user._id

通过这样就解决了两个按钮只显示一个的问题

总结

我们这一篇讲解了登录界面如何使用布局组件搭建的问题，开发前端页面，熟练使用布局组件是必备的基本功。在属性绑定的时候我们用到了短路运算符和取反运算符，运算符和表达式在JavaScript中是语法部分的基础知识，熟练掌握具体的知识点也决定你能否按照自己的想法搭建出功能来。