当前位置：首页 > news >正文

加油站小程序实战教程08用户注册

news 来源：原创 2025/8/25 18:49:48

1 授权手机号

微搭提供了小程序手机号获取的组件，那如何获取用户的手机号呢？一般是查阅组件的文档说明。选中我们的手机号获取组件，点击使用说明
在这里插入图片描述
在文档中找到事件

他这里说的是，这个组件可以从事件里拿到出参结果，我们这里要获取无区号的手机号码

了解了组件如何使用之后，就可以给组件定义事件了。在代码区创建一个javascript方法，命名为register
在这里插入图片描述
我们从入参里获取一下手机号，输入如下代码

export default function({event, data}) {const phone = data.target}

左边我们是使用javascript语法定义了一个变量，用来保存接收到的电话。右边是从自定义方法拿到入参

然后给我们的组件配置获取手机号成功事件，调用我们的方法，并且传入入参
在这里插入图片描述

至于入参为什么是event.detail.purePhoneNumber，在官方文档里已经说的很清楚了

2 前端调用API

获取到手机号之后，我们就需要调用前端的API去写入数据了。一般前端API官方文档已经有了模板，具体模板的路径是
在这里插入图片描述
我碰到很多初学者，一没有学习过javascript语言，不懂语法。二不看官网文档，不去找解决方案。只是单纯的不会要结果，得不到结果然后就觉得产品不好，不容易上手。不进行学习而直接求结果本身这个诉求就不合理。

知道如何调用API，我们就可以把这个代码贴入到我们获取手机号的代码下边
在这里插入图片描述
直接贴入是不行的，在await那一块就有个红色的波浪线，这说明你的语法是有问题的。

这里的问题是什么呢，这就涉及到javascript的一个语法的问题。await/async是一个语法糖，表示我们的异步调用函数可以像同步调用一样使用。

这里就涉及一个低代码的核心概念，什么是异步？异步表示你当下调用之后他不是立刻返回结果，代码会继续往下执行。这样就可能不符合我们的预期，我们是期望用户注册完毕之后把用户信息保存到全局变量里。

为了得到调用结果，我们使用了await关键字，表示要等待调用返回，那包含await的函数就要声明为异步调用函数。

那这段代码哪个作为函数呢？就是我们的export这个，因此正确的语法是

export default async  function({event, data}) {const phone = data.targetconst result = await $w.cloud.callDataSource({dataSourceName: '自定义 API 标识',methodName: '方法标识',params: {}, // 方法入参});}

我在function的前边写了一个async，这样就保证首先我们的语法过关了。然后就是修改dataSourceName和methodName

在这里插入图片描述
有可多问，为啥我把你的代码贴进去就运行不了，一堆报错。那代码也不是说买个手机，拆了包装就能运行了。那不得理解了原理，看人家这个热心的博主是怎么一个思路，然后自己改一改。你就是github上下载一份开源代码也不能一条命令运行之后买个服务器你的软件就上线了吧。

知道原理之后我们替换一下dataSourceName和methodName

export default async  function({event, data}) {const phone = data.targetconst result = await $w.cloud.callDataSource({dataSourceName: 'userManagement_nqq7c6l',methodName: 'register',params: {}, // 方法入参});}

我们在创建API的时候就添加了入参，很多问入参是啥？入参其实就是你想给数据库存啥数据，我们现在是想把那些愿意给我们手机号的存进去，这就是我们的入参。

入参从哪来，怎么存进去？

入参我们在创建API的时候已经创建好了
在这里插入图片描述
在调用的时候就要传入，openid我们会从当前登录信息中得到，phone的话已经从方法的入参得到了，改造好的代码

export default async  function({event, data}) {const phone = data.targetconst userInfo = await $w.auth.getUserInfo()const openid = userInfo.openIdconst result = await $w.cloud.callDataSource({dataSourceName: 'userManagement_nqq7c6l',methodName: 'register',params: {openid:openid,phone:phone}, // 方法入参});}

在构造入参的时候，左边的是你API入参的字段标识，右边的实际传入的值，这样才会把数据写入到数据库中

总结

本篇我们详细介绍了如何在前端将数据通过API写入数据库中，涉及不少理论加实践的事情。实际你自己在粘贴的时候，按照上述方法修改好，遇到问题多看看我教程里是怎么写的，调试程序是一个程序员必备的能力。

目录

1 授权手机号

2 前端调用API

总结

相关文章：