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

一.获取头像

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.detailthis.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.nicknameconsole.log(nickname)}

event结构：