小程序微信小程序获取头像呢称2013年最新解决方案（已解决）

Posted 2022-12-31

一、效果

 二、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);


    
)