微信小程序头像怎么布局？

　　微信小程序头像怎么布局?一个好的头像可以吸引不少的用户，因为头像就相当于人的脸，高颜值才能引来高关注。那么小程序头像怎么布局呢?下面一起来随小编了解下吧。

　　微信小程序头像怎么布局?

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

　　整个系统分为两块视图层(View)和逻辑层(App Service)。简单的来说，就是不能使用html 、div 、p等等这些标签。另外，大家可以尝试使用FLex小程序布局。

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

　　小程序代码截图：

　　小程序头像：

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

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

　　代码截图：

　　设置imgurl默认为空

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

　　选择照片方式,将照片通过小程序后台上传到服务器

　　以上就是小编搜集的微信小程序头像怎么布局?的全部内容了，希望可以帮到大家，头像布局的好坏主要是看是否符合大众的审美观念，符合了就不要考虑太多了。更多精彩尽在微小乔!

　　微信小程序table布局怎么开发?

　　微信小程序页面排版怎么布局?

　　微信小程序卡片布局怎么做?