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

目录
  • 第一种使用 getUserProfile
  • 第二种使用 头像昵称填写
  • 总结

相信大家之前也经常使用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,
    })
  },
})

这样我们就完成了!

总结

到此这篇关于小程序获取用户信息的文章就介绍到这了,更多相关小程序获取用户信息方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • 微信小程序如何同时获取用户信息和用户手机号

    今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号. 1. 当我点击快捷登录的 微信登录时,首先触发的是 微信原生的 获取用户信息userInfo 的方法,再它的 success 回调里面去打开 mask 层..... 2. mask 层里面 有一个按钮,这个按钮是去触发 微信原生的 获取用户手机号的 getPhoneNumber 的方法,接下来就不用我多说了吧.... 直接甩代码 <!--快

  • 微信小程序开发之获取用户信息的两种方法

    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事件 --> <button type="default" bindtap="getUserInfor"> 登录</button> <!-- 展示获取到的用户信息 --> <image src="{{userinfor.avatar

  • 微信小程序如何获取用户信息

    最近在研究微信小程序怎么玩的.接触后发现好多的坑. 比如在浏览器中我们可以通过document.getElementById 获取到页面的DOM对象.而在微信小程序中是获取不到DOM对象的.document.getElementById() 直接报错 getElementById not function 我也是醉了.不支持这个好多有趣的功能不能实现了. 言归正传,我谈下获取用户信息的感想. 有两种获取用户信息的方案. 1.不包含敏感信息openId 的json对象(包含:nickname.av

  • 微信小程序用户信息encryptedData详解

    之前做过一个版本是根据encryptData和Session_key解密得到完整的用户信息(包含union_id)的方法去获取用户信息,由于小程序升级,如今需要废弃encryptData的方式去获取用户信息,改成使用encryptedData的方式获取用户信息. 新的数据解密方法 接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据.开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptedData )进

  • 微信小程序实现授权登录之获取用户信息

    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 登录流程时序 效果展示: 功能实现: 新建一个login页面 login.js: wx.getUserProfile用于获取用户信息 wx.getStorageSync()用于获取缓存,进入小程序时调用 wx.setStorageSync()用于保存缓存,保存登录信息,下次进入小程序自动登录 Page(

  • 微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现

    这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取. index.wxml <!-- 当已经授权的时候 --> <view wx:if="{{result == 'ok'}}" class="result"> <view class="headimg"> <image src="{{avata

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

    目录 第一种使用 getUserProfile 第二种使用 头像昵称填写 总结 相信大家之前也经常使用open-data获取用户的头像和昵称吧,但微信的这个改编意味着我们要使用新的方法获取信息了.在讨论区引发了很大的讨论,接下来我们一起尝试两种获取信息的方法. 第一种使用 getUserProfile 我们可以查看一下官方文档 wx.getUserProfile(Object object),获取用户信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都

  • 微信小程序获取用户信息并保存登录状态详解

    前言 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • Python获取网络时间戳的两种方法详解

    目录 方法一 代码实现 调用方法 返回结果 方法二 代码实现 调用方法 返回结果 在我们进行注册码的有效期验证时,通常使用获取网络时间的方式来进行比对. 以下为获取网络时间的几种方式. 方法一 需要的时间会比较长,个别电脑上可能会出现不兼容现象 代码实现 def get_web_server_time(self, host_URL, year_str='-', time_str=':'): ''' 获取网络时间,需要的时间会比较长,个别电脑上可能会出现不兼容现象 :param host_URL:

  • Thinkphp5微信小程序获取用户信息接口的实例详解

    Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le

  • 微信小程序获取用户信息及手机号(后端TP5.0)

    本文实例为大家分享了微信小程序获取用户信息及手机号的具体代码,供大家参考,具体内容如下 wxml页面 <view wx:if="{{config.tipsshow1}}" class='dialog-container'> <view class='dialog-mask'></view> <view class='dialog-info'> <view class='dialog-title'>login prompt<

  • 对python捕获ctrl+c手工中断程序的两种方法详解

    日常编写调试运行程序过程中,难免需要手动停止,以下两种方法可以捕获ctrl+c立即停止程序 1.使用python的异常KeyboardInterrupt try: while 1: pass except KeyboardInterrupt: pass 2.使用signal模块 def exit(signum, frame): print('You choose to stop me.') exit() signal.signal(signal.SIGINT, exit) signal.sign

  • Python比较两个日期的两种方法详解

    目录 datetime strptime 之前我们曾经分享过:Python获取某一日期是“星期几”的6种方法!实际上,在我们使用Python处理日期/时间的时候,经常会遇到各种各样的问题.今天我们就来探讨另一个问题,如何用Python比较两个日期? datetime 如果需要用Python处理日期和时间,大家肯定会先想到datetime.time.calendar等模块.在这其中,datetime模块主要是用来表示日期时间的,就是我们常说的年月日/时分秒. datetime模块中常用的类: 类名

随机推荐