微信小程序获取用户信息

个人博客

微信小程序获取用户信息

个人微信公众号,求关注,求收藏,求指错。

文章概叙

本文主要讲的是小程序获取用户信息的,更新测试时间是2023-10-25

更改原因

首先,官网上的解释是这样的,为了安全合规,检验用户的微信名称以及用户的头像,所以修改了小程序获取用户基本信息的方式。

根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检测,组件从基础库2.24.4版本起,已接入内容安全服务端接口(mediaCheckAsync、msgSecCheck),以减少内容安全风险对开发者的影响。

获取逻辑

获取用户的微信头像,依旧需要用户手动的触发,所以需要使用Button组件,并设置open-type类型为chooseAvatar,寓意为获取选择头像,接着再绑定我们的chooseavatar事件来获取我们的信息。在我们不知道的地方,发生的事情就是小程序会将用户的头像进行安全检测,如果成功的话就会返回到绑定的chooseavatar事件中,不成功则无法获取。

获取用户的昵称,依旧是需要用户手动的触发,但是不再使用按钮组件,而是使用Input组件,但是需要将Input组件的type设置为nickname,这样子,当onBlur事件触发的时候,我们就可以获取到用户提供给我们的信息,而当我们使用onBlur事件的时候,如果不用表单,很容易跟别的按钮的bindTap事件发生冲突,触发bindTap事件在先,onBlur事件在后,因此就需要再使用一个form表单包裹起来。

接下来,将代码放出来。

代码实例

wxml文件如下

<view class="userprofile_container" data-weui-theme="{{theme}}"><mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips><button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image></button><form id="form" bindsubmit="saveUserInfo"><input type="nickname" class="single_input" name="nickName" placeholder="请输入昵称" /><button class="weui-btn btn" type="primary" form-type="submit">确认</button></form></view>

文章中最主要的两行,分别是第四行到第六行的获取用户头像,第七行到第十行的获取用户的昵称,实现的逻辑在获取逻辑的章节也写清楚了。

