微信小程序受權頁面,進入小程序若是沒受權跳轉到受權頁面,受權後跳轉到首頁,若是用戶點拒絕下次進入小程序仍是能跳轉到受權頁面,受權頁面以下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