小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)

更新時間：2022年08月22日 10:34:26 作者：LiuNano

小程序獲取用戶信息這部分其實(shí)不難,但是,他有點(diǎn)麻煩,下面這篇文章主要給大家介紹了關(guān)于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

第一種使用 getUserProfile

我們可以查看一下官方文檔 wx.getUserProfile(Object object)，獲取用戶信息。頁面產(chǎn)生點(diǎn)擊事件（例如 button 上 bindtap 的回調(diào)中）后才可調(diào)用，每次請求都會彈出授權(quán)窗口，用戶同意后返回 userInfo。但要注意每次都需要授權(quán)一次是不是很麻煩，我們可以將他保存在我們數(shù)據(jù)庫中授權(quán)一次日后直接調(diào)用。

代碼示例

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像昵稱 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

第二種使用頭像昵稱填寫

當(dāng)小程序需要讓用戶完善個人資料時，可以通過微信提供的頭像昵稱填寫能力快速完善。

頭像選擇

需要將 button 組件 open-type 的值設(shè)置為 chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調(diào)獲取到獲取到頭像信息的臨時路徑。

昵稱填寫

需要將 input 組件 type 的值設(shè)置為 nickname，當(dāng)用戶在此input進(jìn)行輸入時，鍵盤上方會展示微信昵稱。

然后我們將他存到數(shù)據(jù)庫，日后直接調(diào)用即可！

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="請輸入昵稱"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

接下來我們要將值進(jìn)行存儲，并上傳數(shù)據(jù)庫。我們使用form將數(shù)據(jù)保存到data里面。

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button>
<form catchsubmit="formSubmit">
  <view class="row">
    <view class="text1">名稱：</view>
    <input type="nickname" class="weui-input" name="input" placeholder="請輸入昵稱" />
  </view>
  <button type="primary" style="margin-top:40rpx;margin-bottom:20rpx" formType="submit">提交</button>
</form>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    name: '',
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl,
    })
  },
  formSubmit(e) {
    console.log(e.detail.value.input)
    this.setData({
      name: e.detail.value.input
    })
   }
 })

這樣我們點(diǎn)擊提交時候發(fā)現(xiàn)值保存data里面了，接下來我們獲取openid,可以參考之前視頻哦！這里默認(rèn)已經(jīng)將openid保存到app.js里面了！

onLoad: function (options) {
    const app = getApp()
    var userid = app.globalData.openid
    this.setData({
      userid: userid,
    })
  },

接下來我們上傳圖片到云開發(fā)，然后存到數(shù)據(jù)庫中，這里在cms創(chuàng)建內(nèi)容模型。

// pages/getuser/getuser.js
const db = wx.cloud.database()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    name: '',
    userid: '
',
    userphoto: '
',
    imgrl: '
'
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl,
    })
  },
  formSubmit(e) {
    console.log(e.detail.value.input)
    this.setData({
      name: e.detail.value.input
    })
    var that = this;
        wx.cloud.uploadFile({
          cloudPath: (new Date()).valueOf() + '.png', // 文件名
          filePath: this.data.avatarUrl, // 文件路徑
          success: res => {
            // get resource ID
            console.log(res.fileID)
            // 賦值圖片
            that.setData({
              imgrl: res.fileID
            })
            that.upload(res.fileID);
          },
          fail: err => {
            // handle error
          }
        })
  },
  upload(filepath){
    console.log(filepath)
    db.collection("user").add({
      data: {
          name:this.data.name,
          openid:this.data.userid,
          userphoto:filepath,
          _createTime: Date.parse(new Date()),
      }
  }).then(res => {
      wx.showToast({
          title: '添加成功',
          icon: 'success',
          duration: 2000
      })
  })
  },
  /** 
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    const app = getApp()
    var userid = app.globalData.openid
    this.setData({
      userid: userid,
    })
  },
})

這樣我們就完成了！