微信小程序个人资料（修改头像，上传图片和拍照）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序个人资料（修改头像，上传图片和拍照）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信开发者工具个人信息修改代码怎么写,微信小程序,小程序,javascript,css

首先是wxml

<view style="padding-top: {{pageTopHeight}}px;">
  <view style="background-color: #fff;margin-top: 40rpx;padding: 10rpx 20rpx;font-size: 16px;">
      <view class="con_wrapd">
           <view>头像</view>
           <view class="wrap_img" bindtap="sculpture">
            <view class="cu-avatar lg round margin-left" style="background- 
            image:url({{user.img}});margin-right: 60rpx;"></view>
              <image src="/Images/youjiantou.png"></image>
            </view>
      </view>
      <view class="con_wrapd">
           <view>昵称</view>
           <view class="wrap_img" bindtap="nickname" data-vlaue="昵称">
              <text style="margin-right: 60rpx;">{{user.name}}</text>
              <image src="/Images/youjiantou.png"></image>
            </view>
      </view>
      <view class="con_wrapd">
           <view>地区</view>
           <view class="wrap_img" bindtap="nickname" data-vlaue="地区" >
            <text style="margin-right: 60rpx;">{{user.region}}</text>
                <image src="/Images/youjiantou.png"></image>
            </view>
      </view>
      <view class="con_wrapd">
           <view>手机号</view>
           <view class="wrap_img" >{{user.phone}}</view>
      </view>
      <view class="con_wrapd">
           <view>我的ID</view>
           <view class="wrap_img" >{{user.id}}</view>
      </view>
      <view class="con_wrapd" style="border: none;">
           <view>推荐人ID</view>
           <view class="wrap_img" bindtap="nickname" data-vlaue="推荐人ID">
               <text style="margin-right: 60rpx;">点击绑定</text>
               <image src="/Images/youjiantou.png"></image>
            </view>
      </view>
  </view>
</view>
<!--头像 -->
<view class="zan-dialog {{ showdDialog ? 'zan-dialog--show' : '' }}" catchtouchmove='ture' >
    <view class="zan-dialog__mask" bindtap="hidedType"/>
    <view class="zan-dialog__container">
        <view>用微信头像</view>
        <view class="cu-avatar radius margin-left" style="background-image:url({{user.img}});"></view>
        <view bindtap="chooseImage" style="margin-top: 40rpx;">从相册选择</view>
        <!-- <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera> -->
        <view bindtap="takePhoto" style="margin-top: 40rpx;">拍照</view>
        <view style="margin-top: 40rpx;border-top: solid 10px rgb(241, 239, 239);padding-top: 40rpx;" bindtap="hidedType">取消</view>
       
    </view>
</view>

开始他的js，有两种方法，第一张自己写的js

    onLoad: function (options) {
        setInterval(() => { 
            var user = wx.getStorageSync('muserlist')//个人资料
            this.setData({
                user:user
            })
        },100)
    },
  //头像遮盖层
    hidedType:function(e){
        this.setData({
          showdDialog:false
        })
      },
      //头像
      sculpture:function(e){
        this.setData({
          showdDialog:true
        })
      },
      //从相册选择
      chooseImage() {
        wx.chooseImage({
            count: 1, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: (res) => {
              if (this.data.imgList.length != 0) {
                this.setData({
                  imgList: this.data.imgList.concat(res.tempFilePaths)
                })
                this.data.user.img=this.data.imgList
                wx.setStorageSync('muserlist',this.data.user)//添加
              } else {
                this.setData({
                  imgList: res.tempFilePaths
                })
                this.data.user.img=this.data.imgList
                wx.setStorageSync('muserlist',this.data.user)
              }
            }
     
        });
        this.setData({
            showdDialog:false
          })

      },
    //   拍照
    takePhoto:function(){
        wx.chooseImage({
            count: 1, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera'], //从相机
            success: (res) => {
              if (this.data.imgList.length != 0) {
                this.setData({
                  imgLists: this.data.imgList.concat(res.tempFilePaths)
                })
                this.data.user.img=this.data.imgLists
                wx.setStorageSync('muserlist',this.data.user)
              } else {
                this.setData({
                  imgLists: res.tempFilePaths
                })
                this.data.user.img=this.data.imgLists
                wx.setStorageSync('muserlist',this.data.user)
              }
            }
     
        });
        this.setData({
            showdDialog:false
          })
    },

第二种微信自带的wxml

  <view class="con_wrapd">
    <view>头像</view>
        <button  class="wrap_img"  open-type="chooseAvatar" bindchooseavatar="assd">
            <view class="cu-avatar lg round " style="background- 
            image:url({{user.avatar}});margin-right: 30rpx;"></view>
               <image src="/Images/youjiantou.png"></image>
         </button>
  </view>

wxss文章来源地址https://www.toymoban.com/news/detail-858662.html

.con_wrapd{
    display: flex;
    border-bottom: 1px solid rgb(236, 235, 235);
    line-height: 130rpx;
}
.wrap_img{
    flex: 1;
    text-align: end;
    color: #99949d;
   position: relative;
    /* margin-top: 10rpx; */
}
.wrap_img image{
    width: 45rpx;
    height: 45rpx;
    position: absolute;
    right: 20rpx;
    top: 43rpx;
}
/* 件数弹窗 */
.zan-dialog__mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.3);
    height: 100vh;
    width: 100%;
    /* //设置阴影半透明背景如： background: rgba(0, 0, 0, 0.4); */
    display: none;
   }
   .zan-dialog__container {
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    /* //弹窗布局宽 */
    height: 35%;
    /* //弹窗布局高，与下面弹出距离transform有关 */
    border-radius:20rpx 20rpx 0 0  ;
    background: #f8f8f8;
    transform: translateY(300%);
    /* //弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度 */
    transition: all 0.4s ease;
    z-index: 112;
  text-align: center;
  line-height: 60rpx;
  padding-top: 25rpx;
    /* //弹框的悬浮阴影效果，如不需要可注释该行 */
   }
  
   .zan-dialog--show .zan-dialog__container{
    transform: translateY(0);
   }
   
   .zan-dialog--show .zan-dialog__mask {
    display: block;
   }

到了这里，关于微信小程序个人资料（修改头像，上传图片和拍照）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！