微信小程序换头像-即速应用

效果图：

先上HTML:

<view class="list-menu"><view class="navigator" bindtap='changeHead'><view class="navigator-text"><text>头像</text></view><view class="navigator-content-text" wx:if="{{myHeadImg!=null}}"><image mode="aspectFill" class="avatar" src="{{myHeadImg}}"></image></view><view class="navigator-content-text" wx:else><image mode="aspectFill" class="avatar" src="{{userInfo.avatarUrl}}"></image></view><image class='charge-img' src='https://img.cdn.zhaoshang800.com/img/2018/04/11/broker/703218f3-2b76-473d-86a3-1bd901cc57af.png'></image></view><view wx:for="{{info_list}}" wx:key="{{id}}"><view class="navigator"><view class="navigator-text">{{item.title}}</view><view class="navigator-content-text">{{item.content}}</view></view></view></view>这是JS：const app = getApp();Page({/*** 页面的初始数据*/data: {myHeadImg:null, //本地的头像urluserInfo:{}, //获取微信的 头像，昵称，性别hasUserInfo:false,info_list:[{title:"真实姓名",content:""}, {title: "手机号码",content: ""}, {title: "所在城市",content: ""},]},changeHead:function(){// console.log('换头像')var that=this;wx:wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: function(res) {console.log(res)// userInfo.avatarUrl// var userImg = "userInfo.avatarUrl";var tempFilePaths=res.tempFilePaths;// that.setData({ userImg: tempFilePaths})that.upload(that, tempFilePaths)},fail: function(res) {},complete: function(res) {},})},//上传图片 后台接口upload:function(page, path) {var that=this;wx.showToast({icon: "loading",title: "正在上传"}),console.log(path[0])console.log(app.data.mytoken)wx.uploadFile({url: `${app.data.requestUrl}/sale/image/upload`,// method: 'post',filePath: path[0],name: 'file',success: function (res) {console.log(res);if (res.statusCode != 200) {wx.showModal({title: '提示',content: '上传失败',showCancel: false})return;}var data = res.dataapp.data.useLocaImg=1that.setData({ //上传成功修改显示头像'myHeadImg': path[0]})//将图片地址存到本地缓存wx.setStorage({key: "myHeadImg",data: path[0]})},fail: function (e) {// console.log(e);wx.showModal({title: '提示',content: '上传失败',showCancel: false})},complete: function () {wx.hideToast(); //隐藏Toast}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that=this;//得到本地缓存wx.getStorage({key: 'myHeadImg',success: function (res) {// console.log(res.data)//myHeadImgthat.setData({'myHeadImg': res.data})}})// console.log(this.data.myHeadImg)var bindName = "info_list[" + 0 + "].content";var bindNumber = "info_list[" + 1 + "].content";var bindCity = "info_list[" + 2 + "].content";// console.log(app.data.MycityName)this.setData({[bindName]: app.data.MyuserName,[bindNumber]: app.data.MyphoneNumber,[bindCity]: app.data.MycityName,})if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo:true,// info_list:app.globalData.userInfo.nickName})} else if (this.data.canIUse) {// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},//退出登陆dropOut:function(){},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},sure: function(){wx.navigateBack({delta: 1})}})这是CSS：.list-menu{margin-top: 20rpx;background-color: #fff;}.navigator {padding: 20rpx 10rpx 20rpx 30rpx;position: relative;display: flex;align-items: center;border-bottom:1rpx solid #eaeaea;}.navigator:before {content: " ";position: absolute;left: 30rpx;top: 0;right: 30rpx;height: 1px;border-top: 1rpx solid #D8D8D8;color: #D8D8D8;}.navigator:first-child:before {display: none;}.navigator-text {flex: 1;font-size:34rpx;font-weight: 400;}.navigator-content-text{font-size:34rpx;color:#323232;padding-right:30rpx;font-weight: 400;}.avatar{width:106.7rpx;height: 106.7rpx;border:1rpx solid #eaeaea;border-radius: 100%;margin-right:16.7rpx;margin-top:16.7rpx;}.navigator-text {flex: 1;font-size:34rpx;font-weight: 400;color: #323232;}.navigator-content-text{font-size:34rpx;color:#323232;padding-right:20rpx;font-weight: 400;}.navigator .charge-img{padding-right: 20rpx;}.charge-area{margin-top: 20rpx;width: 100%;box-sizing: border-box;padding: 16rpx 20rpx;background: #fff;display: flex;}.charge-text{flex: 9;font-size: 34rpx;color: #323232;font-weight: 400;padding-left: 8rpx;}.charge-imgs{flex: 1;text-align: right;}.charge-img{width: 30rpx;height: 30rpx;}.button-area{margin-top: 60rpx;box-sizing: border-box;width: 100%;padding: 0 30rpx;}.confirm-button{background-color: #E71853;color: #fff;}