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

项目技术栈

微信原生小程序+云开发。为什么选择微信原生小程序进行开发呢?因为能够直接应用它的云开发能力吖。

我这里主要使用了云开发能力中的小程序端SDK,说白了就是在javascript中就能直接操作数据库。

本篇前言

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

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

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

微信授权登录

为什么要

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

如何实现

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

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

我是这样写的代码:

.wxml

获取头像昵称

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

获取头像昵称

.js

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

运行效果

防火安全知识专项学习与竞答

完整代码

首页index.js文件完整代码,如下所示:

constapp = 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:'@你,快来参与消防安全知识答题活动吧~'}  },})

本篇小结

在微信小程序开发中,实现微信授权登录功能,获取微信头像和昵称的应用场景还是比较常见的。而我这里主要是用于答题活动中的成绩排行榜数据统计与展示,对于运营公众号或者小程序来说还是比较重要的一环。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容