点餐小程序实战教程05用户注册

上一篇我们实现了用户登录的界面，如果用户未注册，点击注册按钮就进入到注册页面。本篇我们讲解一下用户注册的逻辑

1 用户注册

一般像这种需要写入数据的业务，我们通常都是用表单容器来实现。打开应用编辑器，先创建一个用户维护的页面


删掉默认添加的网格布局，往页面中添加一个表单容器

选择数据模型，选择我们的顾客表

我们需要默认绑定用户的openid信息，从系统变量里绑定

可以把这个字段隐藏掉，切换到样式，点击布局旁边的眼睛就可以隐藏组件

再一个可以让用户使用微信名和头像来填充表单信息，图片组件打开配置，获取用户的头像

昵称可以从小程序里获取

表单容器默认是新增场景，像这类型页面我们添加一个就可以，通过传入场景类型，来确定是需要新增数据还是修改数据

选中页面组件，新建两个URL参数，type和id



然后点击表单场景的fx，绑定我们的URL参数type


这里我们继续使用了短路运算符，保证如果没有传入type，我们默认的场景是新增

如果是编辑场景，我们需要绑定数据标识，在数据标识的fx，绑定我们的URL参数id

2 唯一性校验

有时候我们需要验证用户的手机号是否注册，如果注册过了我们就不允许继续提交。这种可以在我们的用户管理的API里增加一个手机号唯一校验的方法。

打开API，点击我们的用户管理，点击编辑APIs方法

点击+号创建API

输入方法的名称和标识

输入如下代码

module.exports = async function (params, context) {
  const result = await context.callModel({
    name: 'customer_v7mamho', // 数据模型标识
    methodName: 'wedaGetRecordsV2', // 数据模型方法标识
    params: {
      // 筛选内容，查找与当前openid匹配的用户
      filter: {
        where: {
          $and: [
            {
              phone: {
                $eq: params.phone,
              },
            },
          ],
        },
      },
      // 排序
      orderBy: [
        {
          createdAt: "asc", // 创建时间，正序
        },
        {
          updateBy: "desc", // 更新时间，倒序
        },
      ],
      // 返回字段选择
      select: {
        $master: true, // 返回主表
      },
      // 返回total字段
      getCount: true,
      // 页面大小
      pageSize: 10, // 只需要一条记录
      // 当前页面
      pageNumber: 1,
    },
  });

  // 这里返回数据，和出参结构映射
  return {
            status: 'success',
            exists: result.total > 0
        };
};

我们这里是根据手机号码获取数据，如果返回的总条数大于0表示已经存在了，否则就是不存在

然后在入参那添加入参

添加完了点击方法测试，查看返回结果

点击出参自动映射完成我们的方法的创建

3 前端调用

API编写好了之后，我们要在提交的时候进行验证，可以写一个自定义方法进行调用。在我们的代码区创建一个javascript方法


输入如下的代码

export default async function ({ event, data }) {
  const phone = $w.inputPhone1.value
  const result = await $w.cloud.callDataSource({
    dataSourceName: 'userManager_ssztgij',
    methodName: 'checkPhoneNumber',
    params: { phone:phone },
  });
  if(result.exists){
    throw new Error("手机号码已经存在")
  }
}

我们这里先获取了表单输入的手机号，接着调用API去检查手机是否存在，如果存在我们就抛一个异常

方法定义好之后，选中表单容器，在属性面板里找到事件

增加一个javascript方法调用

选择我们的验证方法

将调用数据源方法移动到成功时里

失败时添加一个消息提醒，告诉用户手机号已经重复


数据源添加成功后增加一个返回上一页

4 设置新增和维护场景

在我的页面，我们定义了两个按钮，点击注册的时候是调用的新增场景，选中我们的按钮，给按钮设置事件

选择打开页面

页面选择用户维护，type传入create

给修改按钮设置事件，type传入edit，id从全局变量user对象获取数据标识

总结

本篇我们实现了用户的注册和修改，而且验证了用户的手机号是否唯一。在小程序中，注册用户可能会有各种情况，有的是要同意用户协议和隐私协议，有的是要求授权手机号，可以在此基础上进行扩展就可以。