微信小程序_自定义头像和昵称

文章目录

背景
效果
用法
- 头像自定义
- 昵称自定义
结束

背景

由于个人小程序获取用户授权getUserProfile的方法已失效，所以采用自定义昵称的方法。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

效果

选择头像

可选择昵称

用法

调用组件封装的方法

头像自定义

按钮嵌套img标签，绑定点击事件

 <button class="avatar-wrapper" style="background: transparent;" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" class="user-image" src="{{userImageUrl}}"></image></button>

事件onChooseAvatar
userImageUrl 保存上传的url

  // 头像选择onChooseAvatar(e) {const { avatarUrl } = e.detailthis.setData({userImageUrl: avatarUrl,})}

昵称自定义

使用nickname的类型

        <view style="width: 50%;text-align: center;"><input type="nickname" class="weui-input" value="{{userName}}" bindinput="bindKeyInput"placeholder-style="color: #07c160" style="width: 100%;border-bottom: 1px solid #ffffff;" placeholder="{{designPlaceholder}}" /></view>

事件

  bindKeyInput(e) {const { value } = e.detailthis.setData({userName: value})},

结束

欢迎进入我的小程序：yma16博客

微信小程序_自定义头像和昵称相关推荐

微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序最新获取头像和昵称的方法直接用！
调整背景微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo,2021年4月5日被废弃,原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝 ...
微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
微信小程序最新获取头像以及昵称方法
微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了. 之前方法代码: <open-data type=&quo ...
修复微信小程序不能获取头像和昵称的bug，微信小程序新版头像昵称API使用
导读: 大厂程序员都是有KPI绩效考核的,所以他们不能闲着,每天要想着怎么优化程序代码.怎么满足奇葩用户的需求,所以苦逼了我们这些小公司程序员,微信一个小小的API接口改动,可能就让一个小公司因此损失 ...
微信小程序—获取用户头像、昵称
博客概要针对使用微信小程序时获取用户头像.昵称的三种方法,做一个简单分享~ 文章目录博客概要 1.wx.getUserInfo接口 2.button触发 3.open-data标签总结 1.wx ...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段个人认为,自定义组件是区分菜鸟与高手的分水岭第一篇先介绍小程序自定义组件的基本使用自定义组件的使用可以分为如下几个步骤创建组件 ...
微信小程序获取用户头像和昵称(填写头像昵称能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
微信小程序获取用户头像和昵称(头像昵称填写能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...

微信小程序_自定义头像和昵称

文章目录

背景

效果

用法

头像自定义

昵称自定义

结束

微信小程序_自定义头像和昵称相关推荐

最新文章

热门文章