电商小程序07显示用户个人信息

简介: 电商小程序07显示用户个人信息


在登录章节我们已经实现了用户名和密码登录首页的功能,在登录之后,可以切换到我的页面,显示用户的头像和名称,可以修改个人信息。本篇我们介绍一下个人信息如何显示。

1 全局变量

在用户登录的时候,我们需要将用户的信息放入全局变量中,为此需要在代码区新建一个全局变量user,类型选择对象

在登录成功时需要将数据源的信息赋值给全局变量,可以复制全局变量的路径,然后用等号进行赋值

if (user._id) {
      $w.app.dataset.state.user = user
      $w.utils.redirectTo({
        pageId: "index", // 页面 Id
        packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
        params: { key: "value" },
      });
    } else {
      $w.utils.showToast({
        title: "用户名或者密码错误",
        icon: "error",
        duration: 2000, // 2秒
      });
    }

这里添加了一句全局变量赋值的代码

2 控制登录按钮显示

在登录按钮旁边添加一个文本组件,内容修改为已登录。按钮和文本我们希望变成一个互斥的状态,在未登录的时候显示按钮,而在已登录的时候显示文本信息。

在微搭里可以设置组件的条件展示来达到这个效果,给登录按钮绑定条件展示,设置如下的表达式

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

这里的叹号表示取反的意思,首先会计算表达式的值,未登录情况下计算结果是false,我们再取反就变成了true

文本组件直接绑定我们的表达式

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

3 设置布局

一般小程序底部有一个导航栏用来切换页面,在低代码中我们通过设置布局来实现。点击左上角的布局图标

选择tab栏导航布局,然后设置tab栏组件的菜单

回到页面,选中页面组件,设置我们的布局

4 搭建我的页面

在左上角点击新建页面的图标,创建我的页面

在列里添加数据详情组件,数据模型选择注册用户信息

图片组件绑定为数据容器的头像字段

文本组件绑定为数据容器的姓名字段

数据详情组件需要根据全局变量的数据标识来过滤数据,设置筛选条件

用数据详情组件的原因是当修改页面返回数据的时候可以自动刷新

5 修改个人信息

在点击图标的时候跳转到修改个人信息页面

注意这里传入了全局变量的数据标识到下一个页面,这里的参数可以在下一个页面进行设置,设置具体的URL参数即可

修改个人信息页面,我们使用了表单容器组件进行搭建,注意需要接收我们的URL参数作为数据过滤的条件

然后在表单提交的时候我们设置一个返回上一页的事件就全部配置好了

总结

我们本篇介绍了如何显示个人信息的功能,注意需要注意的地方就是页面传参及数据过滤,只要把这两个知识点掌握,一般这种交互页面就很容易搭建了。

相关文章
|
1月前
|
存储 小程序 JavaScript
电商小程序09活动管理
电商小程序09活动管理
|
1月前
|
小程序 程序员 开发工具
电商小程序05用户注册
电商小程序05用户注册
|
1月前
|
前端开发 小程序 JavaScript
电商小程序04实现登录逻辑
电商小程序04实现登录逻辑
|
1月前
|
小程序 测试技术 uml
电商小程序01需求分析
电商小程序01需求分析
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
31 0
|
1月前
|
缓存 小程序 API
电商小程序08调用缓存
电商小程序08调用缓存
|
1月前
|
小程序
电商小程序06用户审核
电商小程序06用户审核
|
1月前
|
小程序 前端开发 数据安全/隐私保护
电商小程序03登录页面开发
电商小程序03登录页面开发
|
1月前
|
存储 运维 小程序
电商小程序02数据源设计
电商小程序02数据源设计
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。