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

Posted 2023-04-25

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

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

           具体如下：

                1.wxml:

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

                2.js

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

                        app.js:

                        wx.login(

                              //获取code

                              success: (res) =>

                                    var code = res.code; //返回code

                                    this.globalData.code = code;

                                    this.globalData.appId = 'wx5a9ded8ac4b1feb3';

                                    this.globalData.secret = '7ccbca95ddc8baf065194b533043a783';

                                    wx.request(

                                          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + this.globalData.appId + '&secret=' + this.globalData.secret + '&js_code=' + code + '&grant_type=authorization_code',

                                          data: ,

                                          header:

                                                'content-type': 'json'

                                          ,

                                          success: (res) =>

                                                    var openid = res.data.openid //返回openid

                                                    this.globalData.openId = openid;

                                                    this.globalData.session_key = res.data.session_key;

                                                    wx.request(

                                                              url: this.globalData.req_url + '/WechatUser/dealUserMsg',

                                                              method:'post',

                                                              header: 'content-type': 'application/x-www-form-urlencoded' ,

                                                              data:

                                                                        openId:openid

                                                              ,

                                                              success:res=>

                                                                        console.log(res);

                                                              

                                                    )

                                             

                                    )

                              

                    )

                index.js:

                     // 点击按钮获取手机号

                  getPhoneNumber(e)

                        wx.request(

                              url: appData.req_url + '/WXCore/decrypt',

                              data:

                                    openId: appData.openId,

                                    encryptedData: e.detail.encryptedData,

                                    sessionKey: appData.session_key,

                                    iv: e.detail.iv

                              ,

                              header:

                                        'content-type': 'json'

                                ,

                              success: res =>

                                    this.setData(

                                            inputShow: true

                                    )

                               if(!res.data.res)

                                      console.log('未绑定手机号');

                                else

                                      this.setData(

                                            phoneNumber: res.data.bindPhone

                                      )

                               

                         

                    )

              ,

            结果如下：

                    

            点击允许，这个时候后台会对传过去的数据进行解密（具体度娘搜索微信小程序手机号码解密），就会将手机号码返回。

            ok，通过button我们成功的拿到了手机号码，那么怎么能在input框获取焦点时拿到手机号码，并且可以修改呢？

            经过a long long time的思考，终于想出了一个土办法。那就是将一个button标签和一个input框通过绝对定位重叠在一起，然后将button标签做成input框的样子，在我们第一次点击的时候成功获取到手机号以后，将button标签通过标志位隐藏，而让input标签显示，并将拿到的手机号码赋给input的value值，如此便可以实现模拟input框获得焦点时获取用户的手机号！！！

            

            虽然土，但是成功将效果实现了不是？

            最后给大家和我自己送上一份心灵鸡汤：

                    你想要的永远和你付出的成正比。

uniapp：微信小程序获取用户手机号

参考技术A

1. 后端获取“接口调用凭证”（后面会用到）
后端可以创建一个定时任务，从微信持续获取“接口调用凭证”并放入缓存；调用绝大多数微信后台接口时都需使用 access_token ，开发者需要进行妥善保存。
2. 前端发起获取手机号接口
需要一个button按钮，让用户主动去触发并调起获取手机号接口；当用户点击并同意之后，可以通过 bindgetphonenumber 事件（在uniapp中@getphonenumber）回调获取到动态令牌code。

3. 前端将code传给后端，后端用code调用微信后台接口获取手机号
如题，前端把code传给后端，后端调用微信接口，用 acces_token 和 code 获取用户手机号。

获取手机号
phonenumber.getPhoneNumber
auth.getAccessToken