參考文章：
微信小程序授權登錄---“允許”或“拒絕”等等操作（附源碼）
-
首先在app.js文件的OnLoad方法里執行微信的登錄方法：
wx.login()內容如下：// 登錄 wx.login({ success: res => { // 發送 res.code 到后台換取 openId, sessionKey, unionId console.log(res) if(res.code) { // 這里連接后台數據庫，查詢有無用戶信息 util.get(api.LoginUrl.replace('{id}','2')).then((res) => { console.log(res) if(用戶信息為空，說明從未授權登錄過) { wx.showModal({ title: '警告', content: '尚未進行授權，請點擊確定跳轉到授權頁面進行授權。', success: function (res) { if (res.confirm) { // 如果沒有授權，則會彈出跳轉至授權的彈框，點擊允許之后跳轉至授權頁面 wx.navigateTo({url: '../authorization/authorization',}) } } }); } // that.globalData.openid = res.data.openid // that.globalData.userInfo=res.data }).catch((errMsg) => { console.log(errMsg) //錯誤提示信息 wx.showToast({ title: errMsg, icon: "none" }); }) } else { console.log('獲取用戶登錄態失敗！' + res.errMsg) } } })
微信登錄方法執行之后，連接后台數據庫，查詢有無用戶信息，如果用戶信息為空，說明從未授權登錄過，如果沒有授權，則會彈出跳轉至授權的彈框，點擊允許之后跳轉至授權頁面
-
授權頁面
授權頁面的HTML代碼如下：
<view wx:if="{{canIUse}}"> <view class='headView'> <view class='headImageView'> <!-- <image class='headImage' src='../../images/navator/person.jpg' mode='scaleToFill'></image> --> <!-- 通過open-data展示用戶頭像 --> <open-data class='headImage' type="userAvatarUrl"></open-data> </view> <view class='titleText'>申請獲取以下權限</view> <view class='contentText'>獲得你的公開信息(昵稱,頭像,手機等)</view> <button class='authBtn' type='primary' open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo'>授權登錄</button> </view> </view> <view wx:else>請升級微信版本</view>
該頁面html代碼是通過一個open-data標簽來獲取用戶頭像，如下：
wxss代碼如下：
.headView {
margin: 90rpx 50rpx 90rpx 50rpx; /*上右下左*/
}
.headImageView {
display: block;
margin-left: 25px;
margin-top: 25px;
margin-right: 25px;
margin-bottom: 0px;
height: 50px;
}
.headImage{
display: flex;
width: 50px;
height: 50px;
}
.titleText {
margin-left: 25px;
margin-top: 25px;
margin-bottom: 10px;
font-size: 14px;
color: #020e0f;
text-align: center;
}
.contentText {
margin-left: 25px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 14px;
color: #666;
text-align: center;
}
.authBtn {
margin-top: 35px;
margin-left: 25px;
margin-right: 25px;
height: 45px;
font-size: 17.5px;
}
js代碼如下：
// pages/authorization/authorization.js
Page({
/**
* 頁面的初始數據
*/
data: {
//判斷小程序的API，回調，參數，組件等是否在當前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo'),//獲取用戶信息是否在當前版本可用
isHide: false
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
var that = this;
//查看是否授權
wx.getSetting({
success: function(res) {
console.log(res)
if (res.authSetting['scope.userInfo']) {
console.log("用戶授權了");
} else {
//用戶沒有授權
console.log("用戶沒有授權");
}
}
});
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
bindGetUserInfo: function(res) {
if (res.detail.userInfo) {
//用戶按了允許授權按鈕
var that = this;
// 獲取到用戶的信息了，打印到控制台上看下
console.log("用戶的信息如下：");
console.log(res.detail.userInfo);
const {userInfo} = res.detail.userInfo;
console.log(userInfo)
wx.setStorageSync("userInfo", res.detail.userInfo);
console.log(wx.getStorageSync('userInfo'))
//授權成功后,通過改變 isHide 的值，讓實現頁面顯示出來，把授權頁面隱藏起來
that.setData({
isHide: false
});
wx.switchTab({
url: '../myPage/myPage',
})
} else {
//用戶按了拒絕按鈕
wx.showModal({
title: '警告',
content: '您點擊了拒絕授權，將無法進入小程序，請授權之后再進入!!!',
showCancel: false,
confirmText: '返回授權',
success: function(res) {
// 用戶沒有授權成功，不需要改變 isHide 的值
if (res.confirm) {
console.log('用戶點擊了“返回授權”');
}
}
});
}
},
})
js代碼主要是bindGetUserInfo這個方法，如果點擊了授權允許的按鈕，就保存用戶的信息到緩存，並跳轉至我的頁面
json文件代碼：
{
"navigationBarTitleText": "授權登錄",
"usingComponents": {}
}
但是一開始按照bindGetUserInfo來執行是可以跳出授權彈框的，但是一周之后再運行就跳轉不出來，並且獲取的用戶信息nickname是“微信用戶"
這里參考了文章 附解決方案，小程序獲取的用戶信息中昵稱圖然變成了“微信用戶”，而且頭像也顯示不了？
在authorization.wxml文件中把 bindgetuserinfo='bindGetUserInfo' 更改為bindtap='getUserProfile' ，在js文件中增加getUserProfile方法，方法內容如下：
getUserProfile() {
var that = this;
wx.getUserProfile({
desc: '用於完善用戶資料', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
success: (res) => {
console.log("獲取用戶信息成功", res)
console.log("用戶的信息如下：");
console.log(res.userInfo);
wx.setStorageSync("userInfo", res.userInfo);
console.log(wx.getStorageSync('userInfo'))
//授權成功后,通過改變 isHide 的值，讓實現頁面顯示出來，把授權頁面隱藏起來
that.setData({
isHide: false
});
wx.switchTab({
url: '../myPage/myPage',
})
},
fail: res => {
console.log("獲取用戶信息失敗", res)
}
})
}
這個wx.getUserProfile和我們之前使用button結合open-type="getUserInfo" 和bindgetuserinfo事件獲取用戶信息沒有太大區別，點擊事件里調用wx.getUserProfile就可以調起授權彈窗，沒必要非得在button組件里使用點擊事件了。用戶同意后返回用戶信息：userInfo