微信小程序button受權頁面,用戶拒絕後仍可再次受權

微信小程序受權頁面,進入小程序若是沒受權跳轉到受權頁面,受權後跳轉到首頁,若是用戶點拒絕下次進入小程序仍是能跳轉到受權頁面,受權頁面以下html

app.js  中的 onLaunch或onShow中加以下代碼,若是沒受權跳轉到受權頁面小程序

    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經受權,能夠直接調用 getUserInfo 獲取頭像暱稱,不會彈框
          wx.getUserInfo({
            success: res => {
              // 能夠將 res 發送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 因爲 getUserInfo 是網絡請求,可能會在 Page.onLoad 以後才返回
              // 因此此處加入 callback 以防止這種狀況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }else{
          // 未受權,跳轉到受權頁面
          wx.reLaunch({
            url: '/pages/auth/auth',
          })
        }
      }
    })

auth.wxml 受權頁面結構微信小程序

<view class="auth">
  <image src="https://res.wx.qq.com/wxopenres/htmledition/images/favicon32f740.ico" class="img" mode="aspectFill"></image>
  <view class="title">微信受權頁面</view>
  <view class="describe">此頁面是微信受權頁面,點擊下方按鈕彈出受權或跳轉頁面</view>
  <button class="btn" open-type='getUserInfo' wx:if="{{canIUse}}" bindgetuserinfo='onAuth'>點擊微信受權</button>
  <navigator wx:if="{{!canIUse}}" class="btn" url="/pages/auth/auth" open-type="reLaunch" hover-class="other-navigator-hover">已經受權點擊調轉</navigator>
</view>

auth.wxss  受權頁面樣式微信

/* 開始 */
page {
  height: 100%;
  display: table;
}

.auth {
  margin-top: 0;
  text-align: center;
  display: table-cell;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 100rpx;
  vertical-align: middle;
}

.img {
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #fff;
  margin: 0 0 60rpx;
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  line-height: 0;
}

.title {
  display: inline-block;
  width: 100%;
  margin: 0 0 60rpx;
}

.describe {
  color: #a7aaa9;
  font-size: 26rpx;
  margin: 0 0 60rpx;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.btn {
  padding: 0 60rpx;
  background-color: #19be6b;
  margin: 20rpx 0 200rpx;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  user-select: none;
  font-size: 14px;
  border: 0 !important;
  position: relative;
  text-decoration: none;
  height: 44px;
  line-height: 44px;
  box-shadow: inset 0 0 0 1px #19be6b;  
  background: #fff !important;
  color: #19be6b !important;
  display: inline-block;
  border-radius: 10rpx;
}

auth.js  受權頁面js,點擊受權後跳轉到首頁網絡

var app = getApp();
Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onAuth() {
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          wx.reLaunch({
            url: '../index/index',
          })
        }
      }
    })
  }
})

==============================================app

 本文連接 http://www.javashuo.com/article/p-htwmofjf-dd.htmlxss

==============================================flex

相關文章
相關標籤/搜索