【Mini Programa WeChat】Cree una página de información personal

Fuera de tema:
tal vez el aprendizaje frontal también debería incluir la estética . En mi camino para aprender front-end, solía imitar el contenido de video, pero ahora imito los productos terminados de otras personas... Una vez pensé si como front-end, también debería aprender el conocimiento artístico del diseño de interfaz de usuario, e incluso si es malo, debería tener la estética del diseño de página . Pero esta idea fue rechazada por un gran jefe, por lo que había que tener en cuenta esta idea como otra posibilidad.

Comparta las habilidades de escritura de un artículo de CSDN que aprendí hoy ~

Temática:

Producto terminado primero

1. Arquitectura

Antes de programar, necesitamos estructurar . Para el proyecto en general, se llama arquitectura, pero para una página, es mejor llamarlo organizar ideas .

Tome esta imagen como ejemplo, a excepción de la barra de pestañas inferior, el estilo de navegación del encabezado es la configuración única del subprograma , y ​​los otros son el contenido básico de los "Tres mosqueteros de la parte delantera".

Por lo tanto, se puede dividir simplemente en dos partes:

1. área de fondo azul
2. área del cuerpo blanco

Adjunto mapa mental:

Nota: utilice el posicionamiento absoluto lo menos posible durante el desarrollo.

2. Programación

Consejo de primera fila : el código se puede copiar a VScode y es mucho más cómodo de ver

Paso 1: Escriba el diseño de acuerdo con la arquitectura

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


<view class="partTwo">

</view>

Paso 2: Analizar el contenido específico de la caja

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

Paso 3: Escribir estilos CSS, generalmente haré el segundo y tercer paso al mismo tiempo

También soy muy bueno en los conceptos básicos de CSS, y hay muchas formas de implementarlo, por lo que no entraré en detalles aquí.

1. el hijo del padre
2. margen - izquierda
3. Use línea - altura para estirar la altura de la caja en lugar de establecer la altura de la caja
4. justificar - contenido: espacio - entre ver su valor completo