微信小程序模拟点击input框获取用户手机号

       最近在做一个小程序时遇到这样一个需求：要求在点击input框时获取用户的手机号还可以进行修改。但是我们都知道微信小程序获取手机号是通过button按钮的bindgetphonenumber属性来实现的，那么怎么能在input获得焦点时，获取用户手机号呢？

       首先，我们先来了解一下怎么通过button按钮来获取用户的手机号。在微信公众平台上，button按钮有一个open-type和bindgetphonenumber的属性：

           具体如下：

                1wxml:

                    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">输入手机号</button>

                2js

                    在这里我们需要注意首先要获取用户的openid和session_key,获取方式如下：

                        appjs:

                        wxlogin({

                              //获取code

                              success: (res) => {

                                    var code = rescode; //返回code

                                    thisglobalDatacode = code;

                                    thisglobalDataappId = 'wx5a9ded8ac4b1feb3';

                                    thisglobalDatasecret = '7ccbca95ddc8baf065194b533043a783';

                                    wxrequest({

                                          url: '>

最近开发微信小程序，做登录功能时遇到下图。

看太懂，有几处疑惑地方：

下面就是寻找答案的过程。

豪车模型

邻居模型

在上面两个模型中。豪车的主钥匙赋予泊车钥匙部分权限，而你赋予你的邻居所有的权限。比较之下，我们更希望使用豪车模型赋予部分权限，而不是邻居模型，万一他偷偷配了把钥匙呢？这种授权存在不安全性，在网络开发中也是如此。

登录时可以选择社交账号登录，这里以 QQ 为例。这里涉及三方：当前要登录的用户，以下简称 用户 ，其它两方是： ， QQ 服务器 。因为 用户

之前注册过 QQ， 请求 QQ 服务器 授权用户的 QQ 基本信息，这样用户就不用在上再进行注册了。

下面来探讨下 QQ 服务器 如何授权 当前 用户 的 QQ 基本信息。

这种方法比较简单， 用户 告诉 它的 QQ 账号密码，拿着账号密码去请求 QQ 服务器获取用户基本信息。

优点 ： *** 作简单。

缺点 ：用户将 qq 账号密码给了，获得了该用户在 QQ 上的所有特权，不仅可以查看基本信息，还可以查看 QQ 空间，查看 QQ 邮箱等，而用户的本意是只让获取 QQ 基本信息这一项特权。

下面是在 小胡子哥的个人博客 里看到的，将整个授权过程讲解的生动形象，我就不做二次加工，直接截取部分内容如下。

开发微信小程序第一步要在 微信公众平台 上注册一个账号，注册完成后在 设置 > 开发设置 里可以看到 AppID 和 AppSecret，这相当于上面提到的 Client Id 和 Client Secret。

微信登录用户 在 微信 中打开 小程序 ， 小程序 中运行了 wxlogin 接口，此时 小程序 拿着 appid 去请求 微信服务器 给 小程序 授权，让它可以调用一些微信接口，比如获取微信登录用户的基本信息。因为是 微信登录用户 进行 *** 作的，所以微信那端默认是同意授权的。（appid 哪里来？在新建小程序项目时输入，每个 appid 和小程序都是一一对应的）

上面也提到，这个 code 可能会泄露，所以需要 code + appid + appsecret 去再次拜访微信服务器获取令牌 session_key 和用户标识 openid。

这里有个疑问？为什么获取 code 在小程序上做，而获取 session_key 在第三方服务器上 *** 作？这是因为获取 code 需要使用 appid 去跳转微信服务器授权页面，再使用当前 微信登录用户 默认同意此次授权，如果坐在第三方服务器上，appid 我们是知道的，但是当前 微信登录用户 是不知道，只要手机上的微信知道。

那为什么请求 session_key 在第三方服务器上 *** 作？这是因为前面也说过 code 只能表明微信服务器统一此次授权，但是 code 可能会泄露，还需要第二张门票 appsecret 告诉微信服务器 “就是我，不是别人” 来请求获取 session_key 的。可见 appsecret 对于安全的重要性，放在第三方服务器方便管理。

关于 openid 和 session_key 说明？session_key 就是返回的绿卡，此后每次访问微信服务器资源都要带上它，这样微信服务器才知道此次请求是有授权的，我可以把资源给你。openid 是同意授权的那个人，这里是 微信登录用户 的标识 ID。也就是为什么 code 要在小程序中获取中我们不知道的那个 微信登录用户 ID。

到此，上图中涉及 Oauth20 的部分已经结束，下面的那些都是普通的 session 维持会话机制，这里就不再赘述。

由于作者文笔有限，文章如有遗漏或表达有误，请不吝赐教。如果仍对微信授权或 Oauth20 有疑问的，欢迎留言讨论。

Session你要每打开一个网站请求，那么服务器就会为他新建一个Session，直到用户 *** 作完成关闭整个页面！也就是说，每个Session是不同的对象，因此是不同的，你要理解这个！！！

你在一个浏览器中同时打开2个登录页面。那么就会有2个Session来对应你的这个两个页面，明白么？

以上就是关于微信小程序模拟点击input框获取用户手机号全部的内容，包括:微信小程序模拟点击input框获取用户手机号、微信小程序登陆流程、梳理微信小程序登录时序图：授权与 Oauth2.0等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！