Cómo construir una pantalla esqueleto para un mini programa
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)
}
})