界面的布局

在微信小程序开发过程中，界面的布局是十分重要的，无论是一个什么样的程序，界面的美观合理才能提供给客户一个较好的使用体验，就微信小程序布局自己看了许多小程序布局，自己将学习心得记录如下：

下面的图片是根据教学视频自己的一些学习进程。

以下是微信小程序界面的头部尾部布局相关代码：

<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。

原文地址：https://www.cnblogs.com/Qi77/p/10426864.html