在微信小程序开发过程中，界面的布局是十分重要的，无论是一个什么样的程序，界面的美观合理才能提供给客户一个较好的使用体验，就微信小程序布局自己看了许多小程序布局，自己将学习心得记录如下：
下面的图片是根据教学视频自己的一些学习进程。
以下是微信小程序界面的头部尾部布局相关代码：
<include src="../templates/header" />Qi<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="default"hover-class="other-button-hover">default</button><buttontype="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="primary"bindtap="btnclick">{{btnText}}</button><view wx:if="{{show}}">{{text}}</view><view wx:for="{{[‘aaa‘,‘bbb‘,‘ccc‘]}}">{{item}}</view><import src="../templates/footer" /><template is="footer1" />
该部分是界面布局的重要组成部分，用以首尾进行界面加工。
家庭小账本相关图是界面布局的一部分：
<view class="usermotto" bindtap="goIndex_1Tap"><text class="user-motto" >家庭小账本</text></view>/**index.wxss**/.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.userinfo-nickname {color: #ce3bc5;margin:20rpx;}.usermotto {border:1.2px solid #ce3bc5;margin-top: 150px;padding:4px 10px;border-radius:6px;}.user-motto{color:#ce3bc5;}
其中index.wxss文件是用来进行文字与边线的修饰以及图形位置的设定。
底部的图片是外界导入的，可以直接通过复制粘贴到文件目录下进行导入，方便快捷，但是要注意图片所占内存大小，不要太大，一般不超过几百KB。
