会员管理小程序实战开发11-获取会员手机号

微搭低代码从入门到精通

第一章 总体介绍

第二章 数据源介绍

第三章 首页开发

第四章 用户登录及注册

第五章 权限设计

第六章 生命周期函数及自定义方法介绍

第七章 页面跳转

第八章 低码中操作数据库

第九章 低码中的调试方法

第十章 布局介绍

@TOC

前言

我们的会员小程序最重要的采集信息就是会员的手机号，首先手机号唯一，可以用来唯一标识会员的身份。其次在日常的业务操作中，如会员的充值、消费等，需要根据会员的手机号来进行操作。

采集会员的手机号作为了必备需求，本文就介绍如何利用微搭低代码来快速的收集会员的手机号，相信对你的业务会很有帮助。

实现思路

手机号作为用户的敏感信息，不允许直接通过API来调用，必须要求用户主动点击按钮来发起授权。

用户触发后会触发相应的事件，然后我们在事件的对象里获取返回的手机号。

要想实现该功能，首先需要了解一下微信小程序获取手机号的相关说明文档

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

在这里插入图片描述

我们需要几个步骤：

一、创建自定义应用

二、创建一个按钮

三、定义低代码方法

创建自定义应用

因为是需要调用微信的接口，那我们创建应用的时候需要选择小程序

在这里插入图片描述

在这里插入图片描述

添加按钮

在创建的应用的首页上添加一个按钮，将标题修改为获取手机号

在这里插入图片描述

将微信开发能力选择为获取手机号

在这里插入图片描述

创建自定义方法

按钮属性设置好之后，我们要设置按钮的行为，我们创建一个自定义方法来进行响应。点击导航条的菜单栏，点击低代码编辑器

在这里插入图片描述

在页面的handler旁边点击+号创建自定义方法，getphone

在这里插入图片描述

我们并不知道这个按钮点击之后会返回啥信息，最好的办法是将event对象打印一下看看，输入如下代码

/**
 * 
 * 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecyle 等信息
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 注意：该方法仅在所属的页面有效
 * 如果需要 async-await，请修改成 export default async function() {}
 **/

/**
 * @param {Object} event - 事件对象.
 * @param {string} event.name - 事件名.
 * @param {string} event.target - 事件的目标节点(触发该事件的节点).
 * @param {string} event.currentTarget - 当前处理该事件的节点。包括冒泡和捕获事件。.
 * 
 * @param {Object} data 
 * @param {any} data.target - 获取事件传参的数据 
 **/ 
export default function({event, data}) {
    console.log(event)
}

按钮上设置行为

自定义方法创建好之后，就需要将自定义方法和按钮进行绑定，点击组件的行为

在这里插入图片描述

选择自定义方法，设置我们刚刚创建的getphone

在这里插入图片描述

设置好了之后就可以发布小程序，在控制台里查看打印的信息

在这里插入图片描述

遗憾的是，个人号不允许调用这个接口，返回了报错信息

在这里插入图片描述

如果是企业号，可以查看一下控制台里有没有cloudID这个属性，如果这个属性里有值就表示调用成功了。

如果可以成功调用就可以参考官方文档的这一篇教程，进行后续的操作。

https://cloud.tencent.com/document/product/1301/65854

总结

我们今天带着大家探索了一下获取手机号这个功能，有些功能做的时候查查官方的文档，如果有文档直接照着做就可以，可以节省不少时间。