login.wxml 页面
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view class="userinfo-info" wx:else>
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<view class="userinfo-nickname">{{userInfo.nickName}}</view>
</view>
</view>
login.js 页面
var app = getApp()
var userInfo = null;
Page({
user:[],
data: {
userInfo: {},
hasUserInfo: false, //定义对用户数据信息的显示隐藏
canIUse: wx.canIUse('button.open-type.getUserInfo'), // 是否允许授权
openid:'', // 定义用户openid 每一个微信用户在微信小程序中是以openid作为唯一标识符的
},
onLoad: function () {
// 获取云服务失败
if(!wx.cloud){
console.log("获取云服务器失败");
}
// 获取用户信息
var that =this
wx.getSetting({
success(res){
if(res.authSetting['scope.userInfo']){
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
// 页面加载自动获取用户数据
success(res){
console.log('得到的用户信息' ,res.userInfo);
that.setData({
userInfo:res.userInfo,
hasUserInfo: true
})
}
})
//获取授权成功后 自动获取openid
wx.cloud.callFunction({// 调用云函数
name: 'login',
data:{},
success(res){
console.log(res);
app.globalData.openid =res.result.openid // 将openid存入数据中
console.log(app.globalData.openid);
}
})
}
}
})
},
// 获取用户数据的button 点击事件
getUserInfo: function (e) {
console.log(e)
if(!this.data.hasUserInfo&& e.detail.userInfo){
// 判断是否同意获取授权
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
//获取授权成功后 自动获取openid
wx.cloud.callFunction({// 调用云函数
name: 'login',
data:{},
success(res){
console.log(res);
app.globalData.openid =res.result.openid
console.log(app.globalData.openid);
}
})
}
},
这里的服务器 我用的是 微信小程序的云服务器 自带的login 云函数
// 云函数模板
// 部署:在 cloud-functions/login 文件夹右击选择 “上传并部署”
const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init({
// API 调用都保持和云函数当前所在环境一致
env: cloud.DYNAMIC_CURRENT_ENV
})
/**
* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
*
* event 参数包含小程序端调用传入的 data
*
*/
exports.main = async (event, context) => {
console.log('服务端打印的event',event)
console.log('服务端打印的context',context)
// 可执行其他自定义逻辑
// console.log 的内容可以在云开发云函数调用日志查看
// 获取 WX Context (微信调用上下文),包括 OPENID、APPID、及 UNIONID(需满足 UNIONID 获取条件)等信息
const wxContext = cloud.getWXContext()
console.log('getWXContext返回的结果',wxContext);
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
env: wxContext.ENV,
}
}