小程序获取用户头像怎样操作？

　　微信小程序的头像对小程序的使用体验来说也是及其关键的一部分，但是很多开发者还不知道怎样才能让小程序获取用户头像，看看以下资料吧。

　　1. action-sheet 底部弹出可选菜单组件

　　2. wx.uploadFile 将本地资源上传到服务器

　　3. wx.chooseImage 从本地相册选择图片或使用相机拍照。

　　4. wx.previewImage 预览图片

　　效果图：

　　wxml代码：

　　style="top:{{windowHeight * 0.4}}px;">

　　点击登录

　　摘要信息

　　发布博客

　　信息列表

　　8

　　详细信息

　　个人资料

　　设置

　　{{item.txt}}

　　取消

　　wxss代码：

　　.page__bd{

　　background: url(.itit123/image/meBack.jpg) no-repeat;

　　background-size:cover;

　　}

　　js代码：

　　var util = require('../../utils/util.js');

　　var app = getApp();

　　Page({

　　data: {

　　userImg: "../../images/pic_160.png", // 头像图片路径

　　actionSheetHidden: true, // 是否显示底部可选菜单

　　actionSheetItems: [

　　{ bindtap: 'changeImage', txt: '修改头像' },

　　{ bindtap: 'viewImage', txt: '查看头像' }

　　] // 底部可选菜单

　　},

　　// 初始化加载获取设备长宽

　　onLoad: function (options) {

　　var that = this;

　　wx.getSystemInfo({

　　success: function (res) {

　　that.setData({

　　windowHeight: res.windowHeight,

　　windowWidth: res.windowWidth

　　})

　　}

　　});

　　},

　　// 点击头像 显示底部菜单

　　clickImage: function () {

　　var that = this;

　　that.setData({

　　actionSheetHidden: !that.data.actionSheetHidden

　　})

　　},

　　// 点击其他区域 隐藏底部菜单

　　actionSheetbindchange: function () {

　　var that = this;

　　that.setData({

　　actionSheetHidden: !that.data.actionSheetHidden

　　})

　　},

　　// 上传头像

　　changeImage: function () {

　　var that = this;

　　wx.chooseImage({

　　count: 1, // 默认9

　　sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

　　sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

　　success: function (res) {

　　// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属*显示图片，只有一张图片获取下标为0

　　var tempFilePaths = res.tempFilePaths[0];

　　that.setData({

　　userImg: tempFilePaths,

　　actionSheetHidden: !that.data.actionSheetHidden

　　})

　　util.uploadFile('/itdragon/uploadImage', tempFilePaths, 'imgFile' ,{}, function (res) {

　　console.log(res);

　　if (null != res) {

　　that.setData({

　　userImg: res

　　})

　　} else {

　　// 显示消息提示框

　　wx.showToast({

　　title: '上传失败',

　　icon: 'error',

　　duration: 2000

　　})

　　}

　　});

　　}

　　})

　　},

　　// 查看原图

　　viewImage: function () {

　　var that = this;

　　wx.previewImage({

　　current: '', // 当前显示图片的链接

　　urls: [that.data.userImg] // 需要预览的图片链接列表

　　})

　　}

　　});

　　只需要简单的几步，小程序获取用户头像就能够开发完成了，更换一个小程序头像也许能吸引更多的用户前来使用，想要获取更多相关资料请关注微信小程序素材网。

　　小程序获取微信头像开发代码

　　小程序头像规定，小程序开发有些什么规定?

　　怎样实现小程序获取表单数据?