当前位置：首页 > news >正文

云南网网站常州网站建设方案托管

news 2025/9/16 9:52:44

云南网网站,常州网站建设方案托管,网站模板带数据库,大型网站架设需要考虑哪些问题个人博客微信小程序获取用户信息个人微信公众号，求关注，求收藏，求指错。文章概叙本文主要讲的是小程序获取用户信息的，更新测试时间是2023-10-25 更改原因首先，官网上的解释是这样的，为了安全合…

个人博客

微信小程序获取用户信息

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

文章概叙

本文主要讲的是小程序获取用户信息的，更新测试时间是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}