小程序获取用户信息的两种方法详解(getUserProfile和头像昵称填写)

小程序获取用户信息的两种方法包括getUserProfile和头像昵称填写。下面将详细讲解这两种方法的使用攻略和示例说明。

getUserProfile方法详解

什么是getUserProfile？

getUserProfile是一种小程序的API，可以获取到用户的个人信息，包括昵称、头像、性别等。

如何使用getUserProfile？

getUserProfile的使用需要在app.js中添加以下代码：

App({
  getUserProfile: function(callback){
    wx.getUserProfile({
      desc: '用于完善个人资料',
      success: res => {
        callback(res.userInfo)
      }
    })
  }
})

接着在page页面的js文件中，需要先调用app.js中的getuserProfile方法获取用户信息：

const app = getApp()

Page({
  data: {
    userInfo: {}
  },
  onLoad: function () {
    app.getUserProfile(userInfo => {
      this.setData({
        userInfo: userInfo
      })
    })
  }
})

然后在Wxml文件中展示用户信息：

<image src="{{userInfo.avatarUrl}}" />
<text>{{userInfo.nickName}}</text>

getUserProfile的例子

下面是一个通过getUserProfile获取用户信息并显示头像和昵称的示例：

// app.js文件中添加
App({
  getUserProfile: function(callback){
    wx.getUserProfile({
      desc: '用于完善个人资料',
      success: res => {
        callback(res.userInfo)
      }
    })
  }
})

// page页面的js文件中
const app = getApp()

Page({
  data: {
    userInfo: {}
  },
  onLoad: function () {
    app.getUserProfile(userInfo => {
      this.setData({
        userInfo: userInfo
      })
    })
  }
})

<!-- Wxml文件中 -->
<image src="{{userInfo.avatarUrl}}" />
<text>{{userInfo.nickName}}</text>

头像昵称填写方法详解

什么是头像昵称填写方法？

头像昵称填写方法是一种通过小程序中的表单来获取用户信息，包括头像、昵称、性别等。

如何使用头像昵称填写方法？

通过Wxml表单的方式，可以快速地完成头像、昵称、性别等用户信息的填写。例如：

<!-- Wxml文件中 -->
<form bindsubmit="submitUserInfo">
  <div>
    <label for="nickname">昵称:</label>
    <input type="text" name="nickname" id="nickname" placeholder="请输入昵称" />
  </div>

  <div>
    <label for="avatar">头像:</label>
    <button type="button" onclick="chooseImage">点击上传</button>
  </div>

  <input type="radio" name="gender" value="0" checked />男
  <input type="radio" name="gender" value="1" />女

  <button type="submit">提交</button>
</form>

接着在js文件中，可以通过wx.uploadFile上传用户选择的头像：

// page页面的js文件中
Page({
  data: {
    avatarUrl: ''
  },
  chooseImage: function() {
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        wx.uploadFile({
          url: 'http://localhost', // 上传图片的url
          filePath: res.tempFilePaths[0],
          name: 'avatar',
          success: function (res) {
            that.setData({
              avatarUrl: res.data
            })
          }
        })
      }
    })
  },
  submitUserInfo: function (e) {
    console.log(e.detail.value)
  }
})

最后在submitUserInfo方法中可以将用户填写的数据提交给后端进行保存或处理。

头像昵称填写方法的例子

下面是一个通过头像昵称填写方法获取用户信息并显示头像和昵称的示例：

<!-- Wxml文件中 -->
<form bindsubmit="submitUserInfo">
  <div>
    <label for="nickname">昵称:</label>
    <input type="text" name="nickname" id="nickname" placeholder="请输入昵称" />
  </div>

  <div>
    <label for="avatar">头像:</label>
    <button type="button" onclick="chooseImage">点击上传</button>
  </div>

  <input type="radio" name="gender" value="0" checked />男
  <input type="radio" name="gender" value="1" />女

  <button type="submit">提交</button>
</form>

// page页面的js文件中
Page({
  data: {
    avatarUrl: ''
  },
  chooseImage: function() {
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        wx.uploadFile({
          url: 'http://localhost', // 上传图片的url
          filePath: res.tempFilePaths[0],
          name: 'avatar',
          success: function (res) {
            that.setData({
              avatarUrl: res.data
            })
          }
        })
      }
    })
  },
  submitUserInfo: function (e) {
    console.log(e.detail.value)
  }
})