<address id="r9vd9"><address id="r9vd9"><listing id="r9vd9"></listing></address></address>

      歡迎您光臨深圳塔燈網絡科技有限公司!
      電話圖標 余先生:13699882642

      網站百科

      為您解碼網站建設的點點滴滴

      微信小程序授權登錄取消授權重新授權處理方法 附可用代碼

      發表日期:2019-11 文章編輯:小燈 瀏覽次數:12788

      微信小程序授權登錄基本是小程序的標配了,但是官方的demo,取消授權后,就不能再重新點擊登錄,除非重新加載小程序才可以,這下怎么辦?

      我們可以先在首頁引導用戶點擊,然后跳轉到一個新的頁面,在新的頁面進行授權,然后新的頁面授權成功,立馬跳回首頁,顯示用戶信息。

      話不多說,直接上代碼

      代碼結構:

      index是首頁
      login是授權頁

      首頁代碼

      index.wxml

      <!-- 未授權,只顯示一個授權按鈕 -->
      <view wx:if="{{result==false}}">
        <button bindtap="getinfo" class="loginbtn"> 授權登錄 </button>
      </view>
      
      <!-- 授權后只顯示頭像和昵稱 -->
      <view elif="{{result==true}}" class="info">
        <image src="{{head}}" class="headimg"></image>
        <text class="nickname">{{name}}</text>
      </view>

      index.wxss

      /**index.wxss**/
      .loginbtn{
        width: 150px;
        height: 45px;
        background: #06C05F;
        margin:100px auto 0;
        line-height: 45px;
        font-size: 15px;
        color: #fff;
      }
      
      .info{
        width: 80px;
        height: 100px;
        margin:50px auto 0;
      }
      
      .info .headimg{
        width: 80px;
        height: 80px;
        border-radius: 100%;
      }
      
      .info .nickname{
        text-align: center;
      }

      index.js

      //index.js
      Page({
        data: {
          userInfo: {},
          hasUserInfo: false
        },
      
        //事件處理函數
        getinfo: function () {
          wx.navigateTo({
            url: '../login/index'
          })
        },
      
        onLoad: function (e) {
          let that = this;
          // 獲取用戶信息
          wx.getSetting({
            success(res) {
              // console.log("res", res)
              if (res.authSetting['scope.userInfo']) {
                console.log("已授權")
                // 已經授權,可以直接調用 getUserInfo 獲取頭像昵稱
                wx.getUserInfo({
                  success(res) {
                    console.log("獲取用戶信息成功", res)
                    that.setData({
                      name: res.userInfo.nickName,
                      head: res.userInfo.avatarUrl,
                      result: true
                    })
                  },
                  fail(res) {
                    console.log("獲取用戶信息失敗", res)
                    that.setData({
                      result: "取消授權"
                    })
                  }
                })
              } else {
                console.log("未授權")
                that.setData({
                  result: false
                })
              }
            }
          })
        }
      })

      授權頁代碼

      index.wxml

      <!--index.wxml-->
      <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授權獲取用戶信息 </button>

      index.js

      //index.js
      Page({
        data: {
          userInfo: {},
          hasUserInfo: false
        },
      
        getUserInfo: function (e) {
          let that = this;
          // 獲取用戶信息
          wx.getSetting({
            success(res) {
              // console.log("res", res)
              if (res.authSetting['scope.userInfo']) {
                console.log("已授權=====")
                // 已經授權,可以直接調用 getUserInfo 獲取頭像昵稱
                wx.getUserInfo({
                  success(res) {
                    console.log("獲取用戶信息成功", res)
                    that.setData({
                      name: res.userInfo.nickName,
                      head: res.userInfo.avatarUrl
                    })
                    wx.reLaunch({
                      url: '../index/index'
                    })
                  },
                  fail(res) {
                    console.log("獲取用戶信息失敗", res)
                  }
                })
              } else {
                console.log("未授權=====")
              }
            }
          })
        }
      })

      不懂可以咨詢我

      WeChat:face6009
      Web:http:likeyunba.com
      Date:2019-10-17
      Author:TANKING


      本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶學習參考,本站不擁有所有權,如您認為本網頁中由涉嫌抄襲的內容,請及時與我們聯系,并提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/25236.html
      相關小程序
        SQL執行錯誤,請檢查国产成人精品综合在线观看