How to obtain the mobile phone number (getPhoneNumber) through the authorization of users in WeChat applet

Time:2020-2-18

This article mainly introduces how the wechat applet obtains the mobile phone number through user authorization. The example code in this article is very detailed, which has certain reference learning value for everyone’s study or work. You can refer to the following for friends who need it

The app has a very convenient API for getting users, which is to get the user’s mobile phone number bound to wechat through getphonenumber. One thing we should pay attention to is that now wechat and user experience are emphasized. Some methods can be called only when the user initiatively triggers them, such as getphonenumber.

Official document: https://developers.weixin.qq.com/miniprogram/dev/framework/open-capability/getphonenumber.html

Implementation ideas:

Direct delivery:

1、


<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

2. The getphonenumbe component function in JS (the most important thing in this event is to initiate an interface request after wx.login logs in). Here you need to configure parameters to give the interface:

These are essential parameters, which are all necessary to make a legitimate request.

Appid: "your app appid",
Secret: "your applet appsecret",
code: res.code,
encryptedData: telObj,
iv: ivObj
//Login by binding mobile number
  getPhoneNumber: function (e) {
   var ivObj = e.detail.iv
   var telObj = e.detail.encryptedData
   var codeObj = "";
   var that = this;
   //------Execute login---------
   wx.login({
    success: res => {
     Console. Log ('code conversion ', res.code);
 
      //Transfer the code to the server to exchange the session key
     wx.request({
      URL: 'HTTPS: // your interface file path', // interface address
      data: {
       Appid: "your app appid",
       Secret: "your applet appsecret",
       code: res.code,
       encryptedData: telObj,
       iv: ivObj
      },
      success: function (res) {
       phoneObj = res.data.phoneNumber;
       Console.log ("mobile number =", phoneobj)
       Wx. Setstorage ({// stores data and is ready to be sent to the next page for use
        key: "phoneObj",
        data: res.data.phoneNumber,
       })
      }
     })
 
     //-----------------Whether to authorize or not. The authorization is through entering the main page. If the authorization is denied, it will stay in the login interface
     If (e.detail. Errmsg = ='getphonenumber: user deny ') {// the user clicks reject
      wx.navigateTo({
       url: '../index/index',
      })
     }Else {// allow authorization to perform jump
      wx.navigateTo({
       url: '../test/test',
      })
     }
    }
   });
},

Final results:

Click “reject” and the developer can catch the event. At this time, the getphonenumber function returns e.detail.errmsg as getphonenumber: user deny

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.