微信小程序通过open-data 设置头像 字体样式

微信小程序通过open-data 设置头像 字体样式

 

      微信小程序中，在开发版本和体验版本中，由于无法启动调用用户授权，

无法通过获取用户的信息。

 

为方便开发，需要使用open-data 设置用户头像和用户昵称。

 

实现效果：

 

 

实现代码：

wxml:

<view class='personalinfo' bindtap='topersonalinfo'>



    <!-- <view class='headImg' style='' >




            <open-data  type="userAvatarUrl"></open-data>



    </view> -->



       <open-data style='border-radius:50%;overflow:hidden;display:block;height:15vw;width:15vw;margin-left:5vw' type='userAvatarUrl'></open-data>




    <view class='username'>昵称:<view style='display: inline-block'><open-data type="userNickName"></open-data></view></view> 



    <image class='xiangyou1img' src='../../images/'></image>




</view>

 

wxss:

 



 




.personalinfo{



  width: 100vw;height: 25vw;



  position: relative;border-bottom:1px #cccccc solid;



  display: flex;



  flex-direction: column;



  justify-content: center; 



}



 




.username{



  position: absolute;top: 9vw;left: 25vw;



  color: #959595;



}



 




.xiangyou1img{



  position: absolute;width: 7vw;height: 7vw;top: 9vw;



  right: 6vw;



}