首先是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>地區(qū)</view>
           <view class="wrap_img" bindtap="nickname" data-vlaue="地區(qū)" >
            <text style="margin-right: 60rpx;">{{user.region}}</text>
                <image src="/Images/youjiantou.png"></image>
            </view>
      </view>
      <view class="con_wrapd">
           <view>手機(jī)號</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;">點(diǎn)擊綁定</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, //默認(rèn)9
            sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
            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, //默認(rèn)9
            sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
            sourceType: ['camera'], //從相機(jī)
            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文章來源地址http://www.zghlxwxcb.cn/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;
}
/* 件數(shù)彈窗 */
.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%;
    /* //設(shè)置陰影半透明背景如： background: rgba(0, 0, 0, 0.4); */
    display: none;
   }
   .zan-dialog__container {
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    /* //彈窗布局寬 */
    height: 35%;
    /* //彈窗布局高，與下面彈出距離transform有關(guān) */
    border-radius:20rpx 20rpx 0 0  ;
    background: #f8f8f8;
    transform: translateY(300%);
    /* //彈框彈出距離，與彈框布局高度有關(guān)，如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;
   }

到了這里，關(guān)于微信小程序個人資料（修改頭像，上傳圖片和拍照）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！