微信小程序如何获取微信昵称和头像

简介: 微信小程序如何获取微信昵称和头像
<open-data type="userAvatarUrl"></open-data>

之前是使用open-data获取微信昵称和头像,但是更新之后,小程序不再支持使用该方法


现在需要用wx.getUserProfile这个API获取用户信息。页面产生点击事件(如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。


官方例子:wx.getUserProfile(Object object) | 微信开放文档 (qq.com)


获取用户信息按官方的来即可。但是在登录小程序获取一次后我们需要把用户信息存起来,不能点击一次获取一次。

文件:

 <button open-type="chooseAvatar" bindchooseavatar="assd">
    <image src="{{image}}" />
  </button>
<form catchsubmit="formSubmit" catchreset="formReset">
    <view class="name">
      <view class="name_text">
        昵称
      </view>
      <view>
        <input class="weui-input" name="input" type="nickname" placeholder="请输入昵称" />
      </view>
    </view>
  <view class="enter">
    <button style="margin: 30rpx 0" type="primary" formType="submit">登录</button>
  </view>
</form>

wxss文件:

.button {
  width: 100%;
  height: 200px;
}
.button button {
  width: 25%;
  height: 100px;
  margin-top: 50px;
  background-color: #ffffff;
}
.button image {
  width: 150%;
  height: 100%;
}
.name {
  width: 100%;
  height: 50px;
  border: 1px solid #cecccc;
  display: flex;
}
.name_text {
  width: 20%;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
}
.name input {
  width: 80%;
  height: 50px;
}
.enter {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

js文件:

这是写一个默认的灰色头像

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
 data: {
    image: defaultAvatarUrl
  },
})

我们需要点击按钮获取到用户头像,然后把图片存储到本地 wx.setStorageSync() 方法使用

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  data: {
    image: defaultAvatarUrl
  },
//用户头像
  assd: function (e) {
    console.log(e.detail.avatarUrl);
    let headimg =e.detail.avatarUrl
    // 存储用户头像
    wx.setStorageSync('headimg', headimg)
    this.setData({
      image: e.detail.avatarUrl
    })
  },
//用户名
  formSubmit(e) {
    let nickname=e.detail.value.input
    // 存储用户名称
    wx.setStorageSync('nickname', nickname)
  },
})

如何获取缓存数据:使用 wx.getStorageSync() 这个方法就可以获取本地数据

其他页面js:

Page({
  data: {
    scrollTop: true
  },
onShow: function () {
     let img = wx.getStorageSync('headimg')
     let name = wx.getStorageSync('nickname')
    }
})
相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
729 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
764 1
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
63 1
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
89 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
260 1
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1108 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
503 0
|
2月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
681 0
|
3月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
154 7