小程序获取用户信息的两种方法

第一种使用 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.detailthis.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.openidthis.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.detailthis.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 IDconsole.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.openidthis.setData({userid: userid,})},
})

这样我们就完成了！

视频地址
https://www.bilibili.com/video/BV1zY41157mL?share_source=copy_web

小程序获取用户信息的两种方法相关推荐

微信小程序获取用户信息的两种方式
1.只获取头像和昵称(不能将用户信息返回给后端) <open-data class="tx" type="userAvatarUrl"></o ...
钉钉小程序获取用户信息
钉钉小程序获取用户信息 1.钉钉小程序只允许开发办公类的程序,不能开发娱乐型的程序. 2.钉钉小程序审核需要产品说明书,最大大小不能超过30M(文档). 3.貌似可以用IP,暂时没有看到有关https ...
支付宝小程序获取用户信息及手机号
支付宝小程序获取用户信息及手机号众所周知,微信小程序是可以通过微信本身授权后再登录,平台可以拿到微信用的的账号相关信息,然后保存到数据库中,那么同理在支付宝小程序开发过程中,登录功能的设计也可以如此 ...
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...
小程序获取用户信息无法得到问题
小程序获取用户信息无法得到问题 1.前言因为小程序是由js代码编写的,我js学得不是特别的好,所以,刚开始以为js跟java一行,一行一行的执行,后面才发现,完全不是,所以有时候,我们在获取用户信息 ...
小程序获取用户信息
小程序获取用户信息 1.先判断是否授权 wx.getSetting({ success: (data) => { console.log(data); if (data.authSetting[ ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...
微信小程序获取用户信息
微信小程序获取用户信息微信小程序获取用户信息接口做了调整: 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像.昵称.性别与地区),将直接获 ...
微信小程序获取用户信息-头像、昵称......
微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权目录微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 1.wx.getUserProfile文档 2.代码演示 3.演示过程(图示) ...

小程序获取用户信息的两种方法

小程序获取用户信息的两种方法

第一种使用 getUserProfile

代码示例

第二种使用头像昵称填写

小程序获取用户信息的两种方法相关推荐

最新文章

热门文章

小程序获取用户信息的两种方法

小程序获取用户信息的两种方法

第一种使用 getUserProfile

代码示例

第二种使用 头像昵称填写

小程序获取用户信息的两种方法相关推荐

最新文章

热门文章

第二种使用头像昵称填写