微信小程序--家庭记账本开发--04

Posted 祺&Qi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序--家庭记账本开发--04相关的知识,希望对你有一定的参考价值。

界面的布局

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

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

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

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

以上是关于微信小程序--家庭记账本开发--04的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序--家庭记账本开发--02

微信小程序家庭记账本开发进度五

微信小程序--家庭记账本开发--01

家庭记账小账本

Java的家庭记账本程序(J)

微信小程序--家庭记账小账本