页面样式想实现点此登录然后弹出授权用户确定后显示用户头像和昵称。

后台实现，用户点击授权后，获取用户信息和openid，去云数据库里找，如果没有就获取用户信息保存。然后再使用openid去查找用户信息，然后再将用户信息存入app.js公共变量里。实现登陆。

// miniprogram/pages/user/user.js

var util = require('../tools/tools.js')

const app = getApp();

const db = wx.cloud.database()

Page({

/**

* 页面的初始数据

*/

data: {

userInfo: '',

logged: ''

},

bindGetUserInfo: function (e) {

var taxt = this;

wx.getSetting({

success: function (e) {

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

// 调用云函数获取openid

wx.showLoading({

title: '登录中...',

})

wx.cloud.callFunction({

// 要调用的云函数名称

name: 'login',

// 传递给云函数的event参数

data: {}

}).then(res => {

//查看用户是否注册过了

db.collection('user').where({

_openid: res.result.openid // 填入当前用户 openid

}).get().then(re => {

if (re.data.length > 0) {

//已经保存过用户信息

} else {

//未保存获取用户信息

wx.getUserInfo({

success: function (r) {

//保存

var DATE = util.formatDate(new Date());

db.collection('user').add({

// data 字段表示需新增的 JSON 数据

data: {

nickName: r.userInfo.nickName,

avatarUrl: r.userInfo.avatarUrl,

gender: r.userInfo.gender,

province: r.userInfo.province,

city: r.userInfo.city,

country: r.userInfo.country,

adddata: DATE,

phone: ''

}

}).then(res => {

console.log(res)

})

.catch(console.error)

}

})

}

db.collection('user').where({

_openid: res.result.openid // 填入当前用户 openid

}).get().then(res => {

app.globalData.userInfo = re.data[0],

app.globalData.userid = re._openid,

app.globalData.logged = true,

wx.setStorageSync('userInfo', app.globalData.userInfo);

})

taxt.setData({

userInfo: app.globalData.userInfo,

logged: app.globalData.logged

})

wx.hideLoading()

})

}).catch(err => {

// handle error

})

} else {

//用户没有授权

console.log("用户没有授权");

}

}

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

})

但是现在写的有点懵，需要点击两次点此登录才能显示头像，而且感觉写的很麻烦。所以想请教各位大大我哪里是有问题的。