获取头像
html
<!--pages/my/my.wxml-->
<view>
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
</button>
</view>
ts
// pages/my/my.ts
const defaultAvatarUrl:string = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {
avatarUrl: defaultAvatarUrl,
nickName: '',
},
},
onChooseAvatar(e: any){
const { avatarUrl } = e.detail
console.log(e.detail)
this.setData({
"userInfo.avatarUrl":avatarUrl
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
css
/* pages/my/my.wxss */
.avatar-wrapper{
width: 100rpx;
height: 300rpx;
background: none;
border-radius: 10px;
}
.avatar{
width: 100%;
height: 100%;
border-radius: 10px;
}
获取姓名
html
<input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
ts
onInputChange(e:any){
const nickName = e.detail.value
const { avatarUrl } = this.data.userInfo
this.setData({
"userInfo.nickName":nickName
})
}