条件式容器——登录状态切换

🧑🏻‍💻 中国 - 杭州市 - 小邓

含义:在不同的条件下,同一个位置显示不同的内容

举个简单的例子:小程序中需要实现 登录功能 ,这种情况往往分为两种情况 登录 和 未登录 ,说白了不 同条件的用户看到内容是不同的。

  • 小程序未授权时,账户表中只有微信用户的基本记录,包括id、创建时间和更新时间等,如图所示:
  • 用户授权小程序获取用户昵称和头像之后,小程序才会读取到用户的微信昵称和微信头像,如图所示:

在实现这个功能之前先思考个问题,如何判断用户是否登录呢?

其实很简单,只需判断 远程数据/account/username 是否为空,如果为空 显示-未登录视图 ,否则 显示-登录视图 。

代码理解:

// 如果当前的username为空 if(远程数据/account/username 为空){ // 显示-未登录视图 }else{ // 显示-登录视图 } // 如果有多个判断条件 不是if..else..那么简单了 这里就不细谈 if(判断条件){ ... }else if(判断条件){ ... }else{ ... }

提示:ZION中,条件式容器执行顺序 从左至右 ,可以这么理解如果 未登录-视图 不满足条件,则会执 行 登录-视图 以此类推,当条件被满足时,就不再往下继续判断了。如图所示:

接下来,进入实战操作

1.1 添加远程数据

首先需要给当前页面添加 远程数据 (提示:建议先了解下远程数据,不然后面都看不懂)

名称:account 类型:账户 过滤类型:有过滤条件 过滤:ID等于已登录用户/ID

1.2 添加条件式容器

创建 「未登录」和「登录」两个视图,「default」默认不要动它,不同条件下显示的内容也不同。

1.3 条件设置

未登录-判断条件:为空 → 运算数类型:文本 → 运算数:远程数据/account/用户名

解释:通过远程数据在account这张数据表中查询是否有该用户名,如果没有就是未登录,否则就是已登录。

登录-判断条件:由于只有两种情况,所以「登录状态」给「总是」即可。

提示:执行顺序 从左往右 ,也就是说先执行【未登录】再执行【登录】

1.4 添加行为

给 未登录-视图 中的 点击登录 文本添加点击行为,如下:

  • 用户登录 → 完善个人信息
  • 成功时:刷新-当前页面

简单的了解了条件式容器的使用,接下来问大家一个问题。

问:以下是数据库的信息,小黄在登录时会看到哪个视图?小蓝在登录时会看到哪个视图?如图所示:

答: 小黄看到的是 未登录-视图,因为数据库中查询不到「小黄」该用户名;

小蓝看到的是 登录-视图 , 因为不满足数据库中用户名为空的条件。

2022-11-21
1 0