Recently, because of the official small program, the gradual abolition of UserInfo interface decision, so many micro channel small program developers, very upset, at the same time, I also because of this anger, the company has an important meeting to show, suddenly such a move. It’s enough, but I can’t. Let’s change it.

So I, in the community to find a lot of official document small programs, small story (4) – get the user information | WeChat public platform The developer community. You will find the data returned from userInfo in the same way as before. The login interface takes res.code,

Then click the combination of the return value of the login button, you can exchange to unionID, to start the business logic.

 functionLogin (userInfo,callback,reset) {wx.login({success: res => {// Send res.code to the background for openId, sessionKey, unionIdif(res.code){// Save user information wx.setStoragesync ('UserInFo', userInfo) // Scan the qr code to enterlet Scene = wx.getStorageSync('scene')
                        let userInfoStr = JSON.stringify(userInfo);
                                wx.request({
                                    url: api.WxUnionId,
                                    data: {
                                        appid: 'xxx', / / tests secret:'xxx',
                                        js_code: res.code,
                                        grant_type: 'authorization_code', userInfo: userInfoStr, scene: scene}, method:'POST',
                                    header: {
                                        'content-type': 'application/x-www-form-urlencoded'
                                    },
                                    success: callback
                                })
                    }else{}}})Copy the code

With this wrapped, it’s time to start playing the authorized toast with Button.

<button class = "login-btn" open-type = "getUserInfo" bindgetuserinfo = "hand leUserInfo" > login </ button> // then print events UnionId handleUserInfo(e) {unionId handleUserInfo(e) {let msg = e.detail.errMsg;  
        if(msg === 'getUserInfo:ok') {let user = e.detail.userInfo;
            user.encryptedData = e.detail.encryptedData;
            user.iv = e.detail.iv;
            utils.setDataBase('islogin'.true); //setThe local data utils. The login (user, this. HandleLogin. Bind (this)) enclosing setData ({islogin:false
            });
        }else{
            utils.setDataBase('islogin'.false); //setThis.setdata ({islogin:true
            });          
            utils.showModal('XXX, request access to your public information (avatar, nickname, etc.). After authorization, you can experience our more perfect functions. Thank you for your attention to five-color sugar. '.false,this); }}, get the res on the back end in the handler to start the business logic. Don't post code when it comes to business logic.Copy the code

Because AT that time, I was a person to write the e-commerce mall, mpvue did not leave wepy company did not leave the time to learn, the above code is all the original writing method, but the most important thing to change this, is don’t bother, in fact, you slowly smooth out good.

https://www.zhihu.com/video/979511841957826560 effect here.

The landing page is ugly and the UI hasn’t been drawn yet, so don’t worry about these details.

https://juejin.cn/post/6844903613966319624#comment

I also summarized some notes I write small program, write a bad place, also ask god for advice.

Now that you’ve seen it, give it a thumbs up.