基於雲開發的答題活動小程式v2.0-實現微信授權登入功能

阿新 • • 發佈：2022-12-02

專案技術棧

微信原生小程式+雲開發。為什麼選擇微信原生小程式進行開發呢？因為能夠直接應用它的雲開發能力吖。

我這裡主要使用了雲開發能力中的小程式端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: '@你，快來參與消防安全知識答題活動吧~'
    }
  },
})