【WeChat Mini Program】Create a personal information page

Off- topic:
Maybe front-end learning should also include aesthetics . On my way to learn front-end, I used to imitate video content, but now I imitate other people's finished products... I once thought whether as a front-end, I should also learn the art knowledge of UI design, and even if it is bad, I should have the aesthetics of page layout . But this idea was rejected by a big boss, so this idea had to be kept in mind as another possibility.

Share a CSDN article writing skills that I learned today~

Main topic:

Finished product first

1. Architecture

Before programming, we need to structure . For the overall project, it is called architecture, but for a page, it is better to call it organizing ideas .

Take this picture as an example, except for the bottom tabBar , the header navigationStyle is the unique configuration of the applet , and the others are the basic content of the "Front-end Three Musketeers".

So it can be simply divided into two parts:

1. blue background area
2. white body area

Mind map attached:

Note: Use absolute positioning as little as possible during development.

2. Programming

Front row tip : The code can be copied to VScode and it is much more comfortable to watch

Step 1: Write the layout according to the architecture

<view class="partOne">
  <view class="userInfo"></view>
  <view class="positiveAbsolute"></view>
</view>


<view class="partTwo">

</view>

Step 2: Analyze the specific contents of the box

<view class="partOne">
  <view class="userInfo">
    <!-- 头像区域 -->
    <view class="avatar">
      <!-- open-data 翻文档 -->
      <open-data type="userAvatarUrl"></open-data>
    </view>
    <!-- 文本区域 -->
    <view class="info">
      <!-- 用户名 -->
      <text class="name">
        <open-data type="userNickName"></open-data>
      </text>
      <!-- 学院 -->
      <text class="academy">
        访客学院
      </text>
    </view>
  </view>

Step 3: Write CSS styles, usually I will do the second and third steps at the same time

I am also very good at the basics of CSS, and there are many ways to implement it, so I won't repeat it here.

1. Father of the child
2. margin - left
3. Use line - height to stretch the height of the box instead of setting the height of the box
4. justify - content : space - betweem see its full value