目录
- 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 '手机号或者密码错误'
}
}
然后给按钮设置校验成功事件，调用我们的自定义方法
最终效果
当我们访问网页链接的时候，先重定向到登录页
输入手机号和密码的时候，重定向到首页
总结
本篇我们介绍了登录逻辑的实现，主要是要灵活运用表单容器。表单容器除了向数据源写入数据外，也可以通过灵活的配置实现想要的业务功能。
