0
点赞
收藏
分享

微信扫一扫

【小程序】微信小程序获取头像、呢称2013年最新解决方案(已解决)


一、效果

【小程序】微信小程序获取头像、呢称2013年最新解决方案(已解决)_ci

 二、wxml代码

<!-- 点击头像获取头像 -->
<view style="margin-bottom: 20px;text-align: center;">---- 点击头像获取logo ----</view>
<view class="logo">
<button style="width: 100px;height:100px;" class="Logobutton" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="logoImage" src="{{avatarUrl}}"></image>
</button>
</view>

<view style="margin-top: 20px;margin-bottom: 20px;text-align: center;">---- 点击按钮获取logo ----</view>
<view class="logo">
<button class="Logobutton_2" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
点击获取头像
</button>
</view>
<view style="margin-top: 20px;margin-bottom: 20px;text-align: center;">---- 获取logo临时图片地址 ----</view>
<view style="width:100%;height:80px;background-color: rgb(233, 233, 233);">
地址:{{avatarUrl}}
</view>
<!-- 点击获取昵称 -->
<view style="margin-top: 20px;margin-bottom: 20px;text-align: center;">---- 点击获取昵称 ----</view>

<view style="text-align: center;">
<input type="nickname" class="weui-input" placeholder="点击选择昵称" />
</view>

<!-- <view>
<button class="Logobutton" type="nickname">
获取昵称
</button>
</view> -->

三、wxss代码

/* pages/car/car.wxss */
.logo {
/* background-color: rgb(250, 217, 217); */
}

.Logobutton {
border-radius: 10px;
width: 100px;
height:100px;
padding: 0;
}
.logoImage {
height:100%;
width: 100%;
}
.Logobutton_2 {
border-radius: 5px;
width: 1000px;
height: 50px;
background-color: green;
color:white;
line-height: 50px;
padding: 0;
}

.weui-input{
width: 90%;
height: 60px;
margin:20px auto;
background: rgb(236, 236, 236);
border-radius: 5px;
padding-left: 15px;
/* color:red; */
}

四、js代码

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
console.log(avatarUrl);


}
})

举报

相关推荐

0 条评论