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

2023-11-14

<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')

    }


})

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序如何获取微信昵称和头像 的相关文章

  • 春招,进阿里了....

    个人背景是东北某 985 科班本硕 做的 测试开发 有两个自己写的小项目 下面是一些印象比较深刻的面试题 阿里一面 什么是软件测试 软件测试过程中会面向哪些群体 开发一个软件都要经过哪些阶段 什么是黑盒测试 什么是白盒测试 一个测试工程师应
  • 招聘小程序制作:连接人才与企业

    随着人才市场的竞争日益激烈 招聘小程序成为了企业寻找优秀人才和求职者找到理想工作的重要工具 通过招聘小程序 企业可以发布招聘信息 筛选简历 而求职者可以浏览职位 提交简历等 招聘小程序的好处 精准匹配人才 招聘小程序通过智能推荐算法分析求职
  • 2018最新area.json(智行火车票)

    ids 5876 level 1 level4Useing name 广东省 names 广东省 notvalid pid 0 tid 5876 ids 5876 6131 level 2 level4Useing name 东莞市 nam
  • SpringBoot中搭建thymeleaf网页遇到Cannot resolve MVC View ‘###‘的问题

    原因是配置文件pom xml中thymeleaf版本与springBoot版本有冲突 要引入的thymeleaf依赖是这个
  • 使用Redis存储和使用地理空间数据

    目录 让我们回到地理空间数据 什么是Geohash Redis如何存储地理空间数据 用于处理地理空间数据的命令 通过地理空间数据读取和搜索呢 结论 众所周知 处理地理空间数据非常困难 因为纬度和经度是浮点数 应该非常精确 此外 纬度和经度似
  • 基层技术管理工作思考?

    从动机和方法两方面谈谈我的看法 动机 要做好基层技术管理工作 首先要确保自己有良好的动机 即明白自己为何要走上技术管理岗位 做管理的根本是为了获得权力 但获得权力的动机却存在很大的差别 第一种单纯是为了利己 有相当数量的人往技术管理岗位 挤
  • Electron-vue脚手架改造vue项目(2018.11.13更新)

    文章中涉及vue项目都是基于vu cli快速构建 展示的目录结构是vue cli快速构建之后的目录 Electron vue也是基于vue cli的脚手架工具 小伙伴们自己构建的vue项目想要改造成桌面应用 还请移步 Electron将We

