精华内容
下载资源
问答
  • 微信小程序 图片边框问题解决 在最开始对网页进行构建的时候,我们并不知道网站中需要放置那些特定的图片,所以我们往往会放置一个空的img标签,但是这样的话,图片标签因为没有src的值,所以在网站中会显示出来一个...
  • 添加头像框微信小程序 功能 选择当前头像或本地图片进行合成 自动支持任意数量的头像框模版 支持对头像原图进行缩放操作 自定义 修改小程序项目信息 将index.js中const urls中内容替换相框图片的url 将index.wxml中...
  • 微信小程序上传头像后对图片进行裁剪的功能,这是必要的核心代码,放在组件文件夹中就可以使用
  • 给大家带来一款以2022虎年为主的一款头像制作小程序源码 内包含了虎年虎娃,2022元旦新年,国旗,国庆几种分类 每一种分类都包含了多种模板制作 虎娃的小编个人感觉那个卡通也是挺可爱的! 另外整个小程序的...
  • 工具类微信小程序源码,整套源码,可以直接搭建使用。如果会基础的小程序开发,可以进行修改,增删,以及页面的制作学习。
  • 头像加相框微信小程序

    千次阅读 2019-09-16 12:56:55
    微信小程序头像加相框 今天我们要实现一个给头像加相框功能的小程序。 大约分三个步骤 1.在有相框列表的页面上传图片 2.进行裁剪或者旋转功能 这里用到的头像裁剪插件是...

    微信小程序—头像加相框
    今天我们要实现一个给头像加相框功能的小程序。
    大约分三个步骤
    1.在有相框列表的页面上传图片
    2.进行裁剪或者旋转功能
    这里用到的头像裁剪插件是https://github.com/wx-plugin/image-cropper
    3.生成头像保存到本地

    上代码!

    //选择用户自己头像图片
      upload() {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success(res) {
            const src = res.tempFilePaths[0]
            //将选择的图传至cropper页处理
            wx.navigateTo({
              url: `../cropper/cropper?src=${src}`
            })
          }
        })
      }
    

    上传图片拿到图片的路径传到cropper页面去,cropper就是裁剪页面。在这个文件进行裁剪和旋转等方法的编写。
    先把image-cropper文件放到与cropper同目录中,然后在cropper中引入。
    cropper文件
    cropper.json文件中添加image-cropper

    {
      "navigationBarTitleText": "裁剪图片",
        "navigationBarBackgroundColor": "#000",
      "usingComponents": {
        "image-cropper": "../image-cropper/image-cropper"
      }
    }
    

    cropper.wxml

    <image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>
        <view class='bottom'>
            <view bindtap='cancel'>取消</view>
            <view catchtouchstart='rotate' catchtouchend='end' data-type="rotate">旋转</view>
            <view catchtap='confirm'>确定</view>
        </view>
    

    cropper.wxss

    page{
      background:rgb(14, 13, 13);
    }
    .bottom{
      position: absolute;
      width:100%;
      bottom:50rpx;
      display: flex;
      z-index: 10;
      justify-content: space-around;
      color:#fff;
    }
    

    cropper.js

    Page({
      data: {
        src:'',
        width: 300,//宽度
        height: 300,//高度
      },
      onLoad: function (options) {
        this.cropper = this.selectComponent("#image-cropper");
        this.setData({
          src: options.src
        });
      },
      cropperload(e) {
        console.log('cropper加载完成');
      },
      loadimage(e){
        wx.hideLoading();
        this.cropper.imgReset();
      },
      clickcut(e) {
        //图片预览
        wx.previewImage({
          current: e.detail.url, // 当前显示图片的http链接
          urls: [e.detail.url] // 需要预览的图片http链接列表
        })
      },
     
      rotate() {
        //在用户旋转的基础上旋转90°
        this.cropper.setAngle(this.cropper.data.angle += 90);
      },
      end(e) {
        clearInterval(this.data[e.currentTarget.dataset.type]);
      },
      confirm(e){
        this.cropper.getImg(function(e){
          console.log(e)
          let avatar = e.url;
            //获取到裁剪后的图片传到保存页面去
            wx.redirectTo({
              url: `../savePic/savePic?avatar=${avatar}`
            })
        })
      },
      //取消返回上一页面
      cancel(){
        wx.navigateBack({
          url:'../makePic/makePic'
        })
      }
      
    })
    

    savePic–保存图片文件
    savePic.wxml

    <view wx:if="{{layerShow}}" class="maskLayer">
                <view class="layerBox">
                    <view class="layerBoxP">
                        <text>长按头像保存</text>
                    </view>
                </view>
            </view>
    	    <view class="savebg">
    	      <view class="content">
    	        <view class="head_border">
    	          <view>
    	           <canvas canvas-id="myCanvas" class='bger'>
    		       <image class="frame_width" bindlongtap="generate" src="{{bgsrc}}"></image>
    		        <image src="{{src}}" class="avatar"></image></canvas>  
    		            <view style='position:absolute;left:400rpx;'><canvas  canvas-id='ahaucanvas' style='height:840px;width:840px;position:absolute;left:400rpx;'>
    	            </canvas>
    	            </view> 
    	          </view>
    	        </view> 
    	      </view>
      <view class="desc" bindtap='goMakePic'>重新生成</view>
    

    savePic.js

    const app = getApp();   
    Page({
      data: {
        src: '',
        bgsrc: '',
        bgcss: '',
        layerShow:true,
        timer: '',//定时器名字
        countDownNum: '60'//倒计时初始值
      },
      goMakePic(){
        wx.navigateTo({
          url: '/pages/makePic/makePic',
        })
      },
      countdown(){
        let that=this;
        let countDownNum = that.data.countDownNum;
        that.setData({
        timer:setInterval(function(){
          countDownNum--;
          that.setData({
            countDownNum: countDownNum,
            layerShow:false
          })
          if(countDownNum==0){
            clearInterval(that.data.timer)
          }
        },2000)
        })
    
      },
      onLoad(option) {
        var that = this;
        var bgcss = app.globalData.toubgsrc.substr(14, 2);
        //此处的app.globalData.toubgsrc是一个全局变量 在相框列表拿到被选中的相框
        that.setData({
          bgsrc: app.globalData.toubgsrc,
          bgcss: bgcss
        });
      
        let { avatar } = option;
        if (avatar) {
          that.setData({
            src: avatar
          });
        }
      },
      onReady(){
        this.countdown();
      },
      //生成头像
      generate() {
        var self = this;
        var contex = wx.createCanvasContext('ahaucanvas'); 
        var avatarurl_width = 840; //画布宽
        var avatarurl_heigth = 840; //画布高
        contex.drawImage(self.data.src, 127, 127,600,600);
        contex.restore();
        contex.save();
        contex.beginPath(); //开始绘制
        contex.drawImage(self.data.bgsrc, 0, 0, avatarurl_width, avatarurl_heigth); 
        contex.restore();
        contex.draw(true, setTimeout(function () {
          wx.canvasToTempFilePath({ //导出图片
            width: 840,
            height: 840,
            destWidth: 840,
            destHeight: 840,
            canvasId: 'ahaucanvas',
            success: res => {
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function (data) {
                  console.log(data);
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                },
                fail: function (err) {
                  if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                    // console.log("用户拒绝,再次发起授权")
                    wx.openSetting({
                      success(settingdata) {
                        console.log(settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          // console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
                          wx.showToast({
                            title: '请再次保存',
                            icon: 'success',
                            duration: 2000
                          })
                        } 
                      }
                    })
                  }
                }
              })
            }
          }, this)
        }, 100))
      },
      goMakePic(){
        wx.navigateTo({
          url: '/pages/makePic/makePic',
        })
      }
    })
    

    一个头像加相框的小程序就差不多做好了。不是很完美,还请大家多多指教O(∩_∩)O

    展开全文
  • 大家好今天给大家带来一款头像框制作微信小程序源码 该源码免服务器和域名,操作简单 内包含了多种模板制作,风格多样 比如最近比较热门的姓氏头像,虽然该主题是以姓氏为主 但是姓氏主题也分很多种模板,并以复古,...
  • 参照 这篇文章中的思路实现了头像裁剪。 在 pages/constant.js 中可以修改裁剪尺寸,支持矩形。 在微信开发者工具中预览效果。 实现时需要注意的问题 movable-view 的 damping 需要设得很大,比如 1000 ,否则...
  • 主要介绍了微信小程序如何获取用户头像和昵称,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 给大家带来一款以2022虎年为主的一款头像制作小程序源码 内包含了虎年虎娃,2022元旦新年,国旗,国庆几种分类 每一种分类都包含了多种模板制作 虎娃的小编个人感觉那个卡通也是挺可爱的! 另外整个小程序的...
  • 这周把上周写的圣诞节头像框项目修改为元旦项目,主要就是UI方面重新改,然后前端实现修改一些参数 以下为修改后的UI 主要在千图网和图怪兽进行素材的下载和使用 头像滑动切换有8张可选 在前端实现方面,主要就是...

    这周把上周写的圣诞节头像框项目修改为元旦项目,主要就是UI方面重新改,然后前端实现修改一些参数
    以下为修改后的UI
    主要在千图网和图怪兽进行素材的下载和使用
    在这里插入图片描述
    头像滑动切换有8张可选
    在这里插入图片描述
    在前端实现方面,主要就是调整图片问题导致的显示问题,比如大小啊,尺寸等,还要修改js中对应滑动图片的数据
    ·········
    这周也就修改了一下设计,所以写不出来多少,下周进一步学习

    展开全文
  • 微信小程序更换头像示例Choosepic-master.zip
  • api接口是别人的,毕竟自己采集资源比较难后台程序 没有首页,只需要安装即用后台账户:admin/123456
  • 在【海豚趣图】的交互设计中,用户有三种选择图片的方式:微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示:1、由于微信官方不再支持通过 wx.getUserInfo 接口来获取用户信息,我们必须通过使用but...

    获取用户头像e68a84e8a2ad62616964757a686964616f31333436316336

    图片模板

    图片合成

    一、获取用户头像

    制作自定义头像的第一步就是先选择图片。在【海豚趣图】的交互设计中,用户有三种选择图片的方式:微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示:

    1、由于微信官方不再支持通过 wx.getUserInfo 接口来获取用户信息,我们必须通过使用 button 组件并将 open-type 指定为 getUserInfo 类型来获取或展示用户信息。

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。

    上图中弹出底部菜单的交互方式无法通过 wx.showActionSheet 来实现(因为该接口只能指定字符串文本,不能使用 button, navigator 等组件)。

    因此,只能通过自定义 actionSheet 组件来实现以上功能。

    mmp-action-sheet 组件

    以下是 mmp-action-sheet 组件的代码。

    index.wxml

    { {closeText}}

    2、通过 slot 在 action-sheet 中插入自定义的内容,比如 button、navigator 等。

    index.wxss

    .mask{  position: fixed;  top: 0;  left: 0;  width:100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  z-index: 999;

    展开全文
  • 这周主要是在搞一个新项目,主要负责UI设计和前端页面实现,也是类似之前头像框的项目,主题不同,这次的主题是圣诞,所以在UI设计上就需要注意和圣诞节的搭配。 (该项目最后取消了,所以就是记录一下过程) UI设计...

    这周主要是在搞一个新项目,主要负责UI设计和前端页面实现,也是类似之前头像框的项目,主题不同,这次的主题是圣诞,所以在UI设计上就需要注意和圣诞节的搭配。
    (该项目最后取消了,所以就是记录一下过程)

    UI设计

    首先就需要找好素材了,怎么样设计都是去看各种各样的图片进行参考,关于圣诞的设计和素材很多,所以选择还是很广的,进行素材的选择和组合,尝试怎样摆放和样式会更加好看,也需要考虑到头像框的放置位置,突出其位置。对于我这种强迫症来说,选定素材、样式和位置等,就很耗时间,虽然说就两个页面,也纠结了很久,花了我认为较多的时间来敲定下来。
    ···············
    下面就是主页面,直接开始用户的选择头像框界面
    选定背景颜色,边框以及其上的装饰背景,用白色涂鸦图片突出头像的图片,和背景的红色分割开来,更加清楚看出图片。图片是用手滑动来切换,所以需要在下方放一个提示,来告诉用户如何进行图片切换。三个按钮分别是上传微信头像、从本地上传、生成头像,可以上传自己的微信头像或者从本地上传图片,之后点击生成图片就跳转到下载图片界面进行图片的下载。
    在这里插入图片描述
    下载界面是和主界面一样用白色底突出头像框图片,其他的为设计的背景,沿用上一个界面的背景色和边框,加入圣诞树的元素。两个按钮分别为再生成一张头像和保存图片,再生成将跳转到上一界面,保存图片将在用户授权后将头像框图片保存到手机相册中。
    在这里插入图片描述

    前端页面实现

    其实大体和之前的挑战杯头像框实现差不多,这次主要是想替换一下图片的切换方式,挑战杯是通过按钮和wx:if判断语句进行图片的显示,把图片显示的wxml都写出了,一长串很冗余,按钮改变判断语句中的变量,对不同的图片进行展示。这次想将wxml中代码简化,加上滑动的功能。
    ··················

    云存储初始化

    这次是将图片存储在云存储中进行调用,所以需要使用到云开发,只要使用云存储的话,需要一个注册过的openid并且在app.js加上下面的代码

    env后的英文为自己云开发中的环境ID

    //app.js
    App({
      onLaunch: function () {
    
        wx.cloud.init({
          env:"yunkaifa-fp3py"
        })
      },
    
    })
    

    ··················

    滑动切换图片的实现

    通过{{数组名[变量]}}获取js中的数组数据,也就是定义一个变量作为数组的下标,通过用户的滑动切换变量的值,从而切换组件中对应的数组数据,获取数据对应的src地址,从而将其在云存储的图片显示出来。
    需要设置用户滑动的开始,结束和左右滑动响应函数,在其中实现相应的功能。

    <!-- 滑动图片 -->
    <view class="container1" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    <image class="img_head" src="{{imgs[index-1]}}"></image>
    </view>
    

    js中需要设置一些变量供滑动的函数使用,以及设置好需要显示的图片,放在数组中,还有变量

    var startX, endX;
    var moveFlag = true;
     data: {
        index: 1,
        imgs: [
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/1.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/2.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/3.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/4.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/5.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/6.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/7.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/8.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/9.png",
          "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/10.png",
        ],
      },
    

    触摸开始响应函数,获取用户的触摸原点,并且设置开始滑动的标志为true。

     //触摸开始事件
      touchStart: function (e) {
        startX = e.touches[0].pageX; // 获取触摸时的原点
        moveFlag = true;
      },
    

    监测触摸移动,获取移动的最后位置,如果移动超一定距离则判定为向左或者向右移动,调用左滑动或者右滑动函数。

      // 触摸移动事件
      touchMove: function (e) {
        endX = e.touches[0].pageX; // 获取触摸时的原点
        if (moveFlag) {
          if (endX - startX > 50) {
            console.log("move right");
            this.move2right();
            moveFlag = false;
          }
          if (startX - endX > 50) {
            console.log("move left");
            this.move2left();
            moveFlag = false;
          }
        }
      },
    

    结束事件

      // 触摸结束事件
      touchEnd: function (e) {
        moveFlag = true; // 回复滑动事件
      },
    

    左滑动函数,当用户左滑动时调用,在其中进行变量的修改,使其显示当前图片前的一张图片,需要判断图片是否为第一张,若为第一张需要将变量设为图片的数量值,使其显示最后一张图片,否则会出现对应不到图片的情况。

      //左滑动函数
      move2left() {
        var that = this;
        var index = that.data.index;
        if(index==1){
          this.setData({
            index:10
        })
        }else{
          this.setData({
            index:index-1
        })
        }
      },
    

    右滑动函数,当用户右滑动时调用,在其中进行变量的修改,使其显示当前图片后的一张图片,需要判断图片是否为最后一张,若为最后一张需要将变量设为1,使其显示第一张图片,否则会出现对应不到图片的情况。

      //右滑动函数
      move2right() {
        var that = this;
        var index = that.data.index;
        if(index==10){
          this.setData({
            index:1
        })
        }else{
          this.setData({
            index:index+1
        })
        }
      },
    

    ··················
    以下的都是之前都写过的了,就简单地再记录一下

    背景图片铺满

    设置其mode为aspectFill,这个属性是图片会根据长宽比例进行缩放从而铺满屏幕,不会影响到图片的比例

    <!-- 背景 -->
    <image class='background' src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/bg1.png" mode="aspectFill"></image>
    

    wxss中最重要的就是设置background-size,并且将其置于下方z-index,就不会遮挡到别的组件

    .background {
      width: 100%;
      min-height:100%;
      position:fixed; 
      background-size:100% 100%;
      z-index: -1;
    }
    
    组件之间有上下层顺序时如何设置下方组件的居中
    <!-- 底部白色 -->
    <view class="img_down">
    <image src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/back.png"></image>
    </view>
    

    在wxss中,需要设置其position为absolute,这样该组件可以进行重叠显示,并且在别的正常书写的组件的下方。而使用了position后就不能用之前一直使用的flex布局进行图片的居中了,所以后来修改的方法就是直接设置其left属性,将其数值设置为正好在页面中可以居中的数字,经测试是可以在不同尺寸的手机上进行居中显示的。

    .img_down{
      margin-top: 220rpx;
      position: absolute;
      left:6%;
    }
    .img_down image{
      height:560rpx;
      width: 677rpx;
    }
    
    正常图片居中
    <!-- 手指图片 -->
    <view class="img_move">
    <image src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/move (1).png" ></image>
    </view> 
    

    这几句代码最居中的关键 display: flex; flex-direction: row; align-items: center; justify-content: center;

    .img_move{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 25rpx;
    }
    .img_move image{
      height: 270rpx;
      width: 340rpx;
    }
    
    按钮为图片

    设置好按钮,并且内嵌图片样式

      <button class="btn_upload" bindtap="upload">
       <image src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/weixin.png"></image>
      </button>
    

    设置按钮背景为透明,并且无边框,将图片的长宽设置为和按钮长宽一致。

    .btn_upload{
      background: rgba(0,0,0,0);
      width: 244rpx;
      height: 92rpx;
      padding: 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .btn_upload image{
      width: 244rpx;
      height: 92rpx;
    }
    .btn_upload::after{
      border: 0;
    }
    
    生成图片后下一个界面获取用户选择的图片

    将index变量作为参数在跳转时传递给下一个界面,下一个界面也有imgs数组,获取index参数,将其传递给组件中的imgs[index],进行图片的显示

    使用到的跳转的两种形式

    普通跳转,打开新界面,原来界面还存在

     wx.navigateTo({
          url: '../logs/logs?index=' + index
        })
    

    会将当前界面关闭,并打开新界面

     wx.reLaunch({
            url: '../index/index'
          })
    
    展开全文
  • 最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也...小程序相关项目 1.wepy项目 https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.com/ 3.官网API https://developers.weixin.qq.co
  • 还可以制作贴图头像框,各种卡通,卡哇伊,男神女神标等等模板可以制作的 另外还支持检测你的手机型号,自动辨别手机真假等等 这款小程序支持多种流量主广告,至于广告ID模板小编也整合在压缩包里面 安装方法: 使用...
  • 那么这款程序呢就是可以制作生成与万圣节相关的头像框 内含多种模板风格可供选择 支持用户上传模式和自动获取微信头像模式 另外该款小程序是无需服务器和域名的 搭建方法也特别简单 使用微信开发者工具打开该...
  • 直接从项目里面拿出来的代码,附带了很多其他代码可供参考,都是亲测测试通过的。里面还附带了php后端代码文件。
  • 这是一款头像框DIY制作的一款微信小程序源码 内含多种多样化的模板 不同的风格让你更有创意 是一款非常不错的引流小帮手 目前拥有六大分类,每大分类都有N个不同风格模板 主播头像框,微信状态框,气泡提醒框,吃鸡...
  • 微信头像制作小程序源码.rar
  • 主要介绍了微信小程序实现获取用户信息并存入数据库操作,涉及微信小程序wx.request后台数据交互及php数据存储相关操作技巧,需要的朋友可以参考下
  • 微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx...
  • 在经历 BBS、Wiki、Blog、公众号的失败后,我转身投入了小程序。或许,这是在校最后一次干自己喜欢的事了。 功能 [x] 课表(目前只支持当前学期) [x] 校园卡(余额,消费记录) [ ] …… 当 XX 转型主打聊天交友...
  • 微信小程序头像上传

    千次阅读 2018-12-26 14:05:16
    &lt;view class='head_img'...头像&lt;/text&gt; &lt;view class='img'&gt;&lt;image src='{{userimg}}'&gt;&lt;/image&gt;&lt;/view&gt; &lt;/view&gt; 二、
  • 微信小程序个人简历制作,传统的简历以一个文档的形式存在,现如今可以借助微信小程序平台制作个性化的简历。<!--index.wxml--> !hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo=...
  • 项目描述:用于关注新闻的一个小程序。 实现功能:1. 新闻首页 a. swiper b. 上拉刷新 c. loading等待加载 2. 视频首页 a. video 3. 详情页 a. 新闻页点击传参数获取数据加载详情页 b. 详情页先显示标题,再显示详情...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,173
精华内容 5,669
关键字:

微信小程序头像框

微信小程序 订阅