微信小程序getUserInfo解決方案

問題

在微信小程序開發中，獲取用戶信息是常常會用到的！在以前，咱們直接調用wx.getUserInfo接口，就能夠直接獲取用戶的信息，然而爲了安全考慮，從2018年4月30號開始，wx.getUserInfo接口不能直接調用（接口調整），須要使用 <button open-type="getUserInfo"></button> 引導用戶主動進行受權操做，意外就是來的這麼忽然，防不勝防！！！

 

處理方法

一、<open-data></open-data> ：只是簡單的獲取信息用於顯示

  

  其中，type="userAvatarUrl"是獲取用戶頭像，type="userNickName"是獲取用戶暱稱，具體使用詳情查看小程序開發文檔 ,此方法僅用於直接簡單的展現用戶信息。

二、使用 <button open-type="getUserInfo">獲取用戶信息

    小程序官方文檔有在說明wx.getUserInfo 當用戶未受權過，調用該接口將直接報錯，即便調用該接口將直接jinru進入fail的回調； 當用戶受權過，能夠使用該接口獲取用戶信息。

  可是，如何有更好的用戶體驗來引導用戶手動調用此方法呢？這裏思考了幾種實現方案：

一、在項目首頁直接調用getUserInfo方法，若從未受權過，跳轉到受權頁面引導用戶手動受權

     

    在受權頁面authorize 寫入按鈕組件

並在js中，加入手動點擊按鈕的方法，返回首頁

此方案可行，可是受權頁面就一個受權的按鈕未免顯得突兀些，進一步作優化方案。

 

考慮到是否是可以直接經過條件渲染wx-if 在首頁多加一部分遮罩層做爲引導用戶受權的頁面展現，由於用戶使用小程序一經受權之後，再次進入小程序就不用受權了，也就是說只有在用戶第一次使用小程序的時候纔會引導用戶受權操做，因此這裏考慮經過遮罩層來實現。

在首頁多加一個遮罩層

同時查閱微信小程序開發文檔 在頁面加載後調用wx.getSetting方法能夠獲取當前用戶的設置，返回值中只會出現小程序已經向用戶請求過的權限，這樣能夠判斷用戶是否受權過權限

未受權受權遮罩層顯示

                                                          

引導用戶受權後

hasUserInfo: true

遮罩層消失，完成受權。

微信修改getUSerInfo這個接口後確實不如以前直接進入小程序自動調用獲取用戶信息方便些，可是確實是爲了增強安全性的考究，才經過按鈕的方式讓用戶本身主動去受權，雖然對於開發者咱們來說不太習慣，可是對於增強了用戶信息的安全性，網絡信息安全確實是比較重要的一環。