精华内容
下载资源
问答
  • 小程序可以在没有授权时是可以获取微信头像的信息显示的,即通过open-data获取显示,头像的type为userAvatarUrl。//头像显示的写法接下来我们会给头像布局class和mode,那么代码就会变成这样://添加class、mode....

    小程序可以在没有授权时是可以获取微信头像的信息显示的,即通过open-data获取显示,头像的type为userAvatarUrl。

    //头像显示的写法

    接下来我们会给头像加个布局class和mode,那么代码就会变成这样:

    //添加class、mode

    .headView .icon {

    height: 180rpx;

    width: 180rpx;

    border-radius: 50%;

    }

    这是我们会发现我们虽然class里有做圆角,可是没有起作用:

    所以我们得到结论:小程序open-data中的头像,我们是不能对其做圆角之类的处理。

    那么,我们怎样才能做到在没有获取授权时 拿用户头像显示 并做圆角呢?

    目标效果:

    下面就是我的处理方式:

    实现逻辑:头像做绝对布局,并在其上面覆盖一个中间镂空的view设置view的边界足够遮挡住头像非圆形部分,且镂空view边界颜色需要跟周围背景颜色一样,这样就实现了伪圆角。

    实现代码:

    wxss:

    .headView {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 50rpx;

    height: 300rpx;

    width: 750rpx;

    position: relative;

    }

    /**

    *open-data 的头像做不了圆角

    *这里是覆盖一个镂空的view在上面 镂空view的边界做成与周围背景颜色一样 做了伪圆角

    **/

    .headView .icon {

    position: absolute;

    height: 180rpx;

    width: 180rpx;

    border-radius: 50%;

    border: 50rpx solid #f1f1f1;

    }

    wxml:

    这样就大体实现了!

    有些人实现效果可能是这样:

    这种情况要改成跟目标效果一样只需要调整一下view的边界宽度和边界颜色就可以了:

    展开全文
  • 最近准备这样的小程序,挑战一下自己。 分析了一下有几核心功能 1、下部tab导航配合列表,左右上下联动 2、获取头像,第三方头像敏感校验及上传 3、扣素材及CDN加速

    最近准备做一个这样的小程序,挑战一下自己。
    分析了一下有几个核心功能
    1、下部tab导航配合列表,左右上下联动
    2、获取头像,第三方头像敏感校验及上传
    3、扣素材及CDN加速
    在这里插入图片描述

    展开全文
  • 我们现在了一名片小程序,需要的一功能就是,用户在转发分享自己的名片,在微信里显示的小程序缩略图,我们使用的是用户的微信头像,但是发现一问题,就是缩略图一直很模糊。转发出去以后就跟打了马赛克...

      在开发小程序的时候,大家肯定有做过自定义转发分享图片的。我们现在做了一个名片小程序,需要做的一个功能就是,用户在转发分享自己的名片,在微信里显示的小程序缩略图,我们使用的是用户的微信头像,但是发现一个问题,就是缩略图一直很模糊。转发出去以后就跟打了马赛克一样。为什么会这样?能获取更大的图片吗? 能否获取到用户的头像大图呢?

     我们来看看微信的API接口文档是怎么说的。

     下面这个是微信官方的代码,使用这个来获取用户的头像的 

    Page({
      data: {
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      onLoad: function() {
        // 查看是否授权
        wx.getSetting({
          success: function(res){
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success: function(res) {
                  console.log(res.userInfo)
                }
              })
            }
          }
        })
      },
      bindGetUserInfo: function(e) {
        console.log(e.detail.userInfo)
      }


    获取到了以后,头像默认是132*132,这张图片用来做自定义转发分享图片,分享出去以后图片就明显变模糊了。所以我们就要调整代码了。

     

    userInfo参数说明:

    avatarUrl String 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表132*132正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。

       这段话要仔细看,没仔细看,还真不知道微信官方说的是什么意思。尤其是他说0代表132*132,这套路太深了。

      由于没找到微信的demo头像,又为了不侵犯别人的肖像,那么就只能牺牲下自己的色相了,好吧就用我的头像了,看到没有,这张图片点击以后,图片模糊,如果作为分享图,分享出去一定也是模糊的。顾客一定臭骂你一顿,game over了 

      见证奇迹的时刻来了,怎么获取用户的大图呢?最后这个尾数132,你直接替换为0就可以了,仔细看好了

    https://wx.qlogo.cn/mmopen/vi_32/wibq8B2t2y4Hx6d60nhskKWv4Vuhk2YWou2xFQArWbuoS3tdwF1jAaicwtLjiasSLEtOsibfuE6ickevcpepgqYh1lw/132

     

    如下,这个地址的最后尾数132被替换为0,就自动获取大图了。

    https://wx.qlogo.cn/mmopen/vi_32/wibq8B2t2y4Hx6d60nhskKWv4Vuhk2YWou2xFQArWbuoS3tdwF1jAaicwtLjiasSLEtOsibfuE6ickevcpepgqYh1lw/0

     然后将这个图片放入到下面代码里,做小程序的自定义转发分享缩略图即可。

    Page({
      onShareAppMessage: function (res) {
        if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return {
          title: '自定义转发标题',
          path: '/page/xinweiyun/com/user?id=888',
        imageUrl:'这里输入头像的地址就可以了'
    } } })

      注意的是,在用户获取授权的时候,如果不是有特殊需要,直接使用132的头像大小是足够的,你需要高清大图的时候,再将132换为0即可

      好了,今天就给大家分享到这里了。我,秋峰,phper、java后端开发,目前自创业,做项目系统开发,后端加小程序前端结合,  今天就给大家分享到这里,希望对大家有所帮助。欢迎交流  大家相互学习 共同提高 我的 微信号:qiufeng2999

     

    转载于:https://www.cnblogs.com/xinweiyun/p/9361095.html

    展开全文
  • 小程序可以在没有授权时是可以获取微信头像的信息显示的,即通过open-data获取显示,头像的type为...所以我们得到结论:小程序open-data中的头像,我们是不能对其圆角之类的处理。 那么,我们怎样才能做到在没...

    小程序可以在没有授权时是可以获取微信头像的信息显示的,即通过open-data获取显示,头像的type为userAvatarUrl。

    接下来我们会给头像加个布局class和mode,那么代码就会变成这样:

    这是我们会发现我们虽然class里有做圆角,可是没有起作用:

    所以我们得到结论:小程序open-data中的头像,我们是不能对其做圆角之类的处理。

    那么,我们怎样才能做到在没有获取授权时 拿用户头像显示 并做圆角呢?

    目标效果:

    下面就是我的处理方式:

    1、 实现逻辑:头像做绝对布局,并在其上面覆盖一个中间镂空的view设置view的边界足够遮挡住头像非圆形部分,且镂空view边界颜色需要跟周围背景颜色一样,这样就实现了伪圆角。

    2、 实现代码:

    //wxss
    .headView {
      display: flex;
      justify-content: center;
      align-items:center;
      margin-top: 50rpx;
      height:300rpx;
      width:750rpx;
      position:relative
      }
    
    /**
    
    *open-data 的头像做不了圆角
    
    *这里是覆盖一个镂空的view在上面 镂空view的边界做成与周围背景颜色一样 做了伪圆角
    
    **/
    .headView .icon {
        position: absolute;
        height: 200rpx;
        width: 200rpx;
        border-radius: 50%;
        border: 50rpx solid #f1f1f1;
    }
    //wxml
    <view class='headView'>
       <open-data class='icon' mode="aspectFit" type="userAvatarUrl"></open-data>
    <view class='icon'></view>
    </view>

    这样就大体实现了!

    展开全文
  • 因为迎近国庆,腾讯新闻出了款微信用户头像框在线生成的h5网页,当天朋友圈被...重点是这款小程序是纯前端开发的(我这里没有用到云开发),毕竟2小时时间,只是着玩一下,万一火了呢,现在我把项目开源,码云地...
  • 突然想到这样一个小程序的原因是受到国庆微信头像生成的影响。本期推文将向大家介绍如何制作一微信头像生成的小程序。效果如下:1、我们首先需要有一个小程序账号,这里申请账号就不再过多介绍,大家直接到官网...
  • 其实这是一简单的问题,用户登录,获取到用户的头像,我没有任何处理,一般需求是圆形头像,于是,写了以下几句比较简单的代码。 wxml: &lt;view class="logo"&gt;&lt;open-data type=...
  • 最近的几个小程序

    2018-09-09 11:00:00
    2018-8月,最近一直在做小程序,前前后后了也有几了,简单整理一下给自己看 仿抖音小程序,视频全屏幕显示,下拉和上滑可以切换视频,右下角的图标有点丑 头像、图片小工具,实现头像变圆、头像加字...
  • 课程说明课程时间:2021年1月-2月课程内容:微信小程序(豆瓣电影+个人简历)作业要求:两个小程序中任选一项完成即可,或者自己别的小程序也可以编程经验:基本不需要,但如果你有基础,那会简单很多课程难度:...
  • 随着互联网信息技术的进步以及较高的买家预期使得电子商务在近年来发展迅速。...巨分子小程序就来给大家说说,自己搭建小程序商城要怎么?1、对商城明确定位在生成小程序之前,先不要着急,仔细思考一下...
  • 近段时间在头条游戏。 但是因为头条授权问题被打回来好几次,因为本地各种手机,各种井软件测试都没问题。 头条审核还是能出现问题,授权之后还是拿不到头像。 不过从这里发现了一问题,明明昵称都获取到...
  • 微信小程序的时候有图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,了一简单的图片裁剪效果 使用方法 项目里面直接放的该功能的文件,将...
  • 这次的项目总共有6个人页面分别是,欢迎页、新闻列表页、详情页、电影首页、列表页、搜索页、详情页,下面按每个页用到哪些小程序api一个总结 欢迎页 整个页面的组成部分就是 一个头像、名字、加一个按钮跳转页面 ...
  • 早就想一期纯文字的头像图片了,但是一直没想好用什么文字,我本人用头像比较喜欢那种简单干净的,所以这第一期的纯文字头像做的也比较简单,既然是简单的,那么字也简单点好了,所以就用了两字的文字。...
  • 微信小程序的时候有图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,了一简单的图片裁剪效果 使用方法 项目里面直接放的该功能的文件,将...
  • 微信小程序剪切头像功能,二维码功能,页面只有一,方便数据处理,并进行了图片压缩转换,最后转为base64,直接post到服务器处理即可 用到的几关键api wx.canvasToTempFilePath wx.chooseImage wx....
  • 最近在微信小程序,遇到这样一难题,绘制一圆形的头像,但是有的图片会因为宽度大于高度而致使图片在圆形区域内显示不全,为解决这问题,我采用了以下办法,现贴出代码共享给大家,大家如果有更好的解决方案...
  • 可以直接到example目录下 把we-cropper文件夹直接放在自己的小程序项目中,现在我使用的是照片裁剪上传的功能。 所以需要两页面来共同完成。 A页面 展示修改裁剪后照片的页面,B页面的原来实现裁剪功能的页面。 ...
  • 1.首先将we-cropper框架包添加到自己的小程序项目中,这里我的we-cropper是经过删减的,因为只用到了两文件; 2.新建cropper和upload这两page; cropper页面: upload页面: 3.点击cropper页面中的圆形...
  • 今天了一最基本的微信小程序获取自己头像的方法 open-type用法 关于样式我就没怎么写了,因为自己现在主要在写锻炼自己最基本的逻辑思维 首先我们写HTML文件 <view class="advanter"> <image src='{{...
  • 以前 wx.getUserInfo 会弹出一...1.只展示用户头像昵称 不后台数据库用 Open-data标签 可以不用用户授权直接获得头像和昵称 <open-data type="userAvatarUrl"></open-data> //获取用户头像直接显示在...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 228
精华内容 91
关键字:

做个头像小程序