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

一.获取头像

1.将button组件open-type的值设置为chooseAvatar

2.通过bindchooseavatar事件回调获取到头像信息的临时路径

wxml文件代码:

复制代码
<view>
<button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseavatar">
<image src="{{ avatar_url }}" class="avatar"/>
</button>
</view>

js文件代码:

复制代码
  data:{
    avatar_url : "../../assets/Jerry.png"
  },

  chooseavatar(event){
    console.log(event.detail.avatarUrl)
    const {avatarUrl} = event.detail
    this.setData({
      avatar_url: avatarUrl
    })
  }

二.获取昵称

1.通过form组件包裹input组件和form-type为submit的button组件

2.input组件的type值为nickname,当用户输入时候自动带出微信昵称。name属性设置为nickname会在表单提交时候获取值

3.给form的bindsubmit="onSubmit"绑定事件,在事件处理函数中获取昵称

wxml代码:

复制代码
<form bindsubmit="onSubmit" >
<!-- type属性设置为nickname,输入框显示nickname值-->
<!-- 添加name属性,方便表单获取 -->
<input type="nickname" name="nickname" />
<!-- form-type属性设置为submit,会触发表单的提交事件 -->
<button type="primary" plain="true" form-type="submit">
点击获取昵称
</button>
</form>

js代码:

复制代码
  onSubmit(event){
    const nickname = event.detail.value.nickname
    console.log(nickname)
  }

event结构:

相关推荐
海阔天空66883 小时前
微信小程序添加水印功能
微信小程序·canvas·水印
流***陌3 小时前
淘宝一番赏抽赏小程序:开启趣味抽赏新体验
小程序
说私域3 小时前
开源链动2+1模式AI智能名片S2B2C商城小程序在竞争激烈的中低端面膜服装行业中的应用与策略
大数据·人工智能·小程序
_AaronWong4 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
陈陈小白5 小时前
小程序如何接入火山引擎埋点数据
小程序·火山引擎
星光一影5 小时前
Java版小区物业管理系统/业主端/物业端/管理端/支持公众号、小程序、app
java·大数据·小程序
2501_9159090612 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师17 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
00后程序员张19 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
会点法律的程序员1 天前
小程序 地理位置授权怎么搞
前端·小程序·uni-app