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

　　既然微信小程序也有头像，那是不是可以像微信资料一样进行头像更换呢?接下来小编就为大家讲解一下小程序获取微信头像怎么开发。

　　首先，小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

　　整个系统分为两块视图层(View)和逻辑层(App Service)。简单的来说，就是不能使用html 、div 、p等等这些标签。另外，使用FLex小程序布局，关于Flex布局教程，.runoob/w3cnote/flex-grammar.html

　　这是做好的一个小程序页面，现在需要点击头像，更换自己喜欢的头像。

　　代码截图：

　　还是贴了代码，方便以后复制粘贴，哈哈。

　　头像

　　bindtap是事件绑定，相当于javascript里的onclick, 对最外层的view绑定了setPhotoInfo方法，方便用户点击所以绑定在最外层。

　　添加了一个变量imgurl，对image进行判断，如果imgurl不为空，则显示我们上传的图片，如果为空，就使用用户自己的头像，userInfo.avatarUrl 是获取用户头像。setPhotoInfo方法中，调用微信获取头像的API【wx.chooseImage】。

　　代码截图：

　　设置imgurl默认为空

　　that.setData({imgUrl:tempFilePaths}) 获取到上传的文件，赋值给imgurl。

　　页面完整WXML:

　　头像

　　名字

　　{{infoname}}

　　*别

　　{{array[index]}}

　　手机号

　　13812345678

　　地区

　　{{address}}

　　退出

　　页面完整WXSS:

　　/* pages/more/info/info.wxss */

　　.info-cont{

　　border-top:solid 1px #f0f0f0;

　　padding-top: 30rpx;

　　display: flex;

　　flex-direction: column;

　　}

　　.infoMain{

　　border-bottom:solid 1px #f0f0f0;

　　display: flex;

　　background-color: #fff;

　　flex-direction: column;

　　margin-bottom: 30rpx;

　　}

　　.info-items{

　　display: flex;

　　justify-content: space-between;

　　align-items: center;

　　padding:20rpx 40rpx;

　　border-top:solid 1px #f0f0f0;

　　}

　　.infotext{

　　display: flex;

　　align-items: center;

　　}

　　.userinfo-avatar {

　　width: 128rpx;

　　height: 128rpx;

　　margin: 0 20rpx;

　　border-radius: 50%;

　　}

　　.info-motto{

　　margin: 0 20rpx;

　　color:#888;

　　}

　　.buttonExit{

　　margin:0 40rpx;

　　}

　　参照以上的小程序码，想要小程序获取微信头像就很简单了，只要复制代码进行相关的操作就可以获取头像了。想要获取更多相关资料请关注微信小程序素材网。

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

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

　　微信小程序码如何获取?获取微小信小程序码方法