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

一.获取头像

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

相关推荐
2501_915918417 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域8 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷8 小时前
第一个小程序
小程序
春哥的研究所8 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld8 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点10 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖14 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发15 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°17 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero18 小时前
微信小程序91~100
微信小程序·小程序