Red de conocimiento informático - Conocimiento informático - Cómo construir una pantalla esqueleto para un mini programa

Cómo construir una pantalla esqueleto para un mini programa

En H5, la pantalla hueca en realidad no es un concepto novedoso. También hay varios programas en Internet para generar pantallas huecas correspondientes, incluidas las aplicaciones que usamos habitualmente, como Zhihu, Ele.me y Meituan, todas las cuales tienen pantallas huecas. . Concepto

Procedimiento

Primero que nada, comencemos con el programa para que H5 genere una pantalla hueca. En términos generales, existen dos tipos de H5 para generar una pantalla hueca.

p>

1. Completamente escrito a mano. Personaliza un conjunto de imágenes de esqueleto para cada página usando HTML y CSS.

2. Usa el renderizado previo para generar imágenes estáticas.

1. -escribir HTML y CSS para cada página Personalizar un conjunto de imágenes de esqueleto

2. Utilice el renderizado previo para generar imágenes de esqueleto estáticas

La primera solución es sin duda el método más simple y directo Pero sus deficiencias también son obvias: si se modifica el diseño de la página, además de modificar el código comercial, también es necesario modificar la pantalla esqueleto, lo que aumenta los costos de mantenimiento. Los costos de mantenimiento aumentan.

El segundo conjunto de soluciones ha mejorado hasta cierto punto las desventajas del aumento de los costos de mantenimiento causados ​​por el primer conjunto de soluciones. La herramienta principal sigue siendo prerenderizar la página, obtener nodos y estilos DOM. y conserve la estructura de la página, sobrescriba el estilo, genere bloques grises para cubrir el texto original, imágenes o nodos del lienzo, etc., y finalmente empaquete el HTML y CSS generado, y la página tendrá una imagen esqueleto. Finalmente, use la herramienta webpack para insertar la pantalla esqueleto generada en HTML. Para obtener más detalles, puede ver el uso compartido de Ele.me, por lo que no lo describiré aquí. Obtener nodos

Prerenderizado

Luego, echemos un vistazo al programa de pantalla esqueleto proporcionado por Ele.me, usando el titiritero para renderizar la página (o use el renderizado del lado del servidor, use renderizado del lado del servidor, use la página de renderizado del titiritero).

(O utilice la representación del lado del servidor, vue o reaccionar proporcionan los programas correspondientes) para obtener nodos y estilos DOM. Una cosa a tener en cuenta aquí es que la representación de la página requiere la inicialización de los datos. La fuente de los datos puede ser datos de inicialización (vue). Por supuesto, el miniprograma no puede utilizar el titiritero directamente para el renderizado previo (existe otro método. La representación de la plantilla de datos de inicialización del miniprograma requiere una estructura de inicialización como la estructura de la pantalla esqueleto). //index .js

Página({

datos: {

lema: 'Hola mundo',

información de usuario: {

avatarUrl: '/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',

nickName: 'jay'

},

listas:[

'aslkdnoakjbsnfkajbfk',

'qwrwfhbfdvndgndghndeghsdfh',

'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',

],

showSkeleton : verdadero

},

onLoad: function () {

const that = this

setTimeout(() =gt; {

const eso = esto

setTimeout(() =gt; {

p>

ese.setData({

<) p>eso. p>showSkeleton: false

})

}, 3000)

}

})