基于云开发的答题活动小程序v2.0-实现微信授权登录功能 _云开发

世事洞明皆学问，人情练达即文章。这篇文章主要讲述基于云开发的答题活动小程序v2.0-实现微信授权登录功能相关的知识，希望能为你提供帮助。
项目技术栈微信原生小程序+云开发。为什么选择微信原生小程序进行开发呢？因为能够直接应用它的云开发能力吖。

【基于云开发的答题活动小程序v2.0-实现微信授权登录功能】我这里主要使用了云开发能力中的小程序端SDK，说白了就是在javascript中就能直接操作数据库。

本篇前言基于云开发的答题活动小程序v2.0的源码地址，以及手把手教你搭建答题活动小程序v1.0系列文章目录，均在【????基于云开发的答题活动小程序v2.0，终于赶在11月最后一天完成了??】这篇文章的底部。

想必大家有个疑问，在上一篇，【基于云开发的答题活动小程序v2.0-首页设计与实现】这篇文章中，为什么我没有把首页的index.js文件的代码贴出来。

相对于长篇累牍的文章，我更倾向于精简的短文。而这里主要是为了单独拎出来，简单地聊聊，为什么要实现微信授权登录？如何去实现这个功能？

微信授权登录为什么要
如果大家看了我前面的文章或者拿到源码运行起来，估计应该看到，有这么一个场景。举个栗子，在排行榜页的时候，其中就需要显示参与答题者的微信头像和昵称。

如何实现
通过上面简单的需求分析，然后这里看看技术可行性吧。通过查阅技术文档，可以知道，官方提供了一个开发接口用以获取用户信息，wx.getUserProfile(Object object)。

它是这样讲的：“页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo”。

我是这样写的代码：
.wxml

< view bindtap="login">
< button class=cu-btn bg-red round block lg margin-top> 获取头像昵称 < /button>
< /view>

当然你也可以这样写，多动手实践实践与多尝试不同的方式。毕竟正确答案不止一个。

< view>
< button class=cu-btn bg-red round block lg margin-top bindtap="login"> 获取头像昵称 < /button>
< /view>

.js

//微信授权登录
login() {
wx.getUserProfile({
desc: 用于完善会员资料,
success: (res) => {
this.setData({
userInfo: res.userInfo
})
}
})
}

运行效果

完整代码首页index.js文件完整代码，如下所示：

const app = getApp()

Page({
data: {
userInfo: {},
hasUserInfo: false
},

onLoad() {

},

//跳转答题页
goToTest() {
wx.navigateTo({
url: ../test/test
})
},
//跳转活动规则页
goToDetails() {
wx.navigateTo({
url: ../details/details
})
},
//跳转答题记录页
goToHistory() {
wx.navigateTo({
url: ../history/history
})
},
//跳转排行榜页
goToRank() {
wx.navigateTo({
url: ../rank/rank
})
},

//微信授权登录
login() {
wx.getUserProfile({
desc: 用于完善会员资料,
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
app.globalData.userInfo = res.userInfo
app.globalData.hasUserInfo = true
}
})
},
//转发分享
onShareAppMessage(res) {
return {
title: @你，快来参与消防安全知识答题活动吧~
}
},
})