关于javascript:基于云开发的答题活动小程序v20实现微信授权登录功能

4次阅读

共计 1646 个字符，预计需要花费 5 分钟才能阅读完成。

微信原生小程序 + 云开发。为什么抉择微信原生小程序进行开发呢？因为可能间接利用它的云开发能力吖。

我这里次要应用了云开发能力中的小程序端 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: '@你，快来参加消防安全常识答题流动吧~'}
  },
})

在微信小程序开发中，实现微信受权登录性能，获取微信头像和昵称的利用场景还是比拟常见的。而我这里次要是用于答题流动中的问题排行榜数据统计与展现，对于经营公众号或者小程序来说还是比拟重要的一环。

正文完