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

一.获取头像

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结构:

相关推荐
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang12 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金14 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯15 小时前
小程序自定义组件学习笔记
微信小程序
阿眠17 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor1 天前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序