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

1 创建登录页

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

2 在首页检查登录状态

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

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

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

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

先设置逻辑分支

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

bash 复制代码

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

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

3 搭建登录功能

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

保留手机号和密码字段

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

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

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

输入如下代码

bash 复制代码

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 '手机号或者密码错误'
    }
}

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

最终效果

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

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

总结

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