专业的丹徒网站建设,网站相应速度,惠州网站建设公司推荐乐云seo,php网站开发数据列表排重目录 1 全局变量2 控制登录按钮显示3 设置布局4 搭建我的页面5 修改个人信息总结 在登录章节我们已经实现了用户名和密码登录首页的功能#xff0c;在登录之后#xff0c;可以切换到我的页面#xff0c;显示用户的头像和名称#xff0c;可以修改个人信息。本篇我们介绍一下… 目录 1 全局变量2 控制登录按钮显示3 设置布局4 搭建我的页面5 修改个人信息总结 在登录章节我们已经实现了用户名和密码登录首页的功能在登录之后可以切换到我的页面显示用户的头像和名称可以修改个人信息。本篇我们介绍一下个人信息如何显示。 1 全局变量
在用户登录的时候我们需要将用户的信息放入全局变量中为此需要在代码区新建一个全局变量user类型选择对象 在登录成功时需要将数据源的信息赋值给全局变量可以复制全局变量的路径然后用等号进行赋值
if (user._id) {$w.app.dataset.state.user user$w.utils.redirectTo({pageId: index, // 页面 IdpackageName: , // 主应用为空或不填子模块填写 子包目录查找位置 子包编辑器 --- 页面 --- 子包目录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._id3 设置布局
一般小程序底部有一个导航栏用来切换页面在低代码中我们通过设置布局来实现。点击左上角的布局图标 选择tab栏导航布局然后设置tab栏组件的菜单 回到页面选中页面组件设置我们的布局
4 搭建我的页面
在左上角点击新建页面的图标创建我的页面 在列里添加数据详情组件数据模型选择注册用户信息 图片组件绑定为数据容器的头像字段 文本组件绑定为数据容器的姓名字段 数据详情组件需要根据全局变量的数据标识来过滤数据设置筛选条件 用数据详情组件的原因是当修改页面返回数据的时候可以自动刷新
5 修改个人信息
在点击图标的时候跳转到修改个人信息页面 注意这里传入了全局变量的数据标识到下一个页面这里的参数可以在下一个页面进行设置设置具体的URL参数即可 修改个人信息页面我们使用了表单容器组件进行搭建注意需要接收我们的URL参数作为数据过滤的条件 然后在表单提交的时候我们设置一个返回上一页的事件就全部配置好了
总结
我们本篇介绍了如何显示个人信息的功能注意需要注意的地方就是页面传参及数据过滤只要把这两个知识点掌握一般这种交互页面就很容易搭建了。
