1. 程式人生 > >淺談小程式獲取使用者資訊介面調整

淺談小程式獲取使用者資訊介面調整

一. 五一節前調整了獲取使用者資訊介面,迫使我們專案需要更改登入介面,首先看一下官網給出的理由和方法:

為優化使用者體驗,使用 wx.getUserInfo 介面直接彈出授權框的開發方式將逐步不再支援。從2018年4月30日開始,小程式與小遊戲的體驗版、開發版呼叫 wx.getUserInfo 介面,將無法彈出授權詢問框,預設呼叫失敗。正式版暫不受影響。開發者可使用以下方式獲取或展示使用者資訊:

二. 我對介面修改的理解:
開發者可以根據需要來調取使用者資訊,而不是使用者首次進入小程式就彈出授權的彈框,這樣對於使用者來說是不友好的。比如可以在使用者點選登入的時候再獲取使用者資訊,或者提交表單的時候等等,總之可以根據業務邏輯進行開發。

三. 然而對於我們專案的業務邏輯卻是不好的事兒,嗚嗚。。。因為我們需要在一開始就獲取使用者的資訊入庫,相信很多人都會有這樣的需求,那就記錄一下我們專案的登入。

  1. 首先自己寫一個彈框,觸發獲取資訊的內容
    小程式原生元件彈框沒有可以編輯的按鈕,所以需要我們自己來寫
    如圖:
    這裡寫圖片描述
    程式碼如下:
<!-- 自定義彈框開始 -->
  <view wx:if="{{showModel}}" class="model">
    <view class="modelTitle">
      獲取微信授權資訊
    </view>
    <view
class="modelBody">
微信登入需要獲取您的使用者資訊,請前往設定</view> <view class="btns"> <button open-type="getUserInfo" class="agree" bindgetuserinfo="agreeGetUser" lang="zh_CN">去設定</button> </view> </view> <view wx:if="
{{showModel}}" class="mask"></view> <!-- 自定義彈框結束 -->
  1. 判斷使用者是否授權
    判斷是否授權,如果沒有授權,那麼需要自定義彈框顯示,點選“去設定”,然後彈出授權框;如果已經授權,邏輯上就應該不再彈出任何框,這裡就需要把使用者首次進入小程式授權的使用者資訊存在本地然後那來使用
 // 登入
    wx.login({
      success: res => {
        app.globalData.code = res.code
        //取出本地儲存使用者資訊,解決需要每次進入小程式彈框獲取使用者資訊
        app.globalData.userInfo = wx.getStorageSync('userInfo')
        //wx.getuserinfo介面不再支援
        wx.getSetting({
          success: (res) => {
            //判斷使用者已經授權。不需要彈框
            if(!res.authSetting['scope.userInfo']){
              that.setData({
                showModel: true
              })
            }else{//沒有授權需要彈框
              that.setData({
                showModel: false
              })
              wx.showLoading({
                title: '載入中...'
              })
              that.getOP(app.globalData.userInfo)
            }
          },
          fail: function () {
            wx.showToast({
              title: '系統提示:網路錯誤',
              icon: 'warn',
              duration: 1500,
            })
          }
        })
      },
      fail:function () {
        wx.showToast({
          title:'系統提示:網路錯誤',
          icon: 'warn',
          duration: 1500,
        })
      }
    })
  },
  //獲取使用者資訊新介面
  agreeGetUser:function (e) {
    //設定使用者資訊本地儲存
    try {
      wx.setStorageSync('userInfo', e.detail.userInfo)
    } catch (e) {
      wx.showToast({
        title: '系統提示:網路錯誤',
        icon: 'warn',
        duration: 1500,
      })
    }
    wx.showLoading({
      title:'載入中...'
    })
    let that = this
    that.setData({
      showModel:false
    })
    that.getOP(e.detail.userInfo)
  },
  getOP: function (res) {//提交使用者資訊 獲取使用者id
    let that = this
    let userInfo = res
    app.globalData.userInfo = userInfo
    wx.request({
      url: 'https://xcx.xiancaijun.cn/tigerlogin/tgLogin',
      method: 'post',
      data: {
        "code": app.globalData.code,
        'userInfo': userInfo
      },
      success: function (res) {
        if(res.data.respcode == '0'){
          app.globalData.userId = res.data.uid
          app.globalData.keys = res.data.keys
          app.globalData.access = res.data.access
          that.getBook()
          that.shareInfo()
          if (that.data.cid) {
            wx.navigateTo({
              url: '/pages/course/course?cid=' + that.data.cid
            })
          }
        }else if(res.data.respcode == '15'){
          wx.hideLoading()
          wx.showToast({
            title:'沒有授權,不能進入小程式',
            icon:'none',
            duration:2000
          })
        }

      }
    })
  },