微信小程序更换头像的实现源码

た入场券 2021-09-17 01:28 623阅读 0赞

微信小程序更换头像的实现源码

html

<view class='top_head_border'>   
     <image class='top_head' src='{
       {head}}'></image>  
     <view class='top_text'  mode="aspecFill" bindtap="headimage">点击更换头像</view>
     </view>

css

.top_head {
      margin-top: 30rpx;
      width: 160rpx; 
      height: 160rpx; 
      border-radius: 100%; 
      border: 1px solid rgba(51, 51, 51, 1);
           }
    .top_text { 
     line-height: 40rpx;  
     color: rgba(229, 28, 35, 1);  
     font-size: 28rpx;  
     font-family: Roboto;
     }

data: {  
         // 切换头像  
        showModal: false,   
         head: "/img/1.png",   
         },
           // 点击换手机相册或者电脑本地图片    
           headimage: function() {   
              var _this = this;  
               wx.chooseImage({    
                   count: 1, // 默认9      
                    sizeType: ['original', 'compressed'],       
                      // 指定是原图还是压缩图，默认两个都有      
                       sourceType: ['album', 'camera'],      
                      // 指定来源是相册还是相机，默认两个都有    
                       success: function(res) {       
                       // 返回选定照片的本地文件路径tempFilePath可以作为img标签的src属性显示图片 
                       //然后请求接口把图片传给后端存到服务器即可       
                         _this.setData({    
                           head: res.tempFilePaths      
                                              }) 
                                    }    
                       }) 
          },

发表评论取消回复

表情：

评论列表（有 0 条评论，623人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序商城搭建,微信小程序商城源码,微信小程序商城项目

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序商城系统，前台用户使用小程序，小程序使用微信开发者工具开发；后台管理使用基PP+MySql的B/

谁践踏了优雅/ 2024年04月01日 14:09/ 0 赞/ 85 阅读

相关 2048微信小程序源码

2048微信小程序效果 ![2945705f6c944da7933684b3ef71ee6c.png][] 布局页面 ![57b3800a9b2349e4b5c17976

Bertha 。/ 2024年03月24日 15:41/ 0 赞/ 65 阅读

相关【微信小程序】实现投票功能（附源码）

一、Vant Weapp介绍 > 1. Vant Weapp 是一个基于微信小程序的组件库，它提供了丰富的 UI 组件和交互功能，能够帮助开发者快速构建出现代化的小程序

柔情只为你懂/ 2024年02月21日 12:03/ 0 赞/ 64 阅读

相关微信小程序canvas实现签名(源码)

<view class="wrapper"> <v

迷南。/ 2023年01月09日 12:32/ 0 赞/ 186 阅读

相关微信小程序canvas实现签名(源码)

<view class="wrapper"> <v

r囧r小猫/ 2022年11月19日 09:52/ 0 赞/ 209 阅读

相关打造微信圆形头像更换

很多都会发现微信的头像不是圆形，而今天我将浅谈一下，如何实现圆形头像。QQ5.0以后的版本就是圆形头像了而微信不是。当然了实现圆形头像的方法有很多种，可以使用开源的库，可以去写

「爱情、让人受尽委屈。」/ 2022年08月10日 09:53/ 0 赞/ 179 阅读

相关微信小程序源码案例

[微信小程序demo：足球，赛事分析][demo] [小程序简易导航][Link 1] [小程序demo：办公审批][demo 1] [小程序Demo：

清疚/ 2022年05月09日 05:56/ 0 赞/ 328 阅读

相关微信小程序获得微信头像和昵称

[微信小程序获得微信头像和昵称][Link 1] { wx.getSetting({ success: res => {

清疚/ 2022年04月02日 04:18/ 0 赞/ 783 阅读

相关微信小程序--open-data获取用户头像实现头像圆角

index.wxml: <view class="userinfo-avatar"> <open-data type="userAvatarUrl"><

桃扇骨/ 2022年03月16日 17:07/ 0 赞/ 408 阅读

相关微信小程序更换头像的实现源码

微信小程序更换头像的实现源码 html <view class='top_head_border'> <image class='top_head'

た入场券/ 2021年09月17日 01:28/ 0 赞/ 624 阅读