1. 程式人生 > >微信小程序(二)登錄授權實現

微信小程序(二)登錄授權實現

nbsp true false 函數 bubuko none 小程序 ava ssa

相對於上一節,這一節主要是動態獲取數據,主要是對登陸信息的接收,以及頁面獲取授權按鈕的相對相應(未授權時,顯示,授權後不顯示) 關鍵在於狀態值的判斷,以及對頁面的不同響應(m-->v) 技術分享圖片

wxml代碼如下:

<!--pages/index2/index2.wxml-->
<view class="index2Container">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
<button bindgetuserinfo=‘handleGetUserInfo‘ style
=‘display:{{isShow?"block":"none"}}‘ open-type="getUserInfo">獲取用戶登錄信息</button> <text class="username">hello {{userInfo.nickName}}</text> <view class="goStudy"> <text class="test">開啟小程序之旅</text> </view> </view>

技術分享圖片

技術分享圖片

js代碼如下:

// pages/index2/index2.js
Page({

/**
* 頁面的初始數據
*/
data: {
msg:"阿童木",
userInfo: "測試",
isShow:true
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
console.log("this" + this);
this.getUserInfo();
},
getUserInfo(){
//判斷用戶是否授權了
wx.getSetting({
success: (data) => {
console.log(data);
if (data.authSetting[‘scope.userInfo‘]) {
//用戶已經授權
this.setData({
isShow: false
});
} else {
//沒有授權
this.setData({
isShow: true
});
}
}
})
//獲取用戶登錄的信息
wx.getUserInfo({
success: (data) => {
console.log(data);
//更新data中的userInfo
this.setData({
userInfo: data.userInfo
});
},
fail: () => {
console.log("獲取用戶失敗!")
}
})
},
handleGetUserInfo(data){
console.log("用戶點擊了",data);
//判斷用戶點擊的是否允許
if(data.detail.rawData){
//用戶點擊的是允許4
this.getUserInfo();
}
},

/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {

},

/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {

},

/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {

},

/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {

},

/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {

},

/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {

}
})

微信小程序(二)登錄授權實現