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

一.获取头像

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

相关推荐
腾马科技2 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码7 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名10 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风11 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者811 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088911 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌12 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26712 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063214 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆14 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序