微信小程序(二)登錄授權實現
阿新 • • 發佈:2019-01-14
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 () { } })
微信小程序(二)登錄授權實現