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

目录 1 创建登录页2 在首页检查登录状态3 搭建登录功能最终效果总结 小程序注册功能开发好了之后，就需要考虑登录的问题。首先要考虑谁作为首页，如果把登录页作为首页，比较简单，每次访问的时候都需要登录。

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

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.value const password = $w.input1.value const 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]._id console.log("id",result._id) $w.utils.redirectTo({ pageId: "index", // 页面 Id packageName: "", // 主应用为空或不填，子模块填写 子包目录，查找位置 子包编辑器 --- 页面 --- 子包目录 params: { key: "value" }, }); }else{ throw '手机号或者密码错误' } }

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

最终效果

当我们访问网页链接的时候，先重定向到登录页 输入手机号和密码的时候，重定向到首页

总结

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