Dado que el tamaño del código frontal del subprograma es de solo 2 M como máximo, sin duda nos vemos obligados a colocar tantas imágenes como sea posible en el servidor remoto de acuerdo con la especificación del subprograma, es decir, usar imágenes de red en lugar de locales. imágenes (el tamaño de las imágenes locales se contará en el tamaño del programa de empaquetado). Las imágenes de datos generales están bien, no hace falta decir que las pondremos en el servidor, pero algunos íconos son un dolor de cabeza, especialmente para algunos programadores que no tienen UI pero buscan imágenes como íconos por sí mismos. una buena biblioteca de iconos aquí y es gratis, esa es la biblioteca de iconos de Alibaba. La dirección está aquí: https://www.iconfont.cn/home/index
No hablemos tonterías, veamos cómo usarlo.
1 Iniciar sesión y crear mi proyecto
No hace falta decir que hay tres formas de iniciar sesión. Se estima que la mayoría de las personas solo tienen una cuenta de Sina, y las mejores tienen una cuenta de github. El tercer método es hacer trampa, solo elija uno para ingresar.
Luego seleccione "Administración de iconos" -> "Mi proyecto" arriba
Aquí encontrará que su proyecto está vacío, no se preocupe, haga clic en la carpeta correcta a la derecha para crear un proyecto y luego complete el contenido, el contenido es casual, no importa
Dos seleccione el icono para agregar al proyecto
A continuación, depende del tipo de icono que necesite y luego elija agregarlo a la biblioteca.
Luego haga clic en el ícono del carrito de compras en la esquina superior derecha y seleccione Agregar al artículo
Luego encontrará que el ícono que acaba de agregar está en su proyecto, ignore otros íconos que agregué antes
3. Descargue el archivo de estilo de icono y colóquelo en el applet de WeChat
Después de descargar y descomprimir, coloque el archivo iconfont.css en su proyecto de applet y cambie el sufijo .css a .wxss
Pero hasta ahora, todavía se introducen recursos locales, entonces, ¿cómo elegir el método de enlace externo y luego mirar hacia abajo?
Cuatro Copie el código del enlace en línea para modificar iconfont.wxss
Vuelva a la gestión de proyectos, haga clic en Unicode y copie el código
Luego, sobrescriba el archivo iconfont.wxss que acaba de copiar en el applet y reemplace el contenido de @font-face
Es decir, reemplaza el código que acabas de copiar aquí
Cuatro estilos de importación y utilícelos en el control.
Introdúcelo en el wxss de tu página, por ejemplo, si lo usas en a.wxml, entonces agrega este código en la primera línea de a.wxss para importar
Entonces se puede usar así en el archivo de página a.wxml
Entre ellos, iconfont es un prefijo fijo, y el siguiente shanchu es el código del icono específico bajo su iconfont.wxss
Este es el final. Si agrega íconos más tarde, aún irá a la administración de proyectos, que le pedirá que haga clic en Actualizar código y continúe con los pasos anteriores.
También tenga en cuenta:
Si desea modificar el tamaño y el color del ícono, puede personalizar un selector, usar tamaño de fuente para el tamaño y color para el color.