微信小程序開發之簡單的受權登陸

<view class="container">

　　<view class='content'>

　　　　<view>申請獲取如下權限</view>

　　　　<text>得到你的公開信息(暱稱，頭像等)</text>

　　</view>

　　<button class='bottom' wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" type='primary'> 受權登陸</button>

</view>

點擊受權登陸按鈕

按鈕的點擊事件

第一次受權以後登陸並將code交互

其中一些官方受權的代碼並未刪除

//獲取應用實例

const app = getApp()

Page({

data: {

canIUse: wx.canIUse('button.open-type.getUserInfo')

},

 

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse) {

// 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回

// 因此此處加入 callback 以防止這種狀況

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

// 在沒有 open-type=getUserInfo 版本的兼容處理

wx.getUserInfo({

success: res => {

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

})

}

},

getUserInfo: function (e) {

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

},

//按鈕的點擊事件

bindGetUserInfo: function (res) {

let info = res;

console.log(info);

if (info.detail.userInfo) {

console.log("點擊了贊成受權");

var that = this

wx.login({

success: function (res) {

if (res.code) {

wx.request({

url: 'http://fa.com/api/schoolreserve/login',

data: {

code: res.code,

user_info: info.detail.userInfo

},

header: {

'content-type': 'application/json' // 默認值

},

success: function (res) {

var userinfo = {};

userinfo['id'] = res.data.id;

userinfo['nickName'] = info.detail.userInfo.nickName;

userinfo['avatarUrl'] = info.detail.userInfo.avatarUrl;

userinfo['user_data'] = res.data;

wx.setStorageSync('userinfo', userinfo)

that.setData({

userInfo: info.detail.userInfo

})

wx.switchTab({

url: '../toast/toast',

})

}

})

} else {

console.log("受權失敗");

}

},

})

} else {

//用戶按了拒絕按鈕

wx.showModal({

title: '警告',

content: '您點擊了拒絕受權，將沒法進入小程序，請受權以後再進入!!!',

showCancel: false,

confirmText: '返回受權',

success: function (res) {

if (res.confirm) {

console.log('用戶點擊了「返回受權」')

}

}

})

}

}

})

 

點擊受權以後跳轉

從新編譯項目

接下來在加載事件中判斷受否受權

若是已經受權則從新請求，跳轉頁面

若是沒有受權則加載請求受權的頁面

//app.js

App({

onLaunch: function () {

// 展現本地存儲能力

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

// 獲取用戶信息

wx.getSetting({

success: res => {

if (res.authSetting['scope.userInfo']) {

console.log("已經受權")

wx.getUserInfo({

success: res => {

// 能夠將 res 發送給後臺解碼出 unionId

this.globalData.userInfo = res.userInfo

// 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回

// 因此此處加入 callback 以防止這種狀況

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

//調用登陸

this.AnginLogin()

wx.switchTab({

url: '/pages/toast/toast',

})

}

})

}

}

})

},

// 登陸

AnginLogin() {

wx.login({

success: res => {

// 發送 res.code 到後臺換取 openId, sessionKey, unionId

if (res.code) {

wx.request({

url: 'http://fa.com/api/schoolreserve/login',

data: {

code: res.code,

user_info: this.globalData.userInfo

},

success: function (res) {

console.log('回調成功')

wx.setStorageSync('token', res.data.data.token)

wx.setStorageSync('user_id', res.data.data.user_id)

},

complete: function () {

wx.checkSession({

success() {

console.log('通過驗證，登陸有效')

// session_key 未過時，而且在本生命週期一直有效

},

fail() {

console.log('session過時，請從新登陸')

// session_key 已經失效，須要從新執行登陸流程

wx.switchTab({

url: '/pages/authorize/authorize',

})

}

})

}

})

} else {

console.log('登陸失敗！' + res.errMsg)

}

}

})

},

globalData: {

userInfo: null

}

})