首先說(shuō)一下項(xiàng)目登陸過(guò)程的流程：
1.用戶第一次進(jìn)小程序耸彪，即之前沒(méi)有授權(quán)過(guò)。首先就彈出授權(quán)登陸頁(yè)面忘苛。用戶點(diǎn)擊同意后蝉娜，跳到首頁(yè)，如果用戶點(diǎn)擊拒絕扎唾，則再次引導(dǎo)用戶同意授權(quán)召川。
2.用戶之前授權(quán)登陸過(guò)，直接進(jìn)入小程序首頁(yè)胸遇。
login.wxml
<view wx:if="{{canIUse}}">
<view class='header'>
<image src='/images/arise.png'></image>
</view>
<view class='content'>
<view>申請(qǐng)獲取以下權(quán)限</view>
<text>獲得你的公開(kāi)信息(昵稱荧呐，頭像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授權(quán)登錄
</button>
</view>
<view wx:else>請(qǐng)升級(jí)微信版本</view>
必須要使用<botton open-type='getUserInfo'></button>引導(dǎo)用戶授權(quán)。同時(shí)在button上綁定事件bindgetuserinfo纸镊。
頁(yè)面上面的wx:if和wx:else倍阐，我相信這個(gè)大家都明白的，就是小程序的條件式渲染逗威。
app.js
//app.js
App({
globalData: {
userInfo: null,
url: 'https://mop.licltech.cn/crest',
code: ''
},
onLaunch: function () {
// 展示本地存儲(chǔ)能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
this.globalData.code = res.code;
}
})
},
addListener: function (callback) {
this.callback = callback;
},
setChangedData: function (data) {
this.data = data;
if (this.callback != null) {
this.callback(data);
}
}
})
在小程序的app.js里面峰搪，有一個(gè)onlaunch方法，當(dāng)用戶進(jìn)入小程序的時(shí)候凯旭，就會(huì)調(diào)用一次這個(gè)方法概耻，里面的wx.login接口，這是小程序官方提供的登錄接口罐呼，會(huì)生成一個(gè)code鞠柄，即登錄憑證，這個(gè)是我們與用戶建立聯(lián)系的銜接弄贿。我們把這個(gè)code存起來(lái)春锋，存到globalData里面，方便我們?cè)诘卿涰?yè)面的邏輯里使用差凹。
下面我們看看login.js邏輯層期奔。
var app = getApp()
Page({
data: {
//判斷小程序的API，回調(diào)危尿，參數(shù)呐萌，組件等是否在當(dāng)前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo'),
inviterId: "",
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function(options) {
var inviterId = options.inviterId
if (inviterId == undefined) {
inviterId = ''
}
this.setData({
inviterId: inviterId
})
//授權(quán)
var that = this;
// 獲取存儲(chǔ)的unionid
var unionid = wx.getStorageSync('unionid')
if (unionid) {
// 根據(jù)unionid獲取信息
wx.request({
url: app.globalData.url + '/wechat/woLogin',
method: 'get',
data: {
unionId: unionid
},
success: function(res) {
if (res.data.return_code == '000000') {
// 把用戶信息存到app.js中
app.globalData.userInfo = res.data.return_data.member
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
}
},
// 授權(quán)點(diǎn)擊按鈕的方法
bindGetUserInfo: function() {
var that = this;
wx.getSetting({
success: res => {
console.log(res)
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)谊娇，可以直接調(diào)用 getUserInfo 獲取頭像昵稱肺孤，不會(huì)彈框
wx.getUserInfo({
success: res => {
var encryptedData = res.encryptedData;
var iv = res.iv
wx.request({
url: app.globalData.url + '/wechat/woAuth',
data: {
code: app.globalData.code,
encryptedData: encryptedData,
iv: iv
},
dataType: 'json',
success(res) {
app.globalData.userInfo = res.data.return_data.member
var unionId = res.data.return_data.unionId
var cookie = res.header["Set-Cookie"]
var memberId = res.data.return_data.member.memberId
that.setData({
memberId: memberId,
})
that.setData({
cookie: cookie,
unionId: unionId
});
// 存儲(chǔ)unionid
wx.setStorageSync('unionid', unionId)
wx.setStorageSync('cookie', cookie);
if (that.data.inviterId) {
wx.navigateTo({
url: '/pages/applyMember/applyMember?inviterId=' + that.data.inviterId,
})
} else {
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
// 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (that.userInfoReadyCallback) {
that.userInfoReadyCallback(res)
}
}
})
} else {
//用戶按了拒絕按鈕
wx.showModal({
title: '警告',
content: '您點(diǎn)擊了拒絕授權(quán)，將無(wú)法進(jìn)入小程序赠堵，請(qǐng)授權(quán)之后再進(jìn)入!!!',
showCancel: false,
confirmText: '返回授權(quán)',
success: function(res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊了“返回授權(quán)”')
}
}
})
}
}
})
},
})
首先是判斷用戶之前是否有授權(quán)過(guò)小渊，如果授權(quán)過(guò)則直接進(jìn)入index頁(yè)面，這里判斷的憑證是unionid茫叭，
// 獲取存儲(chǔ)的unionid
var unionid = wx.getStorageSync('unionid')
如果獲取到了酬屉，則通過(guò)后臺(tái)提供的接口，換取用戶的信息揍愁，注意這個(gè)用戶信息是用戶在這個(gè)小程序平臺(tái)的信息呐萨，與wx.getUserInfo()獲取的用戶信息不一樣，然后把這個(gè)用戶信息存到app.globalData.userInfo里面莽囤。
app.globalData.userInfo = res.data.return_data.member谬擦。
我們?cè)谟脩舻谝淮芜M(jìn)入小程序時(shí)，把這個(gè)unionID存儲(chǔ)起來(lái)朽缎，如果獲取到了惨远，則用戶之前授權(quán)過(guò)，如果沒(méi)有饵沧，則之前沒(méi)有授權(quán)過(guò)锨络。
用戶之前未授權(quán)過(guò)：
用戶點(diǎn)擊button，彈出授權(quán)框狼牺，我們根據(jù)wx.getSetting（）接口判斷用戶是點(diǎn)擊的同意羡儿，還是拒絕，這個(gè)接口返回的數(shù)據(jù)展示給你們看一下:
res.authSetting['scope.userInfo']==true是钥，則用戶點(diǎn)擊同意掠归，否則為拒絕。
用戶點(diǎn)擊同意后悄泥，我們就可以調(diào)用小程序接口
wx.getUserInfo()獲取用戶微信的信息虏冻，包括用戶的昵稱，頭像弹囚，性別厨相，城市等，還有iv,encryptedData鸥鹉。這里我們需要把a(bǔ)pp.js里獲取到的code蛮穿，和這個(gè)接口獲取到的iv,encryptedData通過(guò)后臺(tái)提供的接口傳給后臺(tái)，以獲取unionID和用戶在這個(gè)小程序平臺(tái)的相關(guān)信息毁渗。
獲取到數(shù)據(jù)之后
通過(guò)wx.setStorageSync('unionid', unionId)把unionID存儲(chǔ)起來(lái)
通過(guò)app.globalData.userInfo = res.data.return_data.member践磅。
然后跳轉(zhuǎn)到index首頁(yè)。
至此灸异，我們的登錄就寫完了府适。羔飞。。檐春。逻淌。
————————————————
版權(quán)聲明：本文為CSDN博主「曉鳳鳳」的原創(chuàng)文章
原文鏈接：https://blog.csdn.net/weixin_41726565/java/article/details/83210789
