评论

5行代码获取小程序用户手机号

手把手教你获取微信小程序用户的手机号

最近有很多同学有获取小程序用户手机号的需求。其实云开发出现之前我们获取小程序用户的手机号特别繁琐。自从有了云开发,我们获取用户手机号变得非常简单。只需要5行代码即可。

老规矩,我们先来看下效果图


再来看下核心的代码,其实只有下面这一些。

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

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

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


编写wxml文件,代码很简单

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

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

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

二,开发数据检验与解密

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

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

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

三,云函数的编写


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

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

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

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

四,上传cloudID获取手机号。

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

上图就是我们的云函数的调用。如果你对云开发和云函数还不了解,建议你去看下我之前写的云开发相关的文章,获取看下我录的《微信小程序云开发云函数入门》

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

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

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

点赞 9
收藏
评论

11 个评论

  • Y
    Y
    2020-05-19

    我为什么获取不到 cloudID 啊

    2020-05-19
    赞同 1
    回复 2
    • Helloworld
      Helloworld
      2021-01-19
      你开通云开发了吗?
      2021-01-19
      回复
    • 1号男嘉宾
      1号男嘉宾
      2021-07-27
      哥们 你的cloudID获取到了吗?
      2021-07-27
      回复
  • 侠之
    侠之
    2021-10-07

    必须给你个赞

    2021-10-07
    赞同
    回复
  • 琢玉郎
    琢玉郎
    2021-01-16

    巨石哥 膜拜你

    2021-01-16
    赞同
    回复
  • Same-張
    Same-張
    2020-07-17

    小石哥 问下这个只有企业微信可以获取是个人做的小程序添加到企业微信上也不能获取吗?

    2020-07-17
    赞同
    回复
  • hjl
    hjl
    2020-07-01

    跟着做的,但报错

    2020-07-01
    赞同
    回复
  • Tom ssss🐯
    Tom ssss🐯
    2020-03-15

    https://developers.weixin.qq.com/community/develop/doc/00084cc99083587fce0a0636651c00?highLine=wx.cloud.CloudID%28cloudID%29%2520undefined%25E4%25B8%25BA%25E7%25A9%25BA


    您好,我也同样遇到了获取手机号为空的问题,我是在小程序端解析cloudId(使用wx.cloud.CloudID函数)的,测试都可以,但是到了真实环境中,有的获取手机号成功了,有的没成功,我也不知道是怎么回事。没成功的返回undefined,是不是在小程序端解析手机号是存在sessionkey过期的问题,导致解析失败,必须得在服务器端使用cloud.getOpendata才能一定成功?

    2020-03-15
    赞同
    回复
  • 唯美
    唯美
    2020-03-05

    这位大石的文章 确实给了我好多收获

    2020-03-05
    赞同
    回复 1
    • 编程小石头
      编程小石头
      2020-07-01
      谢谢支持,我叫小石头
      2020-07-01
      回复
  • 田野
    田野
    2020-02-06

    跟着你做的,结果是 cloudID expired

    希望这些基本操作,再官方的demo里面都有示例


    2020-02-06
    赞同
    回复 8
    • 念轩
      念轩
      2020-02-26
      我和你一样,解决了吗
      2020-02-26
      回复
    • 田野
      田野
      2020-02-26回复念轩
      用服务端api解决了
      2020-02-26
      回复
    • 念轩
      念轩
      2020-02-26回复田野
      就是说不用这个cloudID了对吧
      2020-02-26
      回复
    • 田野
      田野
      2020-02-26回复念轩
      2020-02-26
      回复
    • 念轩
      念轩
      2020-02-26回复田野
      如果可以是否方便传授一下代码呢,我这边有个疫情防控的小程序挺着急的,被cloudID耽误了不少时间
      2020-02-26
      回复
    查看更多(3)
  • 2020-01-14

    获取手机号是每次拿都需要授权吗?还是说我第一次授权了以后就不需要在授权了????

    2020-01-14
    赞同
    回复 1
    • 编程小石头
      编程小石头
      2020-02-07
      每次都要授权
      2020-02-07
      回复
  • TNT
    TNT
    2019-12-17

    那不是你说的详细点嘛

    2019-12-17
    赞同
    回复 2
    • 编程小石头
      编程小石头
      2019-12-20
      哈哈,我尽快出一篇
      2019-12-20
      回复
    • TNT
      TNT
      2019-12-23回复编程小石头
      欧克
      2019-12-23
      回复

正在加载...

登录 后发表内容