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

简介: 微信小程序如何获取微信昵称和头像
<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')
    }
})
相关文章
|
4月前
|
小程序
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
39 0
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
502 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
3月前
|
移动开发 小程序 前端开发
|
3月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
3月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
3月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
3月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
4月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
111 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
4月前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
77 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)

热门文章

最新文章