从年初开始,打开小程序,工具栏都会弹出这个提醒:

也就是,默认不弹出授权询问框,默认获取不到用户信息(头像、昵称等)!

如果你需要用到这个接口,可以尝试以下方法:

1、用 button 组件,将属性名 open-type 设置为 getUserInfo 类型,来吊起授权窗口,获取用户基本信息,查看 button 文档

<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">授权用户信息</button>

2、直接将,头像和昵称的标签更换成如下,查看 open-data文档

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

此方法注意:

· 设置高宽,需加上:display:block;

· 设置圆角无效:border-radius:50%;  需加上:overflow:hidden

针对属性border-radius:50%,需要配合overflow:hidden来使用,完整代码:

<view class='avatar'><open-data type="userAvatarUrl"></open-data></view>

.avatar{
width: 100rpx;
height: 100rpx;
overflow:hidden;
border-radius: %;
}

3、设置圆角方法:

使用border-radius:50%来设置头像圆角,需要使用clip-path: circle(50rpx at center);进行四周的剪裁,具体代码示例如下:

<view class='avatar'><open-data type="userAvatarUrl"></open-data></view>

.avatar{
width: 100rpx;
height: 100rpx;
clip-path: circle(50rpx at center);
}

注:

1. open-data组件依赖的小程序基础库版本号最低为1.9.90

2. clip-path CSS 属性可以对元素的部分区域进行裁剪(隐藏)。

微信小程序open-data userAvatarUrl圆角显示的更多相关文章

  1. 微信小程序 —— 动态决定页面元素显示或隐藏的技巧

    在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’ ...

  2. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  3. 【微信小程序开发教程】如何显示群名称?

    今年 5 月份的时候,微信宣布:「为了更好的针对群场景提供个性化服务,当用户在群聊中点击小程序分享卡片时,小程序支持开发者获取群 ID 和群名称」.但随后没多久,发现小程序只返回了群 ID,并没有给我 ...

  4. 微信小程序开发——base64位图片显示问题

    前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...

  5. 微信小程序 this.data与this.setData

    一.摘要 小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系 ...

  6. 微信小程序中,如何实现显示,隐藏密码的功能

    最近在搞小程序的开发,遇到隐藏,显示密码的功能的时候,电脑上调试没问题,但是手机上面点击却没有效果,必须要跳转到其他页面再跳回来,才能正常显示. 一时间搞得我很头疼,查找资料后,终于知道了是什么原因. ...

  7. 微信小程序 open-data更改样式 open-data 显示头像 圆形

    废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zh ...

  8. 微信小程序web-view页面安卓下显示空白的解决办法!!!

    web-view页面在你向地址拼接参数展示页面时,在安卓上有时会显示空白 解决方案: A: 普通不需要参数的话可以直接把地址写在src里,不要去在onLoad里获取你的全局变量后再赋值. B: 如果需 ...

  9. 微信小程序 base64格式图片的显示及保存

    当我们拿到如下base64格式的图片(如下图)时, base64格式的图片数据: 如何显示 ? 使用image标签,src属性添加data:image/png;base64, (注意:若imgData ...

  10. 微信小程序swiper使用网络图片不显示问题

    @ wxml代码: <view class="container"> <swiper indicator-dots="true}" autop ...

随机推荐

  1. Linux运维---1.Ceph分布式存储架构及工作原理

    Ceph理论 Ceph 简介 Ceph 是一个开源项目,它提供软件定义的.统一的存储解决方案 .Ceph 是一个具有高性能.高度可伸缩性.可大规模扩展并且无单点故障的分布式存储系统 . Ceph 是软 ...

  2. 如何用Java8 Stream API找到心仪的女朋友

    传统的的Java 集合操作是有些啰嗦的,当我们需要对结合元素进行过滤,排序等操作的时候,通常需要写好几行代码以及定义临时变量. 而Java8 Stream API 可以极大简化这一操作,代码行数少,且 ...

  3. PPT导出为图片

    使用Aspose组件导出 Aspose有Aspose.Slides.dll,可以无需安装office,进行读写PPT文件. Aspose可能通过Aspose.Slides.NET安装 简单的导出图片d ...

  4. 剑指offer-面试题58_2-左旋转字符串-字符串

    /* 题目: 将字符串的前sep个字符转移到字符串尾部. */ /* 思路: 更好的方法: 先翻转前sep个字符,再翻转后面的字符,最后全体翻转. */ #include<iostream> ...

  5. PMP--1. PMBOK框架部分目录

    1.1 PMBOK体系框架描述https://www.cnblogs.com/hemukg/p/11821210.html 1.2 PMBOK指南组成部分https://www.cnblogs.com ...

  6. 8maven配置多个项目之间的依赖

    首先创建两个项目进行测试依赖 创建一个HelloWorld2项目,一个HelloWorld类里面有一个sayHello的方法 然后再创建一个HelloWorldTime项目,一个SayHelloWor ...

  7. 【剑指Offer】05、用两个栈实现队列

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 题解一: //stack2有元素就pop,没有元素就将stack1中所有元素倒进来再pop public ...

  8. 【笔记】机器学习 - 李宏毅 - 7 - Deep Learning

    深度学习发展历史: 感知机和逻辑回归很像,只是没有\(sigmoid\)激活函数. 深度学习训练的三个步骤: Step1:神经网络(Neural network) Step2:模型评估(Goodnes ...

  9. take it away `electron-builder` Electron打包失败的问题

    出现这个问题 出现问题原因是程序占用 , 在后台进程中将Electron的服务干掉以后再打包

  10. 双向队列 SDUT 1466

    题目描述      想想双向链表……双向队列的定义差不多,也就是说一个队列的队尾同时也是队首:两头都可以做出队,入队的操作.现在给你一系列的操作,请输出最后队列的状态:命令格式:LIN X  X表示一 ...