微信小程序实战篇-个人中心

哈喽，大家好，又到周五啦，有木有期待今天的更新呀~今天要教大家的是制作个人中心界面，先上效果图

个人中心制作

1. mine.js

toOrder :事件监听，跳转到我的订单界面
onLoad：在加载过程中，获取用户的信息

2. mine.wxml

布局分为三个模块，用户信息模块、我的订单模块、功能列表模块，布局不是很难，相信看源码就可以理解

3. mine.wxss

样式列表我重点讲解一下 userinfo-avatar 类中的 border-radius 属性，大家看一下效果就知道他的作用，没错设置圆角图片，正常我们都是方方正正的图片，有了这个属性，可以轻松实现圆角图片了

我的订单制作

我的订单，其实界面的实现原理和首页的导航栏是一样的，只不过换了一下内容以及导航栏标题罢了，所以这里我就不细讲了，不懂的朋友可以看我首页导航栏是怎么制作的，模仿写出来就好

1. order.js

2. order.wxml

3. order.wxss

总结

界面布局差不多就讲到这里了，大家也看到了，其实越到后面，要讲的界面内容知识就越少，万变不离其中吧，后续的话，代码君打算讲一下微信小程序的网络请求框架，敬请期待，最后祝大家周末愉快~

关注公众号获取最新文章