您现在的位置是: 博客首页 > 前端 前端

uni-app在微信小程序如何获取微信头像和名称

SU博客网 2020-11-12 38浏览 原创

<template>
    <view>
        <view class="tx-w">
            <view class="tx">
                <image class="tx-img" :src="yonghuwx.avatarUrl"></image>
                <view class="zx"></view>
            </view>
            <view class="name">{{yonghuwx.nickName}} </view>
            <view class="name-qm">自然的美好的,你的</view>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                yonghuwx: []
            }
        },
        onLoad(){
            let that = this;
            uni.login({
                provider: 'weixin',
                success: function(loginRes) {
                    // 获取用户信息                
                    uni.getUserInfo({
                        provider: 'weixin',
                        success: function(infoRes) {                
                            that.yonghuwx = infoRes.userInfo
                            console.log(that.yonghuwx)
                        }
                    });
                }
            });
        },
        methods: {
            
        }
    }
</script>

<style>
    .tx-w{
        margin-top:200upx;
    }
    
    .tx{
        text-align:center;
    }
    
    .tx image{
        width:140upx;
        height:140upx;
        border-radius: 50%;
    }
    
    .name{
        text-align:center;
        margin-top:20upx;
    }
    
    .name-qm{
        text-align:center;
        margin-top:20upx;
        font-size:30upx;
    }
</style>

 

写完后就在小程序测试一下,是没问题的

 

点赞 0

发表评论

欢迎您:

我的名片

SU博客网
SU博客网站是一个IT技术分享的网站,也是开发中的一个笔记,遇见每个问题都会记录下来,让大家更轻易的解决问题。

站点信息

  • 网站程序:Java
  • 博客名称:SU博客网
  • 文章统计34
  • 标签总数10
  • 分类总数4
  • 留言数量0

QQ 交流群