如何用几行代码轻松获取小程序用户的手机号?

在开发小程序的过程中,有的客户反映需要获取用户的手机号,咨询团队的技术如何实现,今天春哥团队技术虎子给大家分享下如何利用几行代码轻松搞定用户的手机号?

来一起看下核心的代码,基本只要下面这些即可实现。

如何用几行代码轻松获取小程序用户的手机号?

甚至可以说核心代码只有上图红色框里的两行。是的,你没听错,只靠这2行代码,就可以轻松的获取用户小程序绑定的手机号。
下面我们就来具体讲解吧。

注意:只有企业小程序才可以获取用户手机号,个人小程序没有办法获取的。

一,首先要用到button组件的开发能力

如何用几行代码轻松获取小程序用户的手机号?

编写wxml文件,代码很简单

如何用几行代码轻松获取小程序用户的手机号?


可以看到我们的button按钮,使用了open-type。
再来看下我们对应的js方法。这样我们点击按钮时,就会弹出授权弹窗。如下图

如何用几行代码轻松获取小程序用户的手机号?



不管用户点击拒绝还是允许,我们都能拿到对应的回调。再用户点击了允许以后,就可以获取到以下数据。

如何用几行代码轻松获取小程序用户的手机号?



大家看到我们获取的数据里有一个cloudID,其实这个值很有用的。

二,开发数据检验与解密

  • 1,首先我们看下官方提供的获取手机号的文档。

  • 如何用几行代码轻松获取小程序用户的手机号?

  • 看官方文档,可以知道,我们这里涉及到一个数据的检验与解密问题

  • 2,开发数据检验与解密

  • 如何用几行代码轻松获取小程序用户的手机号?

  • 这里我们要使用的就是方式二,使用云函数来实现解密,然后拿到用户的手机号。

    三、云函数的编写

如何用几行代码轻松获取小程序用户的手机号?


通过上图可以看到,我们编写的云函数很简单。这里主要用的就是cloud.getOpenData这个功能。而这个功能需要的参数就是我们上面第一步获取的cloudID

如何用几行代码轻松获取小程序用户的手机号?


这样我们调用云函数的时候,只需要把对应的cloudID传进来即可。

如何用几行代码轻松获取小程序用户的手机号?


看下我们的cloudID的作用,再来看下我们通过button的open-type获取的cloudID

如何用几行代码轻松获取小程序用户的手机号?

可以看出,我们的cloudID和encryptedData一样,是一串加密数据。我们要通过云函数获取手机号,需要的就是这串加密字段。

四,上传cloudID获取手机号。

上面第三步云函数编写好以后,我们就可以来调用了。调用之前一定要记得部署下云函数,一定要记得部署下云函数。。。。

如何用几行代码轻松获取小程序用户的手机号?

上图就是我们的云函数的调用。

这时候点击按钮,我们就可以获取到了我们所需要的手机号了

  • 如何用几行代码轻松获取小程序用户的手机号?

  • 到这里我们就可以轻松的通过云开发获取用户的手机号了,比起传统的后台开发来获取,是不是简单了很多。

今天就讲到这里了,后面还会更新更多小程序相关的技术文章出来,请持续关注春哥技术博客。


 
来源:春哥团队,欢迎分享,(春哥微信号:cgnanyin)
上一篇:微信小程序的引导页代码如何实现?      下一篇:为什么发布了新版本用户看不到?关于微