随机推荐

  • 《大型网站技术架构》第二篇 架构-高可用

    高可用在公司中的重要性 对公司而言 可用性关系网站的生死存亡 对个人而言 可用性关系到自己的绩效升迁 工程师对架构做了许多优化 对代码做了很多重构 对性能 扩展性 伸缩性做了很多改善 但别人未必能直观地感受到 也许你的直接领导都不知道你做的
  • GPS采集设备命令

    经纬度简介 经度 具体来说就是地球上一个地点距离一根被称为本初子午线的南北方向走线以东或以西的度数 按国际规定英国首都伦敦格林尼治天文台原址的那一条经线定为0 经线 从0 经线算起 向东 向西各分作180 以东的180 属于东经 用 E 作
  • cURL简单使用、libcurl编程, curl_easy_setopt

    更多关于curl的信息可以参考官网http curl haxx se http curl haxx se libcurl c curl easy setopt html CURLcodecurl easy setopt CURL handl
  • Java-集合(LinkedList类)

    简单介绍 1 LinkedList底层实现了双向链表和双端队列特点 2 可以添加任意元素 元素可重复 包括null 3 线程不安全 没有实现同步 底层操作机制 1 LinkedList底层维护了一个双向链表 2 LinkedList中维护了
  • java字符串判空失败

    那你就快放弃使用 equals lkm 或 lkm isEmpty 进行判空吧 最牛逼判空方法 StringUtils isEmpty lkm 判空失败还有一种可能 基本用什么方法判空都会失败 使用String value 进行转换的判空
  • Python调用ImageMagick生成PDF文件缩略图

    使用Python调用ImageMagick生成PDF文件缩略图 Imagemagick使用Ghostscript作为其依赖项之一 以便能够处理和转换PDF相关的图像 准备 安装Ghostscript 网站 安装ImageMagick 网站
  • 计算机上开发和运行应用程序与操作系统无关,计算机期中测验理论部分和答案-C.doc...

    计算机期中测验理论部分和答案 C 一 判断题 共10分 正确填写T 反之填写F 1 Cache和主存储器虽然都是用半导体芯片作为存储介质 但前者使用SRAM 后者使用DRAM 前者比后者的存取速度快 正确答案 T 2 当一个应用程序窗口被最
  • Spring中比较常用的工具类

    清单 1 BeanDefinitionReaderUtils registerBeanDefinition 往spring容器注册一个beanDefinition 2 PropertiesLoaderUtils loadAllPropert
  • timm库(CV利器)的入门教程(1)

    省流 使用timm加载CNN进行图像分类 调整CNN使之更适合你的任务 问 使用timm搭建一个可以使用的CNN或ViT拢共需要几步 答 4步 0 安装 timm 1 import timm 2 创建model 3 运行model 这一节很
  • 二叉搜索树(树状数组)

    计数函数 程序 int lowbit int k return k k 功能 可视为每个节点的编号函数 加和函数 程序 int sum int x int ret 0 while x gt 0 ret c x x lowbit x retu
  • jmeter提取token后只能使用一次的鬼问题

    今天在测试一个内部接口时 需要先登录传入token 按照正常步骤作对应参数化和参数传递 过程略 提取token的方法有很多 这里我是用的是正则表达式 提了就正常用嘛 可发现不管下边添加了多少请求 同一线程组下 永远只有登录请求的下一个可以获
  • linux常用函数和知识点博文合集

    signal SIGCHLD SIG IGN 和signal SIGPIPE SIG IGN 中断产生EINTR错误 linux中sigaction函数详解 标准I O函数库提供了popen函数 它启动另外一个进程去执行一个shell命令行
  • 2023秋招算法题每日学习(4)

    DAY 4 1 AcWing 850 Dijkstra求最短路 ii 考察点 堆优化Dijkstra 求最短路问题 适合于稀疏图 利用邻接表来存储 邻接表不需要对重边做特殊的处理 1 基础知识 时间复杂度分析 堆优化Dijkstra 堆优化
  • JUST技术:利用迁移学习生成新城市的轨迹

    市民的出行轨迹数据无论是对于城市管理 规划 还是商业活动 都是重要的参考信息 然而 获取一个城市的人群轨迹数据却非常困难 在今年4月份召开的国际顶级互联网会议WWW 2020 CCF A类 上 京东城市报告了被会议收录的论文 What is
  • 解决安装强化学习库gymnasium,box2d安装报错的问题

    gymnasium是强化学习的库 比较难安装 一 安装方法 安装Gymnasium 一定要all 这样可以安装所有依赖 pip install gymnasium all pip install gymnasium all 二 报错信息一
  • Docker安装记录

    1 卸载旧版本 yum remove docker docker client docker client latest docker common docker latest docker latest logrotate docker
  • Git版本控制

    Git 版本控制 什么是版本控制 版本控制是一种开发的过程中用于管理我们对文件 目录或工程等内容的修改历史 方便查看更改历史记录 备份以便恢复以前的版本的软件工程技术 实现跨区域多人协同开发 追踪和机载一个或者多个文件的历史记录 组织和保护
  • 成功解决VMware安装操作系统出现分辨率的问题

    文章目录 问题重现 问题原因 问题解决 方法一 拓展 1 电脑分辨率 2 xrandr命令 3 查询后如果没有合适的分辨率解决方案 参考资料 问题重现 如下图 在VMware16上安装ubuntu操作系统的时候 出现分辨率问题 导致底部的按
  • < 面试知识点:什么是 Node.js ?有哪些优缺点?应用场景? >

    文章目录 一 什么是 Node js 二 Node js 有哪些优缺点 三 Node js 能做什么 四 Node js 的 模块系统 五 Node js 应用场景 参考文献 往期内容 一 什么是 Node js Node js 是一个开源
  • 微信小程序如何获取微信昵称和头像