前言
我们的会员小程序最重要的采集信息就是会员的手机号，首先手机号唯一，可以用来唯一标识会员的身份。其次在日常的业务操作中，如会员的充值、消费等，需要根据会员的手机号来进行操作。
采集会员的手机号作为了必备需求，本文就介绍如何利用微搭低代码来快速的收集会员的手机号，相信对你的业务会很有帮助。
实现思路
手机号作为用户的敏感信息，不允许直接通过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这个属性，如果这个属性里有值就表示调用成功了。
这个cloudID很重要，如果返回成功就可以通过它进行解密，来获得用户的手机号。解密的话需要调用云函数，我们用自定义连接器来创建云函数
创建自定义连接器
在控制台找到自定义连接器，点击新建自定义连接器
输入名称和标识
点击立即新建，创建方法
输入方法的名称和标识
点击查看详情，输入如下代码
const cloud = require('wx-server-sdk'); // 引用wx-server-sdk依赖文件cloud.init({env: cloud.DYNAMIC_CURRENT_ENV, //进行云能力初始化})module.exports = async function (params, context) {const { cloudId } = params; //得到前端通过手机号按钮获取到的clouidconst result = await cloud.getOpenData({//通过clouid调用getOpenData方法，获取解密后的手机号数据"list": [cloudId]})return result;}
点击添加入参，输入clouId，增加一个参数
如果此时点方法测试，会发现报错，报错就无法进行出参映射，需要我们手动添加出参
点击添加出参，输入result，添加出参即可
自定义连接器创建好之后，在列表上点击更多，将连接器发布
低码中调用自定义连接器
连接器创建好之后，我们就可以在低码中调用了，找到上边定义好的低码方法，输入如下代码:
/**** 可通过 $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 async function({event, data}) {console.log(event.detail)const result = await app.cloud.callConnector({name: 'getphone_04w5sfi',methodName: 'getphone',params: {cloudId:event.detail.cloudID}, // 方法入参});}
这里的name就是自定义连接器的标识，methodName是方法的标识
自定义方法修改后，点击导航条的发布按钮，发布成小程序在手机上查看获取到的手机号
将手机号显示在页面上
获取到手机号后，如果希望显示在页面上，可以先创建一个变量
在低代码中将获取到的手机号赋值给变量即可
/**** 可通过 $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 async function({event, data}) {console.log(event.detail)const result = await app.cloud.callConnector({name: 'getphone_04w5sfi',methodName: 'getphone',params: {cloudId:event.detail.cloudID}, // 方法入参});$page.dataset.state.phone = result.list[0].data.phoneNumber}
在页面上添加一个文本组件，将变量绑定即可
最终效果
点击按钮获取手机号，会弹出授权窗口，如果手机安装了多张卡，会让选择手机号，点击授权，就可以将手机号显示到对应的位置上。
当然了你也可以将手机号存入自己的数据源中，方便后续业务调用。
总结
我们今天带着大家探索了一下获取手机号这个功能，有些功能做的时候查查官方的文档，如果有文档直接照着做就可以，可以节省不少时间。
联系客服
