With the solution, the nickname of the applet suddenly becomes "wechat user", and the avatar cannot be displayed?

Recently, many small partners are using getUserInfo When getting user nicknames and avatars of applets , The picture turns to the following .

bug splat

A lot of little friends must have doubts , I didn't make any changes in my code , How come all of a sudden . Remember we should have looked like this before .

Brother stone has encountered such a problem recently , There are two reasons I first thought of

1, Wechat official server is down （ The probability is very small ）

2, Wechat has changed the rules again ...

With such doubts , I went to ask the official staff of wechat app . The answer is ...

Ten thousand psychological ..... Ah , Can't , Since the official said to change the rules , We as vulnerable groups , It can only be changed according to the official rules .

Code changes

Fortunately, the code change momentum is not very big , Basically change 5 Just one line of code . Let's teach you how to change the code .

1, Let's look at the old code first

js The old code in

You can see that we use old code , What we got is the gray head and WeChat users Such a nickname

2, know wx.getUserProfile

Actually this wx.getUserProfile And we used button combination open-type="getUserInfo" and bindgetuserinfo It doesn't make much difference that events get user information , So let's get to know wx.getUserProfile

In fact, there are some advantages to this change , That is, we just need to call... In the click event wx.getUserProfile You can turn up the authorization pop-up window , There's no need to be button Click events are used in components .

Problem solving code

1,wxml Code changes in

2 js Code changes in

Here we mainly use

wx.getUserProfile({
      desc: ' It is used to improve the membership information ', //  Declare the purpose of obtaining the user's personal information , The follow-up will be shown in the pop-up window , Please fill in carefully 
      success: (res) => {
        console.log(" User information obtained successfully ", res)
      },
      fail: res => {
        console.log(" Failed to get user information ", res)
      }
})

You can see that you can successfully turn up the authorization pop-up window

And you can get the real nickname

In fact, we will transform it here , In fact, it's just a matter of a few lines of code , The trouble is that our small program has to be submitted for review again because of this change ....

Supplementary information ： Save user information to cache

If we let users click authorization every time we enter the page , It's a little too annoying , In fact, the data can be cached in the local cache when the first authorization successfully obtains the user information . Let's teach you how to cache user information .

The code and complete comments are posted to you

Mainly to call

wx.setStorageSync Save data to local cache

wx.getStorageSync Fetching cache data

wxml The code of the page is also posted to you

And our wxss style

We'll fill the official hole here .