性格测评小程序07用户登录

小程序注册功能开发好了之后，就需要考虑登录的问题。首先要考虑谁作为首页，如果把登录页作为首页，比较简单，每次访问的时候都需要登录。

如果把功能页作为首页，那就需要判断用户是否登录，未登录的时候需要重定向到登录页。本篇我们讲解一下如何实现用户登录。

1 创建登录页

打开我们的测评小程序，点击创建页面的图标，创建登录页

2 在首页检查登录状态

当用户访问首页的时候，要看一下当前用户是否登录。是否登录我们通过检查全局变量，userid是否为空来进行判断。

切换到首页，点击代码区，创建自定义变量


为了避免每次打开首页都需要登录，打开持久化配置

选中页面组件，设置页面显示的时候的事件

先设置逻辑分支

表达式设置为判断用户的标识是否为空

If($w.IsEmpty($w.app.dataset.state.userid), true, false)

为空的时候我们就重定向到登录页面

3 搭建登录功能

在登录页，添加表单容器，数据源选择用户表

保留手机号和密码字段

打开手机号和密码的必填项配置

选择表单容器，清除表单容器下的事件

在代码区，点击新建创建一个javascript方法

输入如下代码

export default async function ({ event, data }) {const phone = $w.inputPhone1.valueconst password = $w.input1.valueconst encryptPassword = CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);console.log("encryptPassword",encryptPassword)const result = await $w.cloud.callDataSource({dataSourceName: "Users",methodName: "wedaGetRecordsV2",params: {// 筛选内容，当前筛选的含义为：名字为 "juli" 或者 "foo"filter: {where: {$and: [{sjh: {$eq: phone,},},{password: {$eq: encryptPassword,},},],},},// 排序orderBy: [{createdAt: "asc", // 创建时间，正序},{updateBy: "desc", // 更新时间，倒序},],// 返回字段选择select: {$master: true, // 常见的配置，返回主表},// 返回total字段getCount: true,// 页面大小pageSize: 1,// 当前页面pageNumber: 1,},});console.log("result",result)if (result.total > 0) {$w.app.dataset.state.userid = result.records[0]._idconsole.log("id",result._id)$w.utils.redirectTo({pageId: "index", // 页面 IdpackageName: "", // 主应用为空或不填，子模块填写 子包目录，查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});}else{throw '手机号或者密码错误'}
}

然后给按钮设置校验成功事件，调用我们的自定义方法

最终效果

当我们访问网页链接的时候，先重定向到登录页

输入手机号和密码的时候，重定向到首页

总结

本篇我们介绍了登录逻辑的实现，主要是要灵活运用表单容器。表单容器除了向数据源写入数据外，也可以通过灵活的配置实现想要的业务功能。