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

Posted on by

相信大傢之前也經常使用open-data獲取用戶的頭像和昵稱吧，但微信的這個改編意味著我們要使用新的方法獲取信息瞭。在討論區引發瞭很大的討論，接下來我們一起嘗試兩種獲取信息的方法。

第一種使用 getUserProfile

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

代碼示例

<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: '用於完善會員資料', // 聲明獲取用戶個人信息後的用途，後續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

第二種使用 頭像昵稱填寫

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

頭像選擇

需要將 button 組件 open-type 的值設置為 chooseAvatar，當用戶選擇需要使用的頭像之後，可以通過 bindchooseavatar 事件回調獲取到獲取到頭像信息的臨時路徑。

昵稱填寫

需要將 input 組件 type 的值設置為 nickname，當用戶在此input進行輸入時，鍵盤上方會展示微信昵稱。

然後我們將他存到數據庫，日後直接調用即可！

<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,
    })
  }
})

接下來我們要將值進行存儲，並上傳數據庫。我們使用form將數據保存到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({
  /**
   * 頁面的初始數據
   */
  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
    })
   }
 })

這樣我們點擊提交時候發現值保存data裡面瞭，接下來我們獲取openid,可以參考之前視頻哦！這裡默認已經將openid保存到app.js裡面瞭！

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

接下來我們上傳圖片到雲開發，然後存到數據庫中，這裡在cms創建內容模型。

// pages/getuser/getuser.js
const db = wx.cloud.database()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  /**
   * 頁面的初始數據
   */
  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
      })
  })
  },
  /** 
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    const app = getApp()
    var userid = app.globalData.openid
    this.setData({
      userid: userid,
    })
  },
})

這樣我們就完成瞭！

總結

到此這篇關於小程序獲取用戶信息的文章就介紹到這瞭,更多相關小程序獲取用戶信息方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：