最近做了一个小程序项目，来这记录一下，加深一下我自己的记忆，当然，如果能帮到其他同僚，我也是很开心的。
我们的项目是单独一个授权页面，通过点击授权按钮触发授权登陆事件。
首先说一下项目登陆过程的流程：
1.用户第一次进小程序，即之前没有授权过。首先就弹出授权登陆页面。用户点击同意后，跳到首页，如果用户点击拒绝，则再次引导用户同意授权。
2.用户之前授权登陆过，直接进入小程序首页。
login.wxml
<view wx:if="{{canIUse}}">
<view class='header'>
<image src='/images/arise.png'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:else>请升级微信版本</view>
小程序的官方文档修改了。必须要使用<botton open-type='getUserInfo'></button>引导用户授权。同时在button上绑定事件bindgetuserinfo。
页面上面的wx:if和wx:else，我相信这个大家都明白的，就是小程序的条件式渲染。
app.js
//app.js
App({
globalData: {
userInfo: null,
url: 'https://mop.licltech.cn/crest',
code: ''
},
onLaunch: function () {
// 展示本地存储能力
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里面，有一个onlaunch方法，当用户进入小程序的时候，就会调用一次这个方法，里面的wx.login接口，这是小程序官方提供的登录接口，会生成一个code，即登录凭证，这个是我们与用户建立联系的衔接。我们把这个code存起来，存到globalData里面，方便我们在登录页面的逻辑里使用。
这个页面的其他代码，看不懂的不要纠结哈，后面我们在解释。。。
下面我们看看login.js逻辑层。
var app = getApp()
Page({
data: {
//判断小程序的API，回调，参数，组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo'),
inviterId: "",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var inviterId = options.inviterId
if (inviterId == undefined) {
inviterId = ''
}
this.setData({
inviterId: inviterId
})
//授权
var that = this;
// 获取存储的unionid
var unionid = wx.getStorageSync('unionid')
if (unionid) {
// 根据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',
})
}
}
})
}
},
// 授权点击按钮的方法
bindGetUserInfo: function() {
var that = this;
wx.getSetting({
success: res => {
console.log(res)
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
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
});
// 存储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 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (that.userInfoReadyCallback) {
that.userInfoReadyCallback(res)
}
}
})
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
if (res.confirm) {
console.log('用户点击了“返回授权”')
}
}
})
}
}
})
},
})首先是判断用户之前是否有授权过，如果授权过则直接进入index页面，这里判断的凭证是unionid，
// 获取存储的unionid
var unionid = wx.getStorageSync('unionid')
如果获取到了，则通过后台提供的接口，换取用户的信息，注意这个用户信息是用户在这个小程序平台的信息，与wx.getUserInfo()获取的用户信息不一样，然后把这个用户信息存到app.globalData.userInfo里面。
app.globalData.userInfo = res.data.return_data.member。
我们在用户第一次进入小程序时，把这个unionID存储起来，如果获取到了，则用户之前授权过，如果没有，则之前没有授权过。
用户之前未授权过：
用户点击button，弹出授权框，我们根据wx.getSetting（）接口判断用户是点击的同意，还是拒绝，这个接口返回的数据展示给你们看一下
res.authSetting['scope.userInfo']==true，则用户点击同意，否则为拒绝。
用户点击同意后，我们就可以调用小程序接口
wx.getUserInfo()获取用户微信的信息，包括用户的昵称，头像，性别，城市等，还有iv,encryptedData。这里我们需要把app.js里获取到的code，和这个接口获取到的iv,encryptedData通过后台提供的接口传给后台，以获取unionID和用户在这个小程序平台的相关信息。
我们看一下后台给我们返回的数据
获取到数据之后
通过wx.setStorageSync('unionid', unionId)把unionID存储起来
通过app.globalData.userInfo = res.data.return_data.member。
然后跳转到index首页。
至此，我们的登录就写完了。。。。。