index.ts

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({data: {redirectUrl: '',avatarUrl: defaultAvatarUrl,userInfo: {},//用户的信息error: '',rules: [{name: 'nickName',rules: { required: true, message: '请输入昵称' },}],theme: wx.getSystemInfoSync().theme,},formInputChange(e:any) {const { field } = e.currentTarget.datasetthis.setData({[`userInfO.${field}`]: e.detail.value})},onLoad(e) {console.log(e);wx.onThemeChange((result) => {this.setData({theme: result.theme})})},//获取用户的头像onChooseAvatar(e:any) {const { avatarUrl } = e.detailthis.setData({avatarUrl,})},//保存用户信息async saveUserInfo(e: any) {const { nickName } = e.detail.value;const { avatarUrl } = this.data;if (!nickName) {wx.showToast({icon: "none",title: "请输入您的昵称!"})return}if (!avatarUrl) {this.setData({error: '用户头像不能为空'})return}// 保存到app.tsgetApp().globalData.userInfo = { nickName, avatarUrl };//回去来之前的页面if (this.data.redirectUrl.match("mine")) {wx.switchTab({url: this.data.redirectUrl})}wx.redirectTo({url: this.data.redirectUrl})}
})

最主要的代码如下

  //获取用户的头像onChooseAvatar(e:any) {const { avatarUrl } = e.detailthis.setData({avatarUrl,})},

对应的是wxml文件中,获取用户的头像,将用户的头像路径设置在我们的data中,因为返回的是https开头的头像路径,所以不用考虑长度问题。

 async saveUserInfo(e: any) {const { nickName } = e.detail.value;const { avatarUrl } = this.data;if (!nickName) {wx.showToast({icon: "none",title: "请输入您的昵称!"})return}if (!avatarUrl) {this.setData({error: '用户头像不能为空'})return}

而这一段代码,当用户点击了Button的时候,获取到form表单的数据,并且将获取到的头像还有用户昵称做校验。而因为我们是从其他的页面跳转过来的,因此需要跳转回去。

最终效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

吐槽

从18年开始,小程序从一开始的getUserInfo到中间的按钮获取,再到现在,感觉一改再改…真的是学习永无止境…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PAM从入门到精通(二十六)

接前一篇文章&#xff1a;PAM从入门到精通&#xff08;二十五&#xff09; 本文参考&#xff1a; 《The Linux-PAM Application Developers Guide》 先再来重温一下PAM系统架构&#xff1a; 更加形象的形式&#xff1a; 七、PAM-API各函数源码详解 前边的文章讲解了各PAM-API…

【AI视野·今日Robot 机器人论文速览 第五十七期】Wed, 18 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Wed, 18 Oct 2023 Totally 17 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Underwater and Surface Aquatic Locomotion of Soft Biomimetic Robot Based on Bending Rolled Dielectric Elastomer Actua…

No module named ‘cv2’ 解决方法

目录 解决方案1解决方案2 解决方案1 一般情况下的解决方案 在自己的虚拟环境里面安装就行 pip install opencv-python解决方案2 但是我遇到的情况没有这么简单,我使用了pip list | grep open 搜索含有open字样的opencv的包,结果显示已经安装了 我直接进入我的自定义的虚拟…

亚马逊注册账号时老是显示内部错误

最近你们是否遇到注册亚马逊账号时一直遇到"内部错误"的情况&#xff1f;&#xff0c;这可能是由多种原因引起的。以下是一些可能有助于解决这个问题的步骤&#xff1a; 1、清除缓存和Cookie&#xff1a;有时浏览器缓存和Cookie中的问题可能导致网站错误。可以试试清…

如何在Ubuntu下安装RabbitMQ服务并异地远程访问?

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

WeakHashMap 源码解析

目录 一. 前言 二. 源码解析 2.1. 类结构 2.2. 成员变量 2.3. 构造方法 2.4. Entry 2.5. 添加元素 2.6. 扩容 2.7. 删除元素 2.8. 获取元素 一. 前言 WeakHashMap&#xff0c;从名字可以看出它是某种 Map。它的特殊之处在于 WeakHashMap 里的entry可能会被GC自动删除…

新手投资如何分配股票仓位?诺奖得主的秘诀是什么?| 附代码【邢不行】

2023年6月22日&#xff0c;诺贝尔经济学奖得主哈里.马克维茨于美国去世&#xff0c;享年95岁。 作为现代金融先驱者&#xff0c;马科维茨不仅是将数学引入金融的第一人&#xff0c;更用数学解释了分散投资的重要性。 更令人惊叹的是&#xff0c;过去十几年中如果按他的理论在中…

docker部署prometheus+grafana服务器监控(一)

docker-compose 部署prometheusgrafana Prometheus Prometheus 是有 SoundCloud 开发的开源监控系统和时序数据库&#xff0c;基于 Go 语言开发。通过基于 HTTP 的 pull 方式采集时序数据&#xff0c;通过服务发现或静态配置去获取要采集的目标服务器&#xff0c;支持多节点工…

18.2 使用NPCAP库抓取数据包

NPCAP 库是一种用于在Windows平台上进行网络数据包捕获和分析的库。它是WinPcap库的一个分支&#xff0c;由Nmap开发团队开发&#xff0c;并在Nmap软件中使用。与WinPcap一样&#xff0c;NPCAP库提供了一些API&#xff0c;使开发人员可以轻松地在其应用程序中捕获和处理网络数据…

【Redis系列】在Centos7上安装Redis5.0保姆级教程!

哈喽&#xff0c; 大家好&#xff0c;我是小浪。那么最近也是在忙秋招&#xff0c;很长一段时间没有更新文章啦&#xff0c;最近呢也是秋招闲下来&#xff0c;当然秋招结果也不是很理想&#xff0c;嗯……这里就不多说啦&#xff0c;回归正题&#xff0c;从今天开始我们就开始正…

Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (三)

这是继之前文章&#xff1a; Elasticsearch&#xff1a;使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation &#xff08;一&#xff09; Elasticsearch&#xff1a;使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation &#xff08;二&…

配置Sentinel 控制台

1.遇到的问题 服务网关 | RuoYi 最近调试若依的微服务版本需要用到Sentinel这个组件&#xff0c;若依内部继承了这个组件连上即用。 Sentinel是阿里巴巴开源的限流器熔断器&#xff0c;并且带有可视化操作界面。 在日常开发中&#xff0c;限流功能时常被使用&#xff0c;用…

uni-app配置微信开发者工具

一、配置微信开发者工具路径 工具->设置->运行配置->小程序运行配置->微信开发者工具路径 二、微信开发者工具开启服务端口

YB5302是一款工作于2.7V到6.5V的PFM升压型双节锂电池充电控制集成电路

YB5302 锂电输入升压型双节锂电池充电芯片 概述: YB5302是一款工作于2.7V到6.5V的PFM升压型双节锂电池充电控制集成电路。YB5302采用恒流和准恒压模式(Quasi-CVT™)对电池进行充电管理&#xff0c;内部集成有基准电压源&#xff0c;电感电流检测单元&#xff0c;电池电压检测电…

Remote Local File Inclusion (RFI/LFI)-文件包含漏洞

文件包含是一种功能,在各种开发语言中都提供了内置的文件包含函数。在PHP中,例如,可以使用include()和require()函数来引入另一个文件。这个被引入的文件可以当作PHP代码执行,而忽略其后缀本身。 // if( count( $_GET ) ) if( isset( $file ) )include( $file ); else {he…

易点易动固定资产管理系统:高效盘点海量固定资产的得力助手

固定资产是企业重要的财务资源之一&#xff0c;盘点是保证固定资产准确性和完整性的关键环节。然而&#xff0c;对于拥有海量固定资产的企业来说&#xff0c;传统的手工盘点方式效率低下且容易出错。为了解决这一难题&#xff0c;易点易动固定资产管理系统应运而生。本文将深入…

虹科 | 解决方案 | 非道路移动机械诊断方案

虹科Pico汽车示波器为卡车、拖拉机、叉车、船只、联合收割机、挖掘机开发了专用的测试附件和软件测试菜单&#xff0c;比如 24 V 电池、Bosch Denoxtronic、J1939 通信、发动机和液压传动系统以及部件测试等。我们为从事重型车辆和非道路移动机械的维护与诊断的朋友&#xff0c…

Java New对象分配内存流程

一、流程图 二、流程介绍 1、进行逃逸分析&#xff0c;判断是否能够分配到栈上&#xff1a; Y&#xff1a; 如果能分配到栈上&#xff0c;则进行分配。等方法出栈时&#xff0c;对象内存销毁&#xff0c;可有效减少GC的次数。 N&#xff1a;无法分配到栈上&#xff0c;则判断是…

VMware创建Linux虚拟机之(三)Hadoop安装与配置及搭建集群

Hello&#xff0c;world&#xff01; &#x1f412;本篇博客使用到的工具有&#xff1a;VMware16 &#xff0c;Xftp7 若不熟悉操作命令&#xff0c;推荐使用带GUI页面的CentOS7虚拟机 我将使用带GUI页面的虚拟机演示 虚拟机&#xff08;Virtual Machine&#xff09; 指通过…

XTU-OJ 1227-Robot

题目描述 假设在一个XOY坐标的平面上&#xff0c;机器人一开始位于原点&#xff0c;面向Y轴正方向。 机器人可以执行向左转&#xff0c;向右转&#xff0c;向后转&#xff0c;前进四个指令。 指令为 LEFT:向左转RIGHT:向右转BACK:向后转FORWORD n:向前走n(1≤n≤100)个单位 现在…