微信小程序，使用button組件讓用戶主動登錄方式。

最近由於小程序官方，逐步廢除UserInfo接口的這個決定，讓不少微信小程序的開發者，很煩惱，同時我也由於這個上火，公司有重要會議要展現，忽然來着這麼一招。真的是夠了，可是沒辦法，開始改吧。

因而我，在社區找了不少官方的文檔小程序•小故事(4)--獲取用戶信息 | 微信公衆平臺 開發者社區。 你會發現跟原來的方式，只是改變了userinfo的數據返回。 login的接口拿 res.code，

而後點擊登錄按鈕的返回值相結合，就能夠換取到unionid，來開始業務邏輯了。

function login(userInfo,callback,reset) {
    wx.login({
            success: res => {
            // 發送 res.code 到後臺換取 openId, sessionKey, unionId
                    if(res.code){
                        //存用戶信息
                        wx.setStorageSync('UserInFo', userInfo)
                        // 掃面二維碼進入
                        let Scene = wx.getStorageSync('scene')
                        let userInfoStr = JSON.stringify(userInfo);
                                wx.request({
                                    url: api.WxUnionId,
                                    data: {
                                        appid: 'xxx',//測試
                                        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{
                    
                    }
                }
            })    複製代碼

封裝好這個，就能夠開始用button 來開始彈受權的吐司了。

<button class =「login-btn」open-type =「getUserInfo」bindgetuserinfo =「hand
leUserInfo」>
   登陸
</ button>

// 而後打印events 你就能夠加密數據 數據 調接口  後端解析 換 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);//set 本地數據
            utils.login(user,this.handleLogin.bind(this))
            this.setData({
                islogin:false
            });
        }else{
            utils.setDataBase('islogin',false);//set 本地數據
            this.setData({
                islogin:true
            });          
            utils.showModal('xxx，申請得到您的公開信息（頭像，暱稱等）。受權後，您能體驗到咱們更完善的功能，謝謝您關注五色糖。',false,this);
        }            
    },
在handleLogin  裏面 拿到後端的res  就能夠開始業務邏輯了。涉及到業務邏輯 就不貼代碼了。複製代碼

由於我當時，是一我的寫電商商城，那會mpvue 沒有出 wepy 公司沒有留學習的時間，以上的代碼全是原生的寫法，可是改這個最重要的，就是別煩，其實你慢慢捋順了就行了。

  https://www.zhihu.com/video/979511841957826560 效果在這裏。

登錄頁面比較醜，UI 尚未出圖，就不要在乎這些細節了。

https://juejin.im/post/5b0ccd4e51882515861d2347#comment

我還總結了一些我寫小程序的筆記，寫的有很差的地方，還請大神指點。

都看到這了，點個贊可好。