界面的布局
在微信小程序开发过程中，界面的布局是十分重要的，无论是一个什么样的程序，界面的美观合理才能提供给客户一个较好的使用体验，就微信小程序布局自己看了许多小程序布局，自己将学习心得记录如下：
下面的图片是根据教学视频自己的一些学习进程。
以下是微信小程序界面的头部尾部布局相关代码：
<include src="../templates/header" /> Qi <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover" > default </button> <button type="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。
