加油站小程序实战教程11会员注册

目录

• [1 创建API](#1 创建API)
• [2 搭建页面布局](#2 搭建页面布局)
• [3 绑定事件](#3 绑定事件)
• 总结

上一篇我们介绍了我的页面，显示未开通界面的搭建。当用户点击开通会员时，我们给出弹窗提示用户进行手机号授权，得到手机号之后我们调用API来完成会员的注册。本篇我们介绍一下会员注册的流程。

1 创建API

会员注册的时候需要调用API，我们在用户管理模块，添加会员注册方法。

添加入参，我们传入两个参数openid和手机号码

输入如下代码：

const ErrorCode = {
    SUCCESS: 0,
    PARAM_ERROR: 1001,
    NOT_FOUND: 1002,
    SYSTEM_ERROR: 1003,
    USER_EXISTS: 1004,
    USER_NOT_EXISTS: 1005
};

// 用户注册
module.exports = async function (params, context) {
    const { openid, phone } = params;

    // 参数验证
    if (!openid || !phone) {
        return {
            code: ErrorCode.PARAM_ERROR,
            message: '参数错误'
        };
    }

    try {
        // 检查用户是否已存在
        const existUser = await context.callModel({
            name: "users",
            methodName: "wedaGetItemV2",
            params: {
                filter: {
                    where: {
                        $and: [
                        {
                            openid: {
                            $eq: openid, 
                            },
                        },
                        {
                            phone: {
                            $eq: phone, 
                            },
                        },
                        ],
                    },
                    },
                    
        select: {
          $master: true, // 常见的配置，返回主表
        },
            }
        });
        console.log("existUser",existUser)

        if (Object.keys(existUser).length > 0) {
            return {
                code: ErrorCode.USER_EXISTS,
                message: '用户已存在'
            };
        }

        // 创建新用户
        const result = await context.callModel({
            name: "users",
            methodName: "wedaCreateV2",
            params: {
                data: {
                    openid,
                    phone,
                    status: "1"
                }
            }
        });

        const userid = result.id

        // 开通会员
        const member = await context.callModel({
            name: "members",
            methodName: "wedaCreateV2",
            params: {
                data: {
                    user_id:{_id:userid},
                    level:"1",
                    status: "1",
                    points:0,
                    balance:0
                }
            }
        });

        return {
            code: ErrorCode.SUCCESS,
            data: {userid:result.id,memberid:member.id}
        };
    } catch (error) {
        return {
            code: ErrorCode.SYSTEM_ERROR,
            message: '系统错误'
        };
    }
}

我们的注册逻辑是分为两步，先注册用户，然后再开通会员。

代码写好后点击运行测试，看到执行成功后点击出参自动映射

映射成功后可以看到我们出参的结构

2 搭建页面布局

API写好之后，就需要搭建布局，在内容插槽下边添加弹窗组件

弹窗内容里添加获取手机号组件

将按钮的标题改为开通会员

关闭弹窗的显示底部内容配置

3 绑定事件

布局搭建好之后，就可以给按钮绑定事件了，我们的组件是可以得到用户授权的手机号的，得到之后我们就可以调用API来完成注册

选中我们的按钮，设置获取手机号成功事件，方法选择调用数据源方法

名称选择我们的用户管理，方法选择开通会员

openid绑定为currentUser的openId

手机绑定我们的无区号手机号

event.detail.purePhoneNumber

设置成功后再跟一个javascript调用，调用一下我们的获取会员状态的方法

这样就完成了整体的配置

总结

本篇我们介绍了会员注册的开发流程。先讲解了后端API怎么开发，接着搭建了页面布局，之后进行了事件绑定。低代码开发既涉及前端开发也涉及后端开发，因为支持写各类逻辑，总体上比较灵活，不像有些人宣传的说是只能托拉拽不能写复杂的应用。