最近有很多同学有获取小程序用户手机号的需求。其实云开发出现之前我们获取小程序用户的手机号特别繁琐。自从有了云开发,我们获取用户手机号变得非常简单。只需要5行代码即可。
老规矩,我们先来看下效果图
![7123657907d51380f42aa9576eb49730.gif](https://i-blog.csdnimg.cn/blog_migrate/baa5f70e74f1b51d45687b3f2d257b20.gif)
再来看下核心的代码,其实只有下面这一些。
![3fa19f12a8efdc4c341946801092aca9.png](https://i-blog.csdnimg.cn/blog_migrate/5d6bb212d8e8526711fa370acd86ba23.jpeg)
甚至可以说核心代码只有上图红色框里的两行。是的,你没听错,只靠这2行代码,就可以轻松的获取用户小程序绑定的手机号。
下面我们就来具体讲解吧。
注意:只有企业小程序才可以获取用户手机号,个人小程序没有办法获取的。
一,首先要用到button组件的开发能力
![e3ee82343400264aa3e29ef0aaaa5d38.png](https://i-blog.csdnimg.cn/blog_migrate/a6cd402b4ae2a7330adf3811d0d326eb.jpeg)
编写wxml文件,代码很简单
![810a1b7a7324f13d8b2d8f305a513122.png](https://i-blog.csdnimg.cn/blog_migrate/1934d167e784e965821813e412cd5cea.jpeg)
可以看到我们的button按钮,使用了open-type。
再来看下我们对应的js方法。这样我们点击按钮时,就会弹出授权弹窗。如下图
![5690f7726376177818b22fab5bf6f395.png](https://i-blog.csdnimg.cn/blog_migrate/80e9dbc4b857a11aade6c3104b922a10.jpeg)
不管用户点击拒绝还是允许,我们都能拿到对应的回调。再用户点击了允许以后,就可以获取到以下数据。
![2bab1395df918b9a5a9932cbd2fa922b.png](https://i-blog.csdnimg.cn/blog_migrate/10ccd08c2dd6b78758f6bd6ee8b9937c.jpeg)
大家看到我们获取的数据里有一个cloudID,其实这个值很有用的。
二,开发数据检验与解密
- 1,首先我们看下官方提供的获取手机号的文档。
![9ac248082e64e14669b1962fc517ea9d.png](https://i-blog.csdnimg.cn/blog_migrate/ded991b1800116660d4e578e8df13f7d.jpeg)
看官方文档,可以知道,我们这里涉及到一个数据的检验与解密问题
- 2,开发数据检验与解密
![c67caaa617372358b0b0f991a2e9c9ed.png](https://i-blog.csdnimg.cn/blog_migrate/5cfacb70d3bb0c6679777df5eda794e1.jpeg)
这里我们要使用的就是方式二,使用云函数来实现解密,然后拿到用户的手机号。
三,云函数的编写
![332771fe207ec7af43669386ad1cee3b.png](https://i-blog.csdnimg.cn/blog_migrate/8f2195d705febd58182815739b78870d.jpeg)
通过上图可以看到,我们编写的云函数很简单。这里主要用的就是cloud.getOpenData这个功能。而这个功能需要的参数就是我们上面第一步获取的cloudID
![cc97df46cb4740cdc7d0c9668e761212.png](https://i-blog.csdnimg.cn/blog_migrate/f3e3f3a9e289ab5a32145a1b2a239927.jpeg)
这样我们调用云函数的时候,只需要把对应的cloudID传进来即可。
![62156b4ebdb3b978bfecd93779525e7d.png](https://i-blog.csdnimg.cn/blog_migrate/c588fbe5a7c491a85b0295f25866c4a3.jpeg)
看下我们的cloudID的作用,再来看下我们通过button的open-type获取的cloudID
![39b64ce5baa2cca65bcd8aeb3133ab78.png](https://i-blog.csdnimg.cn/blog_migrate/26f3160e4370e14702f9362477253566.jpeg)
可以看出,我们的cloudID和encryptedData一样,是一串加密数据。我们要通过云函数获取手机号,需要的就是这串加密字段。
四,上传cloudID获取手机号。
上面第三步云函数编写好以后,我们就可以来调用了。调用之前一定要记得部署下云函数,一定要记得部署下云函数。。。。
![eb12930cb8906fad746336b2e89bc601.png](https://i-blog.csdnimg.cn/blog_migrate/a0168428d3349e19b12fa9483de5a5d6.png)
上图就是我们的云函数的调用。如果你对云开发和云函数还不了解,建议你去看下我之前写的云开发相关的文章,获取看下我录的《微信小程序云开发云函数入门》
- 这时候点击按钮,我们就可以获取到了我们所需要的手机号了
![a26bd87e83a10a122b64a127e6041525.png](https://i-blog.csdnimg.cn/blog_migrate/8de0cd87b75d1ae28a6e4acff4c9d6d8.jpeg)
到这里我们就可以轻松的通过云开发获取用户的手机号了,比起传统的后台开发来获取,是不是简单了很多。