欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年08月22日 10:34:26   作者：LiuNano  
小程序獲取用戶信息這部分其實不難,但是,他有點麻煩,下面這篇文章主要給大家介紹了關于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

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

第一種使用 getUserProfile

我們可以查看一下官方文檔 wx.getUserProfile(Object object)，獲取用戶信息。頁面產(chǎn)生點擊事件（例如 button 上 bindtap 的回調(diào)中）后才可調(diào)用，每次請求都會彈出授權窗口，用戶同意后返回 userInfo。但要注意每次都需要授權一次是不是很麻煩，我們可以將他保存在我們數(shù)據(jù)庫中授權一次日后直接調(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ù)會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

第二種使用 頭像昵稱填寫

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

頭像選擇

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

昵稱填寫

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

然后我們將他存到數(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,
    })
  }
})

接下來我們要將值進行存儲，并上傳數(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
    })
   }
 })

這樣我們點擊提交時候發(fā)現(xiàn)值保存data里面了，接下來我們獲取openid,可以參考之前視頻哦！這里默認已經(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,
    })
  },
})

這樣我們就完成了！

總結

到此這篇關于小程序獲取用戶信息的文章就介紹到這了,更多相關小程序獲取用戶信息方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論