阿里 网站建设方案书 模板,中国陕西省住房城乡建设厅官网,新闻联播直播 今天,layui加入wordpress个人博客
微信小程序获取用户信息
个人微信公众号#xff0c;求关注#xff0c;求收藏#xff0c;求指错。
文章概叙
本文主要讲的是小程序获取用户信息的#xff0c;更新测试时间是2023-10-25
更改原因
首先#xff0c;官网上的解释是这样的#xff0c;为了安全合…个人博客
微信小程序获取用户信息
个人微信公众号求关注求收藏求指错。
文章概叙
本文主要讲的是小程序获取用户信息的更新测试时间是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 classuserprofile_container data-weui-theme{{theme}}mp-toptips msg{{error}} typeerror show{{error}}/mp-toptipsbutton classavatar-wrapper open-typechooseAvatar bind:chooseavataronChooseAvatarimage classavatar src{{avatarUrl}}/image/buttonform idform bindsubmitsaveUserInfoinput typenickname classsingle_input namenickName placeholder请输入昵称 /button classweui-btn btn typeprimary form-typesubmit确认/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到中间的按钮获取再到现在感觉一改再改…真的是学习永无止境…
