上一篇我们实现了用户登录的界面,如果用户未注册,点击注册按钮就进入到注册页面。本篇我们讲解一下用户注册的逻辑
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对象获取数据标识
总结
本篇我们实现了用户的注册和修改,而且验证了用户的手机号是否唯一。在小程序中,注册用户可能会有各种情况,有的是要同意用户协议和隐私协议,有的是要求授权手机号,可以在此基础上进行扩展就可